2018年前端面试总结

        这是我前段时间面试是遇到的一些问题，现在有时间了总结一下，当然这里面有自己的一些认识，也有一些从别人那里copy过来的，希望能给大家的面试带来帮助。

 

1.Vue的双向数据绑定原理是什么？

简而言之：

        vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

        第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

        第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

        第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器(dep)里面添加自己2、自身必须有一个update()方法3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

       第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

 

 

 

 

2.mvc和mvvm的差别

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
 
MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。
 
有人做过测试：使用Angular（MVVM）代替Backbone（MVC）来开发，代码可以减少一半。
 
此外，MVVM另一个重要特性，双向绑定。它更方便你同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们。

 

 

3.url相同端口不同时的cookie是否公用

答：是。对于跨域的问题，只要协议（http和https），域名（url）和端口（80，8080等）三者任意一条不一样，就会存在跨域问题。于是相似的，我们很容易认为url相同而端口不同的cookie是不一样的，然而事实上，cookie是不区分端口的，只要url相同cookie就是共享的。

 

4.src和href的区别

答：src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

 

        src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

        href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

5.移动端阿里的flexible.js布局问题

答：目前Flexible会将视觉稿分成*100份*（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。假装现在有一个宽为 750px  的移动端设计稿，针对我们这份视觉稿可以计算出： 换算

1a   = 7.5px

1rem = 75px 

 

6.JSONP实现跨域的原理

答：ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。（这个问题的关键是实现回调）

 

7.怎么理解MVVM模式的这些框架？

答：1、M就是Model模型层，存的一个数据对象。
       2、V就是View视图层，所有的html节点在这一层。
       3、VM就是ViewModel，它通过data属性连接Model模型层，通过el属性连接View视图层。

 

 

8.简单描述Vue每个周期具体适合哪些场景？

• beforecreate : 可以在这加个loading事件，在加载实例时触发 
• created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 
• mounted : 挂载元素，获取到DOM节点 
• updated : 如果对数据统一处理，在这里写上相应函数 
• beforeDestroy : 可以做一个确认停止事件的确认框 
• nextTick : 更新数据后立即操作dom

 

9.http与https的差别

HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。

简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS和HTTP的区别主要如下：
 

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

 

 

10.前端性能优化

1、减少http请求，合理设置 HTTP缓存

2、用CSS spirit进行图片合并，减少请求数

3、对代码进行压缩和打包，减少传输过程中的体积

4、资源加载可以合理的设置CDN进行加速

5、使用LazyLoad，进行图片的懒加载

注：详情请戳这里《web前端性能优化总结》

 

 

11.jQuery Ajax和Aioxs以及Fetch的区别

jQuery Ajax：

• 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
• 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
• JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

Aioxs：

• 从 node.js 创建 http 请求
• 支持 Promise API
• 客户端支持防止CSRF
• 提供了一些并发请求的接口（重要，方便了很多的操作）

Fetch:

• 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
• 更加底层，提供的API丰富（request, response）
• 脱离了XHR，是ES规范里新的实现方式
• fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装

注：详情请戳这里《Jquery ajax, Axios, Fetch区别之我见》

 

另外：还有一些问题我没有找到清晰而简明的答案，请大家能够自行去求解吧。

• Vue的底层原理
• Vue的history和hash模式
• 前端如何进行接口的安全限制（就是如何避免恶意的访问）
• Vue-Router的动态路由和静态路由（我网上查了，只是查到了动态路由和嵌套路由并没有查到静态路由的相关内容，应该是面试官不专业，问错了把）
• 最后一点，也是我认为比较重要的一点，原生的App中嵌套的H5页面如何与App之间进行交互，包括App如何向H5页面传参数，以及H5页面如何将信息反馈给App。由于之前没有做过这一块，所以完全不知道。