秋招必备的几道经典前端面试题

1.vue双向绑定原理

采用数据劫持＋发布订阅模式

通过递归遍历整个data，用Object.defineProperty()来劫持各个属性的setter和getter方法，给每个属性创建一个订阅中心，在get方法中添加订阅者到订阅中心，在set方法中通知订阅中心，继而通知每个订阅者。

实现MVVM步骤：

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。

2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

4、mvvm入口函数，整合以上三者。

2.对axios了解多少？

• ①Axios是一个基于promise的HTTP库，同时支持浏览器和node环境，支持对请求和响应的拦截。

• ②常用的get，post，put，delete等方法。post请求方法，参数key为data，其他的请求参数key为params。

• ③浏览器核心函数，浏览器（XMLHttpRequest），node环境（http[s].request）

• ④源码解读：

  核心词汇： a.拦截器 请求拦截器（interceptors.request）：用于对发起的请求进行拦截，可修改一些配置文件。

  响应拦截器（interceptors.response）:用于对响应结果的处理，可有效阻止crsf攻击。 b.数据转换器 请求转换器（transformRequest）：在请求前对数据进行转换。 响应转换器（transformResponse）：对响应后的响应体进行转换。 c.config配置 用于对默认配置项和自定义配置项的合并处理，比如说： 跨域请求携带cookie：使用withCredentials = true。 设置请求超时时间：timeout = 3000 d.http请求适配器 主要用于处理是浏览器环境还是node环境。

3.fetch了解多少？

Fetch API 提供了一个获取资源的接口（包括跨域请求），提供了更强大和灵活的功能集。

Fetch API 主要有两个特点：

①接口合理化，AJAX 是将所有不同性质的接口都放在 XHR 对象上，而Fetch是将它们分散在几个不同的对象上（Headers，Body，Request，Response），设计更合理；

②Fetch操作返回 Promise 对象，避免了嵌套的回调函数。

③即使响应是HTTP 404或500，从 fetch() 返回的Promise也不会拒绝HTTP错误状态。相反，它将正常解析（ok状态设置为false），并且它只会在网络故障时拒绝，或者如果任何东西阻止了请求的完成。

④默认情况下， 如果网站使用cookie来维护用户身份时（发送cookie，必须设置credentials init选项），否则fetch不会发送或接收来自服务器的任何cookie，从而导致未经身份验证的请求。

4.AJAX源码

function ajaxRequest(method, url, data, callback, flag) {
 var xhr = null;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else {
     //IE
  xhr = new ActiveXObject('Microsoft.XMLHttp');
 }
}
if (method == 'GET') {
 xhr.open(method, url + '?' + data, flag);
 xhr.send();
} else if (method == 'POST') {
 xhr.open(method, url, flag);
 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
 xhr.sed(data);
}
xhr.onreadystatechange = function () {
   /* 0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
   */

 if (xhr.readyState == 4) {
  if (xhr.status == 200) {
   callback(xhr.responseText);
  }
 }
}

5.项目架构逻辑和流程

基础架构设计：

①代码版本管理，Git or SVN?
②技术选型：
    基础框架选择（vue，react，团队成员能力？）
    HTTP请求库（axios，fetch）
    CSS预处理器（less，scss）
    UI库选择（iview，element ui，ant design，vant等等）
    静态资源（图标字体，图片格式？）
    安全处理（csrf，xss，https？）
    数据mock（eolinker，还是自己搭建yapi？）
③自动编译发布jenkins
④灰度发布（金丝雀发布）
⑤监控埋点：百度统计，友盟
⑥报警与错误处理：sentry，BetterJS，Logan等。
⑦开发工具配置
  eslint配置，vscode快捷插件等。
⑧开发文档撰写

业务架构设计：

①业务如何分层？模块如何划分？
②路由如何设计？父子嵌套？
③数据如何管理？
④组件如何划分？划分原则是什么？
⑤浏览器兼容性如何处理？
⑥代码规范？如何命名？
⑦性能优化如何做？

6.vue父子组件声明周期执行顺序

父子组件生命周期函数：

加载渲染过程：

父beforeCreate->父created->父beforeMount-> 子beforeCreate->子created->子beforeMount->子mounted-> 父mounted

子组件更新过程：

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程：

父beforeUpdate->父updated

销毁过程

父beforeDestory->子beforeDestory->子destoryed->父destoryed

7.HTTPonly

• HttpOnly是微软对cookie做的扩展，该值指定cookie是否可通过客户端脚本访问。
• 如果在Cookie中没有设置HttpOnly属性为true，可能导致Cookie被窃取。
• 通过设置HTTPonly可有效阻止xss攻击。

8.vue router原理，HTML5History原理，hash和history区别

谈vue router之前先了解下URL及HTML5History：

URL（Universal Resource Locator）即统一资源定位符，又称网页地址，用于定位浏览器中所需显示的网页资源。在H5之前切换URL都会导致浏览器强制刷新，耗费时间和资源。而HTML5History允许在不刷新浏览器的情况下更新页面局部布局。

①了解下HTML5History。

HTML5History接口允许操作浏览器的曾经在标签页或者框架里的历史记录，通俗说就是，可以通过window可以对history对象进行属性的获取和方法的操作。

②vue router中hash模式和history区别。

HashHistory优缺点：

• a.通过URL的hash来模拟一个完整的URL，URL改变页面不会重载。
• b.hash路由后面有“#”号，可以理解为URL锚点，#后面的url发生改变不会发起http请求。
• c.可以通过改变锚点值来渲染页面中的不同DOM
• d.可以通过onhashchange来监听hash值的改变

HTML5History优缺点：

• a.利用HTML5History的pushState和replaceState特性来响应当前页面的更新（IE9不支持，VueRouter默认会转为hash模式，如果强制使用history，则配置fallback:false）。
• b.pushState和replaceState参数中的URL可以为任一同源URL（可以是不同的HTML），而hash只能是同一文档。
• c.pushState和replaceState参数中state可以为任意js对象，而hash只能为短字符串。
• d.需要后端支持，处理404错误。
• c.通过onpopstate来监听路由的改变。

本文由哈喽比特于3年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/XA0m0vOIGcOdKIXaGuXJng