前端面试每日3+2(第32天)

当你发现自己的才华撑不起你的野心时，就请安静下来学习吧！

鲁迅说过：答案仅供参考...

1、(第 26 题)介绍模块化发展历程

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type="module"> 这几个角度考虑。

---

🌿【解析】🌿

模块化的作用：抽离公共代码，隔离作用域，避免变量冲突

• IIFE：使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免代码冲突

 ;(function(){
   // 
   return {
     data:[]
   }
 })()

立即调用的函数表达式-汤姆大叔 (opens new window)

• AMD:使用requireJS来编写模块化，特点：依赖必须提前声明好。

  define('./index.js',function(){
    // code 就是index.js返回的内容
  })
  

• CMD：使用seaJS来编写的模块化，特点：支持动态引入依赖文件

  define(function(){
    var indexCode = require('./index.js')
  })
  

• CommonJS: node中自带的模块化。

    // 导出 index.js
    module.exports  = 'hellow'
    // 导入
    var a = require('./index.js')
  

• UMD:兼容AMD，CommonJS模块化。

• webpack(require,ensure): webpack2.x版本中的代码分割

• ES Modules：ES6引入的模块化，支持import来引入另一个js

  import a from './a.js'
  

前端中的模块化 (opens new window)
参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)

2、(第 27 题)全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？。

---

🌿【解析】🌿
在全局作用域中，用 let 和 const 声明的全局变量并没有在全局对象中，只是一个块级作用域（Script）中。

参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)

3、(第 28 题)cookie 和 token 都存放在 header 中，为什么不会劫持 token？

---

🌿【解析】🌿

• cookie：登陆后后端生成一个sessionid放在cookie中返回给客户端，并且服务端一直记录着这个sessionid，客户端以后每次请求都会带上这个sessionid，服务端通过这个sessionid来验证身份之类的操作。所以别人拿到了cookie拿到了sessionid后，就可以完全替代你。

• token：登陆后后端不返回一个token给客户端，客户端将这个token存储起来，然后每次客户端请求都需要开发者手动将token放在header中带过去，服务端每次只需要对这个token进行验证就能使用token中的信息来进行下一步操作了。

• xss：用户通过各种方式将恶意代码注入到其他用户的页面中。就可以通过脚本获取信息，发起请求，之类的操作。

• csrf：跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。csrf并不能够拿到用户的任何信息，它只是欺骗用户浏览器，让其以用户的名义进行操作。

csrf例子：

假如一家银行用以运行转账操作的URL地址如下： http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName 那么，一个恶意攻击者可以在另一个网站上放置如下代码： <img src="<http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman>"> 如果有账户名为Alice的用户访问了恶意站点，而她之前刚访问过银行不久，登录信息尚未过期，那么她就会损失1000资金。

上面的两种攻击方式，如果被xss攻击了，不管是token还是cookie，都能被拿到，所以对于xss攻击来说，cookie和token没有什么区别。但是对于csrf来说就有区别了。

以上面的csrf攻击为例：

• cookie：用户点击了链接，cookie未失效，导致发起请求后后端以为是用户正常操作，于是进行扣款操作。
• token：用户点击链接，由于浏览器不会自动带上token，所以即使发了请求，后端的token验证不会通过，所以不会进行扣款操作。

参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)

4 (第 29 题)聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

---

🌿【解析】🌿
vue通过Object.defineProperty 劫持传进来的数据， 然后在数据getter的时候订阅重新编译模板的消息，然后通过js监听元素的事件，这里input事件也好，keyup事件也好，总是监听输入框值变化，将新的值重新赋值给被劫持的data,这样就会触发setter函数，再setter函数中就会去发布重新编译模板的消息。

参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)

5 (第 30 题)两个数组合并成一个数组

请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

---

🌿【解析】🌿

let a1 =  ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2']
let a2 = ['A', 'B', 'C', 'D'].map((item) => {
  return item + 3
})

let a3 = [...a1, ...a2].sort().map((item) => {
  if(item.includes('3')){
    return item.split('')[0]
  }
  return item
})

参考答案 (opens new window) --- 感谢【Daily-Interview-Question】 (opens new window)