面试中一些遗留问题的详细解答

学习　思考

一、Fetch

what?

Fetch也是实现异步请求的一种解决方案。

最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch，上线一个多月以来运行非常稳定。结果证明，对于 IE8+ 以上浏览器，在生产环境使用 Fetch 是可行的。

由此可见，fetch比ajax更加友好，以后可能会代替ajax来实现异步请求。

为什么要使用fetch？

• Fetch API 是基于promise设计的。
• XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。
  
  

Fetch的好搭档 async/await

async/await 是非常新的 API，属于 ES7，目前尚在 Stage 1(提议) 阶段。
如何优化代码编写流程？

原来的fetch：

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用async/await之后：

try {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

这使得异步代码的编写与同步代码的编写模式一样！

其他

但是浏览器对fetch的支持性并不好，所以我们一般是使用各种polyfill文件来实现各个浏览器的兼容。

二、如何实现websocket？

• WebSocket是一种全新的协议。
• WebSocket协议是借用HTTP协议的101 switch protocol来达到协议转换的，从HTTP协议切换成WebSocket通信协议。

下面内容只是说明怎么使用这个协议：

若要实现WebSocket协议，首先需要浏览器主动发起一个HTTP请求。

这个请求头包含“Upgrade”字段，内容为“websocket”（注：upgrade字段用于改变HTTP协议版本或换用其他协议，这里显然是换用了websocket协议），还有一个最重要的字段“Sec-WebSocket-Key”，这是一个随机的经过base64编码的字符串，像密钥一样用于服务器和客户端的握手过程。一旦服务器君接收到来自客户端的upgrade请求，便会将请求头中的“Sec-WebSocket-Key”字段提取出来，追加一个固定的“魔串”：258EAFA5-E914-47DA-95CA-C5AB0DC85B11，并进行SHA-1加密，然后再次经过base64编码生成一个新的key，作为响应头中的“Sec-WebSocket-Accept”字段的内容返回给浏览器。一旦浏览器接收到来自服务器的响应，便会解析响应中的“Sec-WebSocket-Accept”字段，与自己加密编码后的串进行匹配，一旦匹配成功，便有建立连接的可能了（因为还依赖许多其他因素）。

这是一个基本的Client请求头：(只写了关键的几个字段)

Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: ************==
Sec-WebSocket-Version: **

Server正确接收后，会返回一个响应头：(同样只有关键的)

Upgrade：websocket
Connnection: Upgrade
Sec-WebSocket-Accept: ******************

这表示双方握手成功了，之后就是全双工的通信。

而关于这个协议的实现原理涉及到底层的知识，包括成帧方法、各种标识、传输方式等。

三、闭包在实际项目中的作用场景。

由于js没有块级作用域，只有函数作用域，所以闭包是为了解决作用域的问题而产生的。也因此，闭包的本质也是一个函数。

它的应用场景有下面几个：

• 1.隔离作用域
• 2.创建私有作用域与变量
• 3.作为访问私有作用域与变量的接口

四、flex布局

• http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
• http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

五、关于移动端的适配

个人一般都是用百分比，vw以及vh这两个单位，没有用到flex布局。

参考资料

1.https://github.com/camsong/blog/issues/2
2.https://github.com/abbshr/abbshr.github.io/issues/22
3.https://www.zhihu.com/question/19554716