记一次面试中遇到的问题

1.style scoped能够隔离样式的实现原理

由于之前没有做过功课，我的回答是在每个scoped外面包一个div并绑定一个id，但是这样会添加dom节点。

这个其实在官方文档单文件组件样式特性
里有说明，其实是vue通过postCSS对scoped中的内容进行了一些修改，如

.example {
 	color: red;
}

转换为

.example[data-v-f3f3eg9] {
  color: red;
}

这里用到了css的属性选择器，到这里应该就有思路了；
只要再给template中的根元素添加一个动态属性，在这里就是data-v-f3f3eg9就可以精准地匹配到这个根元素并给他绑定相应的样式了。

 <div class="example" data-v-f3f3eg9>hi</div>

2.上传文件太大怎么进行优化？

分片上传，多个切片同时上传，有一个切片上传失败时只需要重新上传这个切片即可。前后端之间沟通的信息可能包括切片数，切片大小，每个切片的信息等。全部上传成功后，后端会将这些切片进行拼接，返回成功信息，完成大文件上传过程。

3.什么是CDN，使用CDN有哪些优势

CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容，比如说，是北京的用户，我们让他访问北京的节点，深圳的用户，我们让他访问深圳的节点。通过就近访问，加速用户对网站的访问。解决Internet网络拥堵状况，提高用户访问网络的响应速度。
与传统访问方式不同，CDN网络则是在用户和服务器之间增加缓存层，将用户的访问请求引导到最优的缓存节点而不是服务器源站点，从而加速访问速度。
CDN的工作原理：通过权威DNS服务器来实现最优节点的选择，通过缓存来减少源站的压力。

摘自CDN是什么？使用CDN有什么优势？

4.用class实现一个简单的bus（全局事件总线）
这道题我对类的结构没有一个清晰的认识，构造器和方法都没有写好，也没有规划好存储callback的数据结构，导致这道题严重失分。

class Bus{
	constructor(){
		this.callbacks = {}
	}
	$on(name, fn){
		this.callbacks[name] = this.callbacks[name] || [];
		this.callbacks[name].push(fn);
	}
	$emit(name, ...args){
		if(this.callbacks[name]){
 			this.callbacks[name].forEach((item)=>{
				item.call(this,...args);
			})
		}
	}
}

总结：

1.不但要知其然还要知其所以然，style scoped的原理没有做到深入研究。
2.要多读文档，隔段时间就要浏览一遍，或许会有更新和意想不到的收获。
3.对于es6的一些不常用的语法，平时要多加练习，不应该出现语法问题。