近期前端中的一些常见的面试题

本文转载于:猿2048网站近期前端中的一些常见的面试题

 

　　近段时间看了很多的前端面试题，不少大牛也对此作了整理。这篇文就算是借花献佛啦。整体来讲基本上每家问的问题也差很少，可能不一样业务的公司问的问题的侧重点也不太同样，有的侧重于移动端适配CSS布局浏览器兼容IE hack，而有的侧重于JS逻辑面向对象设计模式考察等。可能将实际工做中会遇到的问题的场景，以及各类技术的坑做为面试题，这样一则能够看出他的经验多少，二则也能够防止他作笔试题的时候手机搜索结果。

【手写事件模型及事件代理/委托】

　　这个算是被问到的最屡次数的问题了，首先要求描述下js里面的“事件的三个阶段”，若是没有据说过三个阶段，那基本上就没戏了。分别是捕获，目标，冒泡阶段，低版本IE不支持捕获阶段。而后可能问到IE和W3C不一样绑定事件解绑事件的方法有什么区别，参数是什么，以及事件对象e有什么区别等等。

　　若是上述都没问题，接下来可能会问“事件的代理/委托”的原理以及优缺点，这是靠事件的冒泡机制来实现的，优势是

一、能够大量节省内存占用，减小事件注册，好比在table上代理全部td的click事件就很是棒
二、能够实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤其合适

　　事件代理的应用经常使用应该仅限于上述需求下，若是把全部事件都用代理就可能会出现事件误判，即本不该用触发事件的都被绑上了事件，事实上若是有人把页面里的全部事件都绑定到document用委托的，这是极不明智的作法。“所谓酒劲虽好，可不要贪杯哟~”

　　以后对方可能要求你手写原生js实现事件代理，并要求兼容浏览器，其实就是考核对事件对象e的了解程度，以及在IE下对应的属性名。其实此时若是你说就是用target，currentTarget，以及IE下的srcElement和this，基本上就能够略过了。

　　若是上述都OK的话，那么极有可能要求你实现事件模型，即写一个类或是一个模块，有两个函数，一个bind一个trigger，分别实现绑定事件和触发事件，核心需求就是能够对某一个事件名称绑定多个事件响应函数，而后触发这个事件名称时，依次按绑定顺序触发相应的响应函数。

　　这个需求若是对于作过C#的人来讲就再熟悉不过了，他根本就是C#中的“委托"（delegate）。而委托与事件几乎是一家子。回到前面说的题目，大体实现思路就是建立一个类或者匿名函数，在bind和trigger函数外层做用于建立一个字典对象，用于存储注册的事件及响应函数列表，bind时，若是字典没有则建立一个，key是事件名称，value是数组，里面放着当前注册的响应函数，若是字段中有，那么就直接push到数组便可。trigger时调出来依次触发事件响应函数便可。

　　不过还有不少细节，好比说触发响应函数时的上下文应该是什么，触发响应函数的参数列表应该是什么，若是要求把调用trigger的参数列表都传到响应函数中还要考虑到arguments对象转化为纯数组才行等等。还有一些面试官会追问道事件如何派发也就是事件广播（dispatchEvent）等等，这里再也不展开。有关事件的考核点大概也就这么多了。

【前端性能优化】

　　这个简直老生常谈，不论是园子里仍是园子外，关于前端优化的东西太多太多了，不一样角度不一样方向也有不少，网络性能优化，加快访问速度，浏览器并行加载数量，怎样实现原生JS异步载入，CDN加载的原理，如何将不一样静态资源发布到多个域名服务器上，发布后这些静态字段的url路径该怎么批量改写，用什么工具进行项目打包，css打包后的相对路径怎么转换为绝对路径，用什么工具进行项目模块依赖管理，怎么进行cookie优化等等。

　　这个提及来就不少了，尽量的按照本身作过的优化来说，不然面试官随便挑一项深究均可能会卡壳，与其这样还不如不讲。

【闭包原理及应用】

　　这个问题的经典性，几乎全部面试官都会问到这个问题，什么状况下会发生闭包，为何须要闭包，什么场景下须要，闭包闭了谁，怎么释放被闭包的变量内存，闭包的优势是什么，缺点是什么等。

　　关于闭包，有的是上述提问，有的是直接作闭包面试题。关于概念网上一搜一大把，关于闭包面试题。

【手写Function.bind函数】

　　首先会要求解释下这个函数的做用，以及在什么场景下须要用到它，最后手写一个Function.bind函数。

只要掌握核心几点就没有问题：

一、Function.bind 返回的也是一个函数，因此注定发生了闭包
二、在返回的这个函数中去调用一个其余的函数，这其实本质上就是函数钩子HOOK

关于在JS里的函数钩子，我认为只须要维护如下三点便可：

一、保持函数的this指向
二、保持函数的全部参数都传递到目标函数
三、保持函数的返回值

有了以上这几点，这个函数就很是好写了，下面是MSDN上的标准Polyfill：

（手写数组快速排序/去重）无论排序也好，仍是去重也罢，都是计算机基础知识；对于准备面试的童鞋来说，准备下经常使用的算法仍是比较重要的，大部分公司仍是比较看中此类基础知识的。

【JS的定义提高】

利用js的特性定义提高这个知识点衍生出来的面试题至关之多，诸如如下等等

（function(a) {
    conole.log(a);
    var a = 10;        
    function a() {};    
}(100)）

【跨域】

　　关于跨域大概能够分iframe的跨域，和纯粹的跨全域请求。

　　其实正统的跨全域的解决方法大体也就 JSONP，Access Control 和服务器代理这三种

【JSONP原理】

　　只要聊到跨域，就必须聊到JSONP，那么就须要讲一下JSONP的实现原理，以及你在项目中哪一个需求使用了JSONP，这里简单讲就是HTML里面全部带src属性的标签均可以跨域，如iframe，img，script等。

　　因此能够把须要跨域的请求改为用script脚本加载便可，服务器返回执行字符串，可是这个字符串实在window全局做用域下执行的，你须要把它返回到你的代码的做用域内，这里就须要临时建立一个全局的回调函数，并把它传到后台，最后再整合实际要请求的数组，返回给前端，让浏览器直接调用，用回调的形式回到你的源代码流程中。

【将url的查询参数解析成字典对象】

　　这个题目不约而同的出如今了多家公司的面试题中，固然也是由于太过典型，解决方案无非就是拆字符串或者用正则匹配来解决，我的强烈建议用正则来匹配，由于url容许用户随意输入，若是用拆字符的方式，有任何一处没有考虑到容错，就会致使整个js都报错。而正则就没有这个问题，它只配对出正确的配对，非法的所有过滤掉，简单方便。

　(函数节流) 对于常见的场景，如网页滚动时，常常会有滚动到哪时作什么样的动画效果，遂要注册onscroll事件，如何减小触发次数，到达优化性能，同时又知足效果要求不卡帧，一个是优化事件内代码，减小代码量，二就是作函数节流。

　　大部分节流都采用时间作节流，即时间间隔小于多少的再也不调用，但同时保证一个最小调用间隔。（不然拖拽类的节流都将无效果），也能够用调用次数作节流，但要考虑最后一次调用须要要执行。

　【设计模式】

　　这方面被问到的比较多的有观察者模式，职责链模式，工厂模式。主要是应用于js开发组件中会常常涉及，纯粹的页面业务逻辑可能涉及很少。好比如何去设计一个前端UI组件，应该共开出哪些方法，应该提供哪些接口，应该提供哪些事件。哪部分逻辑流程应该开放出去让用户自行编写，如何实现组件与组件之间的通讯，如何实现高内聚低耦合，如何实现组件的高复用等等。

【CSS垂直居中方法】

　　几个出现频率很高的CSS问题就是经典的垂直居中问题。这个问题又能够细分为，被垂直居中的元素是否认高，是文字仍是块，文字是单行仍是多行文字等等。这能够百度下，有N种解决方案，主要仍是看应用场景的限制。

【自适应布局】

　　这个问题能够划分为，左固定右自适应宽度，上固定下固定中间自适应高度等等布局要求。关于左右自适应的，不低于10种解决方案，还要看dom结构要求是并列仍是嵌套，是否容许有父级元素，是否容许使用CSS3，是否有背景色，是否要两列等高等等。而关于自适应高度的解决方案就略少一些，大体也就是靠css3的calc属性，内padding，绝对定位后拉伸，动态js计算等等解决方案，一样也是要看应用场景能用哪一个。

【移动端自适应】

　　好比说2倍屏，3倍屏的自适应等

学习前端的同窗们

欢迎加入前端学习交流QQ群：461593224