- 1基于DSP28335的单相PWM整流 双闭环PI控制_#define ad_astart ((uint16 *)0x100000) //片外ad的数据读取
- 2Reading Note(4)——面向关系型数据库的哈希连接加速器_“join” fpga 数据库
- 3消息队列专题(架构篇)：RabbitMQ 的集群架构模式_rabbitmq集群有几种模式
- 4python湖南长沙游玩商家数据可视化大屏全屏系统设计与实现（django框架）_基于python的旅游数据与可视化系统设计与实现国内外研究现状
- 5QT开发实战-动态壁纸软件_qt如何创建背景动画
- 6c# .net core 生成缩略图（在linux运行）_netcore linux 缩略图
- 7正版还是盗版？这是一个问题。
- 8K8S系列一：概念入门_什么是k8s?他的架构作用目的是什么
- 9日常问题解决汇总_urlerror:
- 10Postman：创建工作流_postmat 工作流
前端面试题_mui面试题
赞
踩
1、第一组
1、jquery中的$是什么意思
在JQuery中，“ ” 就 是 j Q u e r y 的 别 称 ， 是 j Q u e r y 库 提 供 的 一 个 回 传 函 数 ， 定 义 为 “ 选 取 ” ， 是 “ s e l e c t o r ” 的 缩 写 ； 语 法 “ ”就是jQuery的别称，是jQuery库提供的一个回传函数，定义为“选取”，是“selector”的缩写；语法“ ”就是jQuery的别称，是jQuery库提供的一个回传函数，定义为“选取”，是“selector”的缩写；语法“ (selector)”，作用是根据“ ()”里的参数进行查找和选择html文档中的元素。
2、圣杯布局、等高布局写法
// 圣杯布局 <style> .father{ padding: 0 300px 0 200px; } .son_left, .son_center, .son_right{ position: relative; float: left; height: 300px; } .son_center{ width: 100%; background-color: palevioletred; } .son_left{ width: 200px; left: -200px; margin-left: -100%; background-color: papayawhip; } .son_right{ width: 300px; margin-right: -300px; background-color: purple; } </style> <body> <div class="father"> <div class="son_center">这是中间的盒子</div> <div class="son_left">这是左边的盒子</div> <div class="son_right">这是右边的盒子</div> </div> </body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
// 等高布局 <style> .father{ width: 800px; overflow: hidden; min-height: 200px; margin: 0 auto; } .son_left, .son_right{ width: 400px; height: 100%; float: left; padding-bottom: 9999px; margin-bottom: -9999px; } .son_left{ background-color: antiquewhite; font-size: 18px; } .son_right{ background-color: palevioletred; font-size: 20px; } </style> <body> <div class="father"> <div class="son_left">那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉</div> <div class="son_right">那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉那是一个安静的晚上，一个人卧在摇椅上乘凉</div> </div> </body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
3、闭包是什么
有权访问另一个函数作用域中局部变量的函数
4、描述一下事件冒泡和事件委托
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。 事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。 事件委托就是通过操作父节点来间接操作子节点的方式
5、ajax的优点和缺点
优点：页面无刷新；支持异步通信；节省服务器带宽；兼容多种语言 缺点：对浏览器不兼容（不能回退）；有安全隐患；对搜索引擎支持较弱；不适合移动端
6、http常见的8种状态码
1××：消息响应 2××：成功响应 3××：重定响应 4××：客户端错误 5××：服务器端错误
7、写一个数组去重的方法
<script> // 使用set方式 let arr = [1, 1, 2, 2, 3, 4, 5, 6, 7, 4, 5, 8] let s = new Set([...arr]) console.log(s); // 使用循环 let arr = [1, 1, 2, 2, 3, 4, 5, 2, 1, 4, 5, 3] for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1) j-- } } } console.log(arr); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
8、清除浮动的几种方法
- 在父节点这里设置overflow:hidden;
- 在使用浮动的div下方添加一个空白div，设置样式为clear:both;
- 通过设置伪类 div::after:{content: “”;display: block;height: 0;clear:both;visibility: hidden;}
2、第二组
1、Element-UI打包后文件太大怎么处理
使用webpack进行项目打包，若打包后体积太大，则对图片或者代码进行压缩处理。
2、tcp和udp的区别
都是传输层协议；TCP是面向连接，可靠传输，效率低如http，ftp协议；UDP是无连接协议，不可靠传输，尽自己最大努力进行传输，效率高如IP电话，流媒体等
3、https如何加密的
采用 对称加密 和 非对称加密 结合的方式来保护浏览器和服务端之间的通信安全。 对称加密算法加密数据+非对称加密算法交换密钥+数字证书验证身份=安全
4、常见加密算法
md5哈希加密算法 即输入不定长度信息，输出固定长度128-bits的算法。经过程序流程，生成四个32位数据，最后联合起来成为一个128-bits散列。基本方式为，求余、取余、调整长度、与链接变量进行循环运算。得出结果。
5、websocket异常断链如何处理
异常断链的处理方式
6、项目开发流程
7、如何解决移动端屏幕适配
- 使用rem布局
- 使用媒体查询
- 使用响应式框架
8、常用的VUE插件
- Axios（官方推荐的ajax数据请求的插件）
- Vue-Router（vue路由管理插件）
- Vuex（vue数据中心化状态管理插件）
- Less（css预处理插件）
- Sass（css预处理插件）
- Element-Ui（饿了么ui插件）
- Mint-ui（移动端ui插件）
- swiper-vue(swiper的vue包)
9、Vue+Mui
为了达到更好的体验 我们可以使用 Mui 来实现更接近原生APP的体验
3、第三组
1、promise一般怎么用，功能有哪些
- Promise 是异步编程的一种解决方案。promise是一个对象，从它可以获取异步操作的消息；promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
- Promise可以解决：1.回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象。2.promise可以支持多个并发的请求，获取并发请求中的数据。3.promise可以解决异步的问题，本身不能说promise是异步的
2、什么是闭包
有权访问另一个函数作用域中局部变量的函数就是闭包。
3、用过mockjs吗
mockjs 是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 1.根据数据模板生成模拟数据 2.模拟 Ajax 请求，生成并返回模拟数据 3.基于 HTML 模板生成模拟数据
4、echarts和canvas了解过或者用过吗
Echarts是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求;canvas（canvas菜鸟教程）是HTML5新增标签，需要通过脚本进行绘图。
4、第四组
1、css3动画实现
CSS3 可通过@keyframes 动画名{}来定义动画，举个例子：
<style> div { width: 100px; height: 100px; background: red; position: relative; animation-name: divmove; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } @keyframes divmove { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } </style> <body> <div></div> </body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
效果图：
2、typescript
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。 详见typescript中文手册
3、异步请求数据的方法
- 原生Ajax
- jQuery中封装的Ajax
- fetch
- es6中的promise
- es6中的async和await方法
4、mongodb与mysql数据不同步怎么处理
使用go-mysql-transfer工具进行数据同步
5、mongodb数据丢失怎么处理
采用增加mongo数据库的auth权限进行解决
6、WebSocket
websocket是HTML5的一个新协议，它允许服务端向客户端传递信息，实现浏览器和客户端双工通信。websocket弥补了HTTP不支持长连接的特点。
7、axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
8、了解制作地图还有支付的api吗
9、前后端分离的思想
在前后端分离的模式中，后端看不到项目里的页面，后端给前端提供接口，前端通过后端提供的接口进行也米娜的展示。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。
10、什么是模块化
模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
5、第五组
1、vue线上环境如何配置跨域，常见解决跨域的方式
在本地vue项目的根目录下创建vue.config.js并配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: "", // node后台接口域名
secure: true, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //需要rewrite的
}
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
配置Nginx：
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass node后台接口域名;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、简单说一下React 16.8的hook
react16.8开始推出hooks，在兼容之前的类组件的同时，更加倾向于函数式编程。Hooks只能在函数组件(FunctionComponent)中使用，赋予无实例无生命周期的函数组件以class组件的表达力并且更合理地拆分/组织代码，解决复用问题。
3、js不知道小数长度的两个小数进行计算如何解决精度问题
var calcAdd = function (a, b) { //函数声明A+B var aroot = a + "", broot = b + ""; //字符串化 var as = aroot.split("."), bs = broot.split("."); //切割 var afc = 0, bfc = 0; //定义默认值 A因子 B因子 factor var ret; //返回值 try { //容错处理 afc = as[1].length;//确定小数点后长度位 bfc = bs[1].length;//同上 } catch (e) { }//容错处理 但是缺省值上面生命已经包含 不需要catch后续处理 // console.log(afc,bfc);//测试打印 因兼容IE8相关业务系统匀速选需要考虑 注释了部分代码 请无视 ret = (Number(aroot.replace(".", "")) * Math.pow(10, bfc) + Number(broot.replace(".", "")) * Math.pow(10, afc)) + ""; //将小数点去掉 然后将上文中获取的 小数后精度 作为10的乘方加入乘法 注意考虑数值大小问题是否超过js能处理的最大值 return Number(ret.substr(0, ret.length - afc - bfc) + "." + ret.substr(ret.length - afc - bfc, ret.length)); //将上述结果的小数点 按照上文获取的小数后精度 从后向前 增加小数点 同时将字符串数值化 } console.log(calcAdd(0.1, 0.2222)); // 0.3222
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4、vue2+和vue3的区别
- vue2.0和3.0的初始化就存在着一定区别，比如vue3.0可以在安装脚手架同时提前安装好一些项目开发必备的插件，并且3.0提供了可视化创建脚手架，可以更加方便的对插件和依赖进行管理和配置，同时两个版本的目录结构也是有些许差别的
- 使用方式差不多，但许多底层方法有区别。比如生命周期，双向绑定等
- Vue2中的双向绑定原理是利用ES5的一个API，Object.definePropert()对数据进行劫持、结合、发布订阅模式的方式来实现的。
- Vue3中的双向绑定原理是利用ES6的ProxyAPI对数据代理，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。相比Vue2中defineProperty只能监听某个属性，不能对全对象监听；Proxy还可以监听数组，不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听。
- Vue3还新增了一些内置组件和方法，比如vue3可以默认进行懒观察，使用Function-based API，setup函数，对与插件或对象的一个按需引入，Computed Value ，新加入了 TypeScript 以及 PWA 的支持等等…
5、forEach和map的区别
forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
6、setTimeout时间精准么
不精准。由于JS是单线程的, setTimeout是异步执行函数。因此会先执行同步主线程, 再执行异步任务队列
7、promise三个状态
Promise的三种状态: pending、fulfilled、rejected(未决定,履行,拒绝),同一时间只能存在一种状态,且状态一旦改变就不能再变。
8、操作数组的方法
// 1、字符串方法（生成新数组,不影响原数据） toString : 数组转字符串 join : 数组转字符串 split: 字符串转数组 // 2、添加和删除（堆栈方式，影响原数组） push : 在末尾添加数组元素(返回添加后的数组长度) unshift : 在头部添加数组元素(返回添加后的数组长度) 可添加多个 pop : 在尾部删除元素,无参数(返回删除的元素) shift : 在头部删除一个元素,无参数(返回删除的元素) // 3、排序方法 reverse : 倒序排列（影响原数组） sort : 正/倒序排序/随机排序（影响原数组） reverse : 倒序排列（不影响原数组） sort : 正/倒序排序/随机排序（不影响原数组） // 4、slice与splice slice : 截取数组[开始,结束), 左闭右开,还可以将类数组转换为数组,不影响原数组 splice : 裁减/替换或新增数组元素(start, deletCount,…items),结合三个参数用法实现不同功能,影响原数组 // 5、查找方法 indexOf : 查找数组元素,返回第一个找到的元素下标,找不到返回-1 lastIndexOf: 查找数组元素,返回最后一个找到的元素下标,找不到返回-1 includes : 查找数组是否包含某一元素,包含则返回true,不包含返回false find : 查找满足函数条件的第一个值,找不到返回undefined findIndex : 查找满足函数条件的第一个值得下标,找不到返回-1 // 6、转换成数组 Array.of : 将一数值转化为数组 Array.from : 将类数组转化为数组 // 7、创建数组 let arr = [] let arr = new Array() let arr = Array(3) // 创建长度为3的数组 let arr = Array(1,2,3) // 创建内容为[1,2,3]的数组 let arr = Array.of(1,2,3) // 创建内容为[1,2,3]的数组 let arr = Array.from(‘123’) //类数组转数组
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
9、Set 去重原理是什么
- set() 函数中会先调用对象的 hash() 方法，获取 hash 结果；
- 如果 hash 结果相同，用比较操作符 == （也就是调用函数 eq()）判断二者的值是否相等；
- 如果都相等，去重；否则，set() 认为二者不同，两个都保留到结果中。
10、axios和fetch的区别是什么
fetch是一个浏览器级别原生支持的api; axios 是一个封装好的插件
11、setTimeout回调函数中 用function 和 箭头函数分别打印的this 是什么
前者指向window，后者指向生效的对象。
12、for in 和 for of的区别
前者是es5方法，后者是es6方法。
前者遍历出来的是属性(index)，后者是属性值（value）。
13、slice,splice的区别
slice : 截取数组[开始,结束), 左闭右开,还可以将类数组转换为数组,不影响原数组
splice : 裁减/替换或新增数组元素(start, deletCount,…items),结合三个参数用法实现不同功能,影响原数组
14、了解区块链么
6、第六组
1、ES6新增了那些东西
- let、const与作用域（块级作用域）
- 解构赋值
- 原始值与引用值
- 基本类型Symbol
- Set与Map
- 迭代器和生成器
- 代理器Proxy
- promise
- module
等等。。。
2、vuex有哪些方法
- state：vuex的基本数据，用来存储变量
- geeter：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法
- mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
- action：和mutation的功能大致相同，不同之处在于 Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作
- modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理
3、vuex中异步操作为了什么
使用action来处理异步操作。
4、css3有哪些居中方法
- 给div设置一个宽度，然后添加margin:0 auto属性.
- 使用绝对定位
- 利用flex布局
- 未知容器的宽高，利用’transform’属性
div{
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
transform:translate(-50%,-50%)
background-color:pink;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
5、购物车是怎样操作的 ，用户登录怎么实现的
6、session和cookie区别
- Cookie存储在客户端中，对客户端是可见的。而Session存储在服务器上，对客户端是透明的。
- cookie不是很安全，本地可以直接读取
7、第七组
1、css的计算属性
使用calc()函数，calc() 只作用于属性值，不能在媒体查询中使用。
举个例子：
div {
width: calc("Candyman " * 3);
height: calc(20% + 3px)
}
- 1
- 2
- 3
- 4
2、Elemnet-ui的平均一行3个是怎么样实现的
使用栅格布局，24/3=8，如
<el-col :xs='24' :md="8"></el-col>
3、vue的路由是怎么写的
// 1、使用router-link标签
<router-link to="/">主页</router-link>
// 2、配置路由
{ path: "/", name: "hello", component: Hello }
- 1
- 2
- 3
- 4
4、后端给一个日期前端怎么变成中间是-的形式
使用时间格式化，将DataTime形式转变为普通字符串形式。
dateFormat(value) {
let year = value.substr(0, 4)
let month = value.substr(5, 2)
let day = value.substr(8, 2)
let hour = value.substr(11, 2)
let min = value.substr(14, 2)
let second = value.substr(17,2)
return year + "-" + month + "-" + day + " " + hour + ":" + min + ":"+second
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
5、说三种提升页面加载的方法
- CSS使用Sprites；
- JS、CSS源码压缩、图片大小控制合适；
- 网页Gzip；
- CDN托管；
- data缓存 ；
- 图片服务器；
6、JS去重方法，关于this的指向
-
this指向
全局—指向全局对象
对象函数—指向当前对象
全局函数—指向全局对象
new实例化对象—指向新创建的对象
call&apply—指向上下文传入的第一个 -
JS去重
// 1、set方式 function unique(arr) { return Array.from(new Set(arr)) } // 2、for循环+splice function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1) j-- } } } return arr } // 3、for循环+indexOf function unique(arr) { var newArr = [] for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]) } } return newArr }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
7、ajax实现过程
function ajax(url, data, method, success) { // 异步对象 var ajax = new XMLHttpRequest(); // get 跟 post 需要分别写不同的代码 if (method == 'get') { if (data) {// 如果有值 url += '?' + data; } ajax.open(method, url);// 设置 方法 以及 url ajax.send(); // send 即可 } else { ajax.open(method, url); // 需要设置请求报文 ajax.setRequestHeader(Content-type, application/x-www-form-urlencoded) // 判断 data send 发送数据 if (data) { ajax.send(data); // 如果有值 从 send 发送 } else { ajax.send();// 没有值 直接发送即可 } } // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState == 4 && ajax.status == 200) { success(ajax.responseText); } } } // 获取本地数据 ajax('bendi.txt', , get, function (res) { console.log(res); })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
8、第八组
1、webpack常用配置
https://blog.csdn.net/qq_42103673/article/details/116480615
2、vue中怎么实现代码复用，除了组件还有没有其他方式
1、在Vue中的页面使用组件封装
2、在Vue里只针对js功能（比如methods中的方法等）进行复用使用extends
3、webpack了解过吗，可以做什么？
webpack可以对项目进行打包，可以对代码、图片等进行压缩。
4、浏览器兼容有哪些，你常遇到的兼容有哪些
浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。常见的兼容性问题有：
- js中的兼容性
1、事件对象的兼容 e = ev || window.event 2、滚动事件的兼容 scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 3、阻止冒泡的兼容 if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; } 4、阻止默认行为的兼容 if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; } 5、添加事件监听器的兼容 if (target.addEventListener) { target.addEventListener("click", fun, false); } else { target.attachEvent("onclick", fun); } 6、ajax创建对象的兼容 var xhr = null； if (window.) { xhr = new ; } else { xhr = new ActiveXObject("Microsoft XMLHTTP"); } 7、鼠标按键编码的兼容 function mouse (ev) { var e = ev || window.event; if (evt) { return e.button; } else if (window.event) { switch (e.button) { case 1: return 0; case 4: return 1; case 2: return 2; } } } 8、在IE中，event对象有x，y属性，Firefox中与event.x等效的是event.pageX，而event.pageX在IE中又没有 x = event.x ? event.x : event.pageX; 9、在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性 var source = ev.target || ev.srcElement; var target = ev.relatedTarget || ev.toElement; 10、在Firefox下需要用CSS禁止选取网页内容，在IE用JS禁止 -moz-user-select: none; // Firefox obj.onselectstart = function {return false;} // IE 11、innerText在IE中能正常工作，但在FireFox中却不行 if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('element').innerText = "IE"; } else { document.getElementById('element').textContent = "Firefox"; } 12、在Firefox下，可以使用const关键字或var关键字来定义常量；在IE下，只能使用var关键字来定义常量 统一使用var 关键字来定义常量
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 移动端的兼容性
1、禁止iOS弹出各种操作窗口 -webkit-touch-callout:none 2、禁止iOS和Android用户选中文字 -webkit-user-select:none 3、iOS下取消input在输入的时候英文首字母的默认大写 <input autocapitalize="off" autocorrect="off" /> 4、Android下取消输入语音按钮 input::-webkit-input-speech-button {display: none} 5、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效 * {-webkit-tap-highlight-color:rgba(0,0,0,0);} 6、iOS下input为type=button属性disabled设置true，会出现样式文字和背景异常问题 opacity=1; 7、input为fixed定位，在iOS下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置 内容列表框也是fixed定位，这样不会出现fixed错位的问题 8、移动端字体小于12px使用四周边框或者背景色块，部分安卓文字偏上bug问题 可以使用整体放大1倍(width、height、font-size等等)，再使用transform缩放 9、在移动端图片上传图片兼容低端机的问题 input 加入属性accept="image/*" multiple 10、在Android上placeholder文字设置行高会偏上 input有placeholder情况下不要设置行高 11、overflow: scroll或auto；在iOS上滑动卡顿的问题 -webkit-overflow-scrolling: touch; 12、移动端click300ms延时响应 使用Fastclick，如： window.addEventListener( "load", function { FastClick.attach( document.body ); }, false ); 13、移动端1px边框问题 原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位 .border-1px{ position: relative; border:none; } .border-1px:after{content: '';position: absolute; bottom: 0;background: #000;width: 100%; height: 1px;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- css中的兼容性
1、不同浏览器的标签默认的内外边距不同 *{margin: 0; padding: 0;} 2、图片加a标签在IE9中会有边框 img{border: none;} 3、IE6及更低版本浮动元素，浮动边双倍边距 不使用margin ，使用 padding 4、IE6及更低版本中，部分块元素拥有默认高度 给元素设置font-size: 0; 5、a标签蓝色边框 a{outline: none;} 6、IE6不支持min-height属性 {min-height: 200px; _height: 350px;} 7、IE9以下浏览器不能使用opacity Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter 8、IE6/7不支持display:inline-block {display: inline-block; *display: inline;} 9、cursor兼容问题 统一使用{cursor: pointer;} 10、IE6/7中img标签与文字放一起时，line-height失效的问题 文字和<img> 都设置 float 11、table宽度固定，td自动换行 table设置 {table-layout: fixed} ，td设置 {word-wrap: break-word} 12、相邻元素设置margin边距时，margin将取最大值，舍弃小值 不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置：{overflow: hidden} 13、a标签css状态的顺序 按照link--visited--hover--active 的顺序编写 14、IE6/7图片下面有空隙的问题 img{display: block;} 15、ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值 ul{margin: 0;padding: 0;} 16、IE中li指定高度后，出现排版错误 设置line-height 17、ul或li浮动后，显示在div外 清除浮动；须在ul标签后加<div style="clear:both"></div> 来闭合外层div 18、ul设置float后，在IE中margin将变大 ul{display: inline;} ， li{list-style-position: outside;} 19、li中内容超过长度时，用省略号显示 li{ width: 100px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } 20、div嵌套p时，出现空白行 li{display: inline;} 21、IE6默认div高度为一个字体显示的高度 {line-height: 1px;} 或 {overflow: hidden;} 22、在Chrome中字体不能小于10px p{font-size: 12px; transform: scale(0.8);} 23、谷歌浏览器上记住密码后输入框背景色为黄色 input{ background-color: transparent !important; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: #333 !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; background-color: transparent !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; } 24、CSS3兼容前缀表示
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
5、ajax超时了怎么办？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <titile>超时与网络异常处理</titile> <style> #content { width: 400px; height: 200px; border: 1px solid rgb(4, 247, 25); border-width: 3px; margin: 20px 0 20px 0; } </style> </head> <body> <button type="button">提交</button> <div id="content"></div> <script> const btn = document.getElementsByTagName('button')[0]; const res = document.getElementById('content'); btn.onclick = function() { const xhr = new XMLHttpRequest(); xhr.timeout = 2000; xhr.ontimeout = function() { alert('请求超时，请检查网络是否可用！'); } xhr.onerror = function() { alert('你的网络开小差了，请重新连接网络试试'); } xhr.open('GET', 'http://127.0.0.1:8080/delay'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { res.innerHTML = xhr.response; } } else { return } } }; </script> </body> </html> const express = require("express"); const app = express(); // 模拟请求超时 app.all("/delay", (request, response) => { response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Headers', '*'); setTimeout(() => { response.send('接收成功：模拟请求超时'); }, 3000); }) app.listen(8080, () => { console.log('正在监听8080端口'); });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
6、你的项目觉得比较好的是哪个，讲一讲这个项目
主要介绍自己做了什么项目，前端和后端使用了什么技术，实现了什么功能的，大体模块有哪些？解决了什么问题。
7、做移动端的时候遇到了什么问题，之前是怎么和后台做交互的，用过token吗，用来干什么的，怎么设计登录的逻辑(结合token)
使用Vue做移动端，通过axios向后台交互。
用户输入自己的信息（用户名，密码，邮箱等），在提交时会判断当前当前页面的localStroage中是否存在token，如果存在登录成功，否则登录失败
8、怎么解决下拉之后被截断显示的问题，怎么提高一大堆东西要渲染的性能问题(很多张图片)
9、第九组
1、如何判断电脑端和手机端来适应不同的页面
- 允许网页宽度自动调整
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
- 1
- 2
- 3
- 4
这里表示网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%
- 不适用绝对的尺寸，如10px。使用百分比或者auto属性值
- 使用相对字体大小，如em，rem
- 使用流动布局，即每个区域都是浮动的，不是一成不变的。
- 使用媒体查询（建议）
2、vue传参有哪些
- 路由传参
- 组件传参
3、网站SEO搜索引擎该如何优化
有几个因素可以使网站搜索引擎友好，包括关键字、质量内容、标题、元数据等。网站需要这些因素才能被搜索引擎排名并因此被用户找到
4、如何看待vue
vue 是一套用于构建用户界面的渐进式框架，vue 的核心库只关注视图层，我们使用 vue 时完全可以像跟使用 js 一样，通过script标签导入即可使用，当我们的页面足够多时，可以逐步的引入 vue-router；当我们需要全局状态管理时，也可以再引入 vuex；当我们需要构建一个大型的 SPA 项目时，完全可以使用工具 vue-cli 来构建。
5、如何看待小程序
微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用各种接口，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。
小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理。
6、如何理解递归，一般应用场景在哪些地方
如果一个函数在内部调用自身本身，这个函数就是递归函数。
应用场景: 数组求和、数组扁平化、斐波拉契数列、数组对象格式化等。
10、第十组
1、电商核心点sku是前端购物车还是后端购物车
在大型的电商网站中，这些都是后端处理的。当然，前端也可以实现。
2、sku 规格与联动
各种属性的值选中后，SKU 填写表格进行变动，对属性、属性值的数量自适应，编辑时不因去掉勾选导致原有值不显示
3、每个商品有不同的规格和不同的筛选条件是怎么做的
可以将不同的筛选条件定义在一个对象中，传入后端进行判断和查询
4、rem适配原理， 根据font-size为什么可以实现这个效果
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小。
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。举个例子：
/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}
- 1
- 2
- 3
- 4
- 5
5、不同屏幕大小想要更精确的控制，有哪些方法
使用媒体查询或者响应式框架
6、怎么更精确的适配到不同屏幕 有哪些方案
使用固定的长和宽
使用百分比
使用媒体查询
7、逻辑像素和物理像素观念、关系是怎么样的
物理像素指的是设备的实际像素，这个主要由设备自身的硬件所决定，因此同一类型的设备物理像素是固定的。
逻辑像素是相对于物理像素之后提出的一个概念，也被称为设备独立像素。指的就是我们在css中设置的像素。
8、阿里的flexible使用
flexible的作用是使页面可以适配不同移动终端。
在页面html标签上添加style = "font-size: 36px;"样式，设置字体大小是屏幕宽度的十分之一。然后页面布局使用rem单位。
使用npm install lib-flexible --save进行安装。
在main.js中引入：import lib-flexable;
在html页面中添加移动端兼容代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9、高清屏和普通屏的区别是什么
同样的尺寸，分辨率不同，导致的实际效果不一样
10、图片懒加载的实现 ，原理是什么
图片懒加载是前端页面优化的一种方式。原理是优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
11、预加载和懒加载的区别
预加载图片指的是：提早加载图片，当用户须要查看时可直接从本地缓存中渲染。
懒加载图片指的是：先在页面中把全部的图片统一使用占位图进行占位，把正真的路径存在元素的“data-url”属性里，要用的时候就取出来。
12、浏览器的缓存机制
浏览器缓存通过 HTTP/HTTPS 实现，存储位置有四种：
Service Worker（运行在浏览器背后的独立线程，必须是https才可以）
Memory Cache（内存缓存）
Disk Cache（硬盘缓存）
Push Cache（推送缓存）
13、cookie怎么工作的
由服务器产生内容，浏览器收到请求后保存在本地；当浏览器再次访问时，浏览器会自动带上cookie，这样服务器就能通过cookie的内容来判断这个是“谁”了。
14、基于cookie的session的状态同步是怎么做的
session是基于cookie的。在数据库中存储session，而不是存储在内存中，可以解决重启服务器后session就消失的问题。
15、token ，session 的区别是什么
token存储与客户端，session 是基于 cookie 实现的，session存储于服务端，sessionId 会被存储到客户端的cookie 中。
16、登录过后怎么保存登录状态
将登录信息存入session中。
使用cookie。
使用本地存储或会话存储。
17、const申明出来的常量有什么特性
申明的常量不可更改，申明的对象可以修改属性。
18、解构的时候重命名怎么做
let obj = {
name:'Tom',
age:24,
}
let {name:n} = obj;
console.log(n); //Tom
- 1
- 2
- 3
- 4
- 5
- 6
19、用const定义的常量如果是对象的话，这个对象的属性属性可以改变吗？为什么
可以修改。const指针指向一个地址，地址不可变地址内容可变。
对象是引用类型的。const仅保证指针不发生变化，修改对象的属性不会改变对象的指针。
20、会封装promise吗？ 工作机制是什么
Promise 对象用于表示一个异步操作的最终完成(或失败)，及其结果值。Promise 一旦被创建，会立即执行，共有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步结果可以决定当前是哪一种状态，状态一旦被确定就再也不会更改。也就是说， Promise 对象状态的更改只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。
21、下拉加载无限滚动什么怎么实现，原理是怎样的
首先预先加载一部分内容，并显示出滚动条。
监听浏览器滚动条。
当滚动条快到浏览器底部的时候，触发请求。
加载新的页面
<script>
var bodyObj=document.documentElement||document.body;
scrollTop=bodyObj.scrollTop,
browseHeight=bodyObj.clientHeight||window.innerHeight;
window.onscroll=function(){
var currentScrollTop=bodyObj.scrollTop,
pageHeight=bodyObj.scrollHeight;
document.title=currentScrollTop+"|"+browseHeight;
if(pageHeight-(browseHeight+currentScrollTop)<100){
document.title="到底部了！";
}else{
document.title="还没有到了！";
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
22、自己封装过轮播图没有，原理是什么
23、引用数据类型(object)和基本数据的区别是什么
基本数据类型指的是简单的数据（栈），引用数据类型指的是有多个值构成的对象（堆）。所有在方法中定义的变量都是放在栈内存中，随着方法的执行结束，这个方法的内存栈也自然销毁。javascript的引用数据类型是保存在堆内存中的对象。与其他语言的不同是，不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。
24、什么是赋值什么是深拷贝什么是浅拷贝
赋值：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，都会改变存储空间的内容。
深拷贝：从堆内存中开辟出来一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。
浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型共享一块内存，会相互影响。
25、深拷贝和浅拷贝的区别和实现原理
let person = { name: 'TOM', age: 12, sex: 'boy' } // 赋值 let person2 = person; person2.name = '小明'; console.log(person2, person) // { name: '小明', age: 12, sex: 'boy' } { name: '小明', age: 12, sex: 'boy' } // 浅拷贝 function shallowCopy(object) { var target = {} for (const key in object) { if (object.hasOwnProperty(key)) { target[key] = object[key] } } return target } let person3 = shallowCopy(person); person3.name = '小红'; console.log(person3, person); // { name: '小红', age: 12, sex: 'boy' } { name: '小明', age: 12, sex: 'boy' } // 深拷贝 function deepClone(object) { var cloneObj = new object.constructor() if (object === null) return object if (object instanceof Date) return new Date(object) if (object instanceof RegExp) return new RegExp(object) if (typeof object !== 'object') return object for (const key in object) { if (object.hasOwnProperty(key)) { cloneObj[key] = deepClone(object[key]) } } return cloneObj } let person4 = deepClone(person); person4.name='Marry'; person4.sex = 'girl'; console.log(person4,person); // { name: 'Marry', age: 12, sex: 'girl' } { name: '小明', age: 12, sex: 'boy' }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
