前端面试总结

yushulingfeng
251 阅读6分钟

1.Vue的双向数据绑定原理

Vue内部通过 Object.denfineProperty的方法进行数据拦截，把data对象里的每一个数据的读写转化成getter/setter的方式，当数据变化的时候，视图也随之变化。

2.Vue与React的区别

  • 相同点：
    1. 都是组件化开发，模式都是虚拟DOM
    2. 都支持props进行父子组件之间的通信
    3. 都是数据驱动视图的方式，不直接操作真实的DOM
    4. 都支持服务器渲染
  • 不同点：
    1. 数据绑定：vue是双向数据绑定的方式 ； React是单向数据绑定的方式
    2. 组件写法：vue是基于webpack+vue-loader的单文件格式； React则是JSX的写法，就是把CSS,HTML,JS全部写进javascript里面
    3. state对象的不同：vue中state对象不是必须的，数据是由data属性在vue对象中处理 ； React中state是不可变的，需要用setstate的方法去更新状态
    4. 模式的区别：React严格来说是针对MVC中的view层，Vue则是MVVM的模式

3.MVC与MVVM的区别

  • MVC：主要是后端的分层开发四思想，把一个完整的项目分成三个部分 M即model，是数据层，主要负责数据库的操作 V即view，是视图层，所有的前端页面都称之为view层 C即controller，是业务逻辑层，主要负责处理对应的业务逻辑，是(核心)
  • MVVM：主要是前端页面的分层开发思想，主要关注于视图层的分离 M即model，是页面中用到的数据 V即view，是页面的HTML结构 VN即viewmodel，是相当于一个中间的的调度者，提供了双向数据绑定的原理

4. jsonp，服务器代理，跨域(一起总结)

因为浏览器的同源策略，限制了网页之间的资源访问权限，浏览器为了安全起见，弄了个这个东西，就是 协议、域名、子域名、端口、也有可能系统平台不同，也会引起跨域问题。

解决跨域问题，就是要绕过浏览器的同源策略，去请求访问其他网页的资源信息。

JSONP跨域

用一个script标签，去借助src去引入外部的一个资源，动态生成这个script标签，页面加载的时候触发script标签上的回调函数，通过这个回调函数拿到数据。

要是返回的是json数据格式，就按json解析，要是字符串，就先用JSON.parse()转化然后再拿出来。

其实有很多方法解决跨域问题，就比如你前端比较着急，但是后端有现在赶不及，最暴力的就是服务器代理,可以用Node中的express搭建一个服务器，做一个中转，然后我这边请求你的接口，做一个中专转发完以后我这个服务器拿到你的数据。

CORS跨域

如果想要绕过浏览器“同源策略”，实现使用AJAX技术跨域获取资源，需要服务端和客户端的协同合作。而对于CORS标准而言，实现AJAX跨域获取资源，重点还在于服务器端返回的响应是否清楚的告知了浏览器此次跨域AJAX请求的合法性。

请求方法只属于HEAD，GET，POST请求的其中一种； HTTP的头信息只限于以下字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type（application/x-www-form-urlencoded、multipart/form-data、text/plain）

具体可以参考→

5.作用域有哪些

  1. ES5中的作用域：
    • 全局变量:在函数外部的变量，在代码任何地方都能访问到，就是全局作用域么 什么window对象了，未定义直接赋值。
    • 局部变量:生命在函数内部的变量么，就是局部作用域也叫函数作用域。
  2. ES6提供了新的叫块级作用域，通过let和const来体现了

6.let和var和const的区别

  • Var：可以声明提前，可以被覆盖
  • Let：不可以生命提前，而且不会被覆盖，说白了就是声明过在声明就会报错
  • Const：这个就相当于什么呢，这个一旦被赋值了就无法再更改

7.for循环里用let和var有什么区别

For每次循环都是不同的块级作用域啊，let声明变量是块级作用域的，所以不存在重复声明的问题。最大的就是索引问题吧，用var还得给个index，用let就不用

8.v-for为什么写key

因为vue组件是高度复用增加key可以标记唯一性，为了更好区别各个组件，作用就是为了搞笑的更新虚拟DOM呗

9.promise怎么用

主要用于异步中，主要是将异步操作队列话，（讲故事···（匹萨案例）），在promise没出来的时候，我们通常都是嵌套的回调函数来解决问题，简单点还好，但是如果复杂呢，就形成了回调地狱的问题，然而他的链式调用就完美的解决了这个问题。

10.页面的性能优化

常见的也就是资源压缩合并啊，减少HTTP请求；然后异步加载吧；利用浏览器的缓存啊；NDS的预加载啊；减少dom的操作啊

11.介绍一下缓存

浏览器缓存包含很多啊，什么http缓存了，cookie，localastorage，sessionstorage等，想这些都是存在硬盘上面的，硬盘读写肯定有限制，但是存在变量里也是可以的，就是存内存里，就是内存和硬盘里空间换时间的问题，现在主流框架vue，react，所到底jsx其实也是这么做的。 ”茹埃蒂斯”（后端），后端区别于数据库的东西，数据库放硬盘，但是他放内存，

  • 优点：速度快是优势，可以做有效期，比如优惠卷有时效性，但是实际上在数据库是做不到的；
  • 缺点:不可以存数组对象，只能转换成字符串，断电可能就没了，但是现在可能断电也可以的，可能存在硬盘上

12.防抖和节流

  • 防抖：就是比如有人无聊点来点去很频繁的操作，这个时候防抖就有用了，就是把频繁的操作合并成一次去执行，在指定时间内就执行一次，如果时间到了才能执行下一次，只执行最后一次
  • 节流：指定时间间隔只会执行一次。只执行第一次 两者很相似，但是说明白点就是，防抖是需要等多久才能触发一次；节流是多久时间只能触发一次
avatar
文章
阅读
粉丝