这是我前段时间面试是遇到的一些问题,现在有时间了总结一下,当然这里面有自己的一些认识,也有一些从别人那里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前端性能优化总结》 <https://blog.csdn.net/mahoking/article/details/51472697>
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区别之我见》
<https://segmentfault.com/a/1190000012836882>
另外:还有一些问题我没有找到清晰而简明的答案,请大家能够自行去求解吧。
* Vue的底层原理
* Vue的history和hash模式
* 前端如何进行接口的安全限制(就是如何避免恶意的访问)
* Vue-Router的动态路由和静态路由(我网上查了,只是查到了动态路由和嵌套路由并没有查到静态路由的相关内容,应该是面试官不专业,问错了把)
* 最后一点,也是我认为比较重要的一点,原生的App中嵌套的H5页面如何与App之间进行交互,包括App如何向H5页面传参数,以及
H5页面如何将信息反馈给App。由于之前没有做过这一块,所以完全不知道。
面试了两周下来感觉现在大部分公司都是更偏向于移动端,也就是H5这一块,人家对于PC端的项目兴趣都不太大,所以简历中可以适当的写一些H5这一块的项目经验,并且多重视H5这一块的面试题。
热门工具 换一换