本文共 2120 字，大约阅读时间需要 7 分钟。

1.typeof 于 instanceof 区别

• typeof 对于基本类型，除了 null 都可以显示正确的类型
• typeof 对于对象，除了函数都会显示 object
• 对于 null 来说，虽然它是基本类型，但是会显示 object ，这是⼀个存在 很久了的 Bug
• instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的 原型链中是不是能找到类型的 prototype

// 我们也可以试着实现⼀下 instanceoffunction instanceof(left, right) {
    	// 获得类型的原型 	let prototype = right.prototype 	// 获得对象的原型 	left = left.__proto__ // 判断对象的类型是否等于类型的原型 	while (true) {
    		if (left === null) 			return false 		if (prototype === left) 			return true 	left = left.__proto__ 	} }

2.判断⻚⾯是否加载完成

• Load 事件触发代表⻚⾯中的 DOM ， CSS ， JS ，图⽚已经全部加载完毕。
• DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待
  CSS ， JS ，图⽚加载

3.如何解决跨域

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端⼝ 有⼀个不同就是跨域， Ajax 请求会失败。

我们可以通过以下⼏种常⽤⽅法解决跨域的问题:

JSONP

JSONP 的原理很简单，就是利⽤ <script> 标签没有跨域限制的漏洞。通过<script> 标签指向⼀个需要访问的地址并提供⼀个回调函数来接收数据当需 要通讯时

JSONP 使⽤简单且兼容性不错，但是只限于 get 请求

• 在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要⾃⼰封装⼀ 个 JSONP，以下是简单实现

function jsonp(url, jsonpCallback, success) {
    	let script = document.createElement("script"); 	script.src = url; 	script.async = true; 	script.type = "text/javascript"; 	window[jsonpCallback] = function(data) {
    		success && success(data); 	}; 	document.body.appendChild(script);  }jsonp( 	"http://xxx", 	"callback", 	function(value) {
    	console.log(value); 	}  );

CORS:

• ORS 需要浏览器和后端同时⽀持。 IE 8 和 9 需要通过 XDomainRequest 来实现。
• 浏览器会⾃动进⾏ CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了
  CORS ，就实现了跨域。
• 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS 。 该属性表示哪些域名 可以访问资源，如果设置通配符则表示所有⽹站都可以访问资源。

4.事件代理

如果⼀个节点中的⼦节点是动态⽣成的，那么⼦节点需要注册事件的话应该注 册在⽗节点上

   
  
    
1
 
    
2
  
    
3
  
    
4
  
    
5
   
 

• 事件代理的⽅式相对于直接给⽬标注册事件来说，有以下优点
  1. 节省内存
  2. 不需要给⼦节点注销事件

5.优化webpack打包速度

• 减少⽂件搜索范围
  1. ⽐如通过别名
  2. loader 的 test ， include & exclude
• Webpack4 默认压缩并⾏
• Happypack 并发调⽤
• babel 也可以缓存编译

6.Babel 原理

• 本质就是编译器，当代码转为字符串⽣成 AST ，对 AST 进⾏转变最后再⽣成新的代码
• 分为三步：词法分析⽣成 Token ，语法分析⽣成 AST ，遍历 AST ，根据插件变换相应 的节点，最后把 AST 转换为代码

7.如何实现⼀个插件

• 调⽤插件 apply 函数传⼊ compiler 对象
• 通过 compiler 对象监听事件

⽐如你想实现⼀个编译结束退出命令的插件

apply (compiler) {
    	const afterEmit = (compilation, cb) => {
    		cb() 		setTimeout(function () {
    			process.exit(0) 		}, 1000) } compiler.plugin('after-emit', afterEmit)  } }module.exports = BuildEndPlugin

转载地址：http://wiozi.baihongyu.com/