前端面试总结五
1.OSI七层与TCP/IP四/五层网络架构
OSI七层模型：
开放系统互连参考模型 (Open System Interconnect 简称OSI）是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型，为开放式互连信息系统提供了一种功能结构的框架。它从低到高分别是：物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。
OSI七层参考模型的各个层次的划分遵循下列原则：
- 同一层中的各网络节点都有相同的层次结构，具有同样的功能。
- 同一节点内相邻层之间通过接口（可以是逻辑接口）进行通信。
- 七层结构中的每一层使用下一层提供的服务，并且向其上层提供服务。
- 不同节点的同等层按照协议实现对等层之间的通信。
第一层：物理层（PhysicalLayer)
规定通信设备的机械的、电气的、功能的和过程的特性，用以建立、维护和拆除物理链路连接。具体地讲，机械 特性规定了网络连接时所需接插件的规格尺寸、引脚数量和排列情况等；电气特性规定了在物理连接上传输bit流时线路上信号电平的大小、阻抗匹配、传输速率 距离限制等；功能特性是指对各个信号先分配确切的信号含义，即定义了DTE和DCE之间各个线路的功能；规程特性定义了利用信号线进行bit流传输的一组 操作规程，是指在物理连接的建立、维护、交换信息是，DTE和DCE双放在各电路上的动作系列。在这一层，数据的单位称为比特（bit）。属于物理层定义的典型规范代表包括：EIA/TIA RS-232、EIA/TIA RS-449、V.35、RJ-45等。
第二层：数据链路层（DataLinkLayer)
在物理层提供比特流服务的基础上，建立相邻结点之间的数据链路，通过差错控制提供数据帧（Frame）在信道上无差错的传输，并进行各电路上的动作系列。数据链路层在不可靠的物理介质上提供可靠的传输。该层的作用包括：物理地址寻址、数据的成帧、流量控制、数据的检错、重发等。在这一层，数据的单位称为帧（frame）。数据链路层协议的代表包括：SDLC、HDLC、PPP、STP、帧中继等。
第三层：网络层
在 计算机网络中进行通信的两个计算机之间可能会经过很多个数据链路，也可能还要经过很多通信子网。网络层的任务就是选择合适的网间路由和交换结点， 确保数据及时传送。网络层将数据链路层提供的帧组成数据包，包中封装有网络层包头，其中含有逻辑地址信息- -源站点和目的站点地址的网络地址。如 果你在谈论一个IP地址，那么你是在处理第3层的问题，这是“数据包”问题，而不是第2层的“帧”。IP是第3层问题的一部分，此外还有一些路由协议和地 址解析协议（ARP）。有关路由的一切事情都在这第3层处理。地址解析和路由是3层的重要目的。网络层还可以实现拥塞控制、网际互连等功能。在这一层，数据的单位称为数据包（packet）。网络层协议的代表包括：IP、IPX、RIP、OSPF等。
第四层：传输层（处理信息）
第4层的数据单元也称作数据包（packets）。但是，当你谈论TCP等具体的协议时又有特殊的叫法，TCP的数据单元称为段 （segments）而UDP协议的数据单元称为“数据报（datagrams）”。这个层负责获取全部信息，因此，它必须跟踪数据单元碎片、乱序到达的 数据包和其它在传输过程中可能发生的危险。第4层为上层提供端到端（最终用户到最终用户）的透明的、可靠的数据传输服务。所为透明的传输是指在通信过程中 传输层对上层屏蔽了通信传输系统的具体细节。传输层协议的代表包括：TCP、UDP、SPX等。
第五层：会话层
这一层也可以称为会晤层或对话层，在会话层及以上的高层次中，数据传送的单位不再另外命名，而是统称为报文。会话层不参与具体的传输，它提供包括访问验证和会话管理在内的建立和维护应用之间通信的机制。如服务器验证用户登录便是由会话层完成的。
第六层：表示层
这一层主要解决拥护信息的语法表示问题。它将欲交换的数据从适合于某一用户的抽象语法，转换为适合于OSI系统内部使用的传送语法。即提供格式化的表示和转换数据服务。数据的压缩和解压缩， 加密和解密等工作都由表示层负责。
第七层：应用层
应用层为操作系统或网络应用程序提供访问网络服务的接口。应用层协议的代表包括：Telnet、FTP、HTTP、SNMP等。
TCP/IP 四/五层模型的协议：
TCP (Transmission Control Protocol)和UDP(User Datagram Protocol)协议属于传输层协议。其中TCP提供IP环境下的数据可靠传输，它提供的服务包括数据流传送、可靠性、有效流控、全双工操作和多路复 用。通过面向连接、端到端和可靠的数据包发送。通俗说，它是事先为所发送的数据开辟出连接好的通道，然后再进行数据发送；而UDP则不为IP提供可靠性、 流控或差错恢复功能。一般来说，TCP对应的是可靠性要求高的应用，而UDP对应的则是可靠性要求低、传输经济的应用。
TCP支持的应用协议主要 有：Telnet、FTP、SMTP等；UDP支持的应用层协议主要有：NFS（网络文件系统）、SNMP（简单网络管理协议）、DNS（主域名称系 统）、TFTP（通用文件传输协议）等.
OSI七层与TCP/IP四层对应：
除了层的数量之外，开放式系统互联（OSI）模型与TCP/IP协议有什么区别？
(1) TCP/IP协议中的应用层处理开放式系统互联模型中的第五层、第六层和第七层的功能。
(2) TCP/IP协议与低层的数据链路层和物理层无关，这也是TCP/IP的重要特点。
(3) TCP/IP协议中的传输层并不能总是保证在传输层可靠地传输数据包，而开放式系统互联模型可以做到。TCP/IP协议还提供一项名为UDP（用户数据报协议）的选择。UDP不能保证可靠的数据包传输。
模型比较
共同点
（1）OSI参考模型和TCP/IP参考模型都采用了层次结构的概念。
（2）都能够提供面向连接和无连接两种通信服务机制。
不同点
（1）OSI采用的七层模型，而TCP/IP是四层结构。
（2）TCP/IP参考模型的网络接口层实际上并没有真正的定义，只是一些概念性的描述。而OSI参考模型不仅分了两层，而且每一层的功能都很详尽，甚至在数据链路层又分出一个介质访问子层，专门解决局域网的共享介质问题。
（3）OSI模型是在协议开发前设计的，具有通用性。TCP/IP是先有协议集然后建立模型，不适用于非TCP/IP网络。
（4）OSI参考模型与TCP/IP参考模型的传输层功能基本相似，都是负责为用户提供真正的端对端的通信服务，也对高层屏蔽了底层网络的实现细节。所不同的是TCP/IP参考模型的传输层是建立在网络互联层基础之上的，而网络互联层只提供无连接的网络服务，所以面向连接的功能完全在TCP协议中实现，当然TCP/IP的传输层还提供无连接的服务，如UDP；相反OSI参考模型的传输层是建立在网络层基础之上的，网络层既提供面向连接的服务，又提供无连接的服务，但传输层只提供面向连接的服务。
（5）OSI参考模型的抽象能力高，适合与描述各种网络；而TCP/IP是先有了协议，才制定TCP/IP模型的。
（6）OSI参考模型的概念划分清晰，但过于复杂；而TCP/IP参考模型在服务、接口和协议的 区别上不清楚，功能描述和实现细节混在一起。
（7）TCP/IP参考模型的网络接口层并不是真正的一层；OSI参考模型的缺点是层次过多，划分意义不大但增加了复杂性。
（8）OSI参考模型虽然被看好，由于没把握好时机，技术不成熟，实现困难；相反，TCP/IP参考模型虽然有许多不尽人意的地方，但还是比较成功的。
参考：OSI七层与TCP/IP四/五层网络架构
2.Proxy与Object.defineProperty
Object.defineProperty缺点：
（1）Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。 为了解决这个问题，经过vue内部处理后可以使用以下几种方法来监听数组
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由于只针对了以上八种方法进行了hack处理,所以其他数组的属性也是检测不到的，还是具有一定的局限性。
（2）Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x里，是通过 递归 + 遍历 data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。
Proxy优点：
（1）可以劫持整个对象，并返回一个新对象
（2）有13种劫持操作
Proxy：
- Proxy是 ES6 中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。
- Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。
- Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
- 使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。 从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。
基本用法：
let p = new Proxy(target, handler);
target 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。
p 是代理后的对象。当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法。Proxy共有13种劫持操作，handler代理的一些常用的方法有如下几个：
get：读取
set：修改
has：判断对象是否有该属性
construct：构造函数
示例：
下面就用Proxy来定义一个对象的get和set，作为一个基础demo
let obj = {};
let handler = {
get(target, property) {
console.log(`${property} 被读取`);
return property in target ? target[property] : 3;
},
set(target, property, value) {
console.log(`${property} 被设置为 ${value}`);
target[property] = value;
}
}
let p = new Proxy(obj, handler);
p.name = 'tom' //name 被设置为 tom
p.age; //age 被读取 3
p 读取属性的值时，实际上执行的是 handler.get() ：在控制台输出信息，并且读取被代理对象 obj 的属性。
p 设置属性值时，实际上执行的是 handler.set() ：在控制台输出信息，并且设置被代理对象 obj 的属性的值。
基于Proxy来实现双向绑定
<div id="app">
<input type="text" id="input" />
<div>您输入的是： <span id="title">span>div>
<button type="button" name="button" id="btn">添加到todolistbutton>
<ul id="list">ul>
div>
先来一个Proxy，实现输入框的双向绑定显示：
const obj = {};
const input = document.getElementById("input");
const title = document.getElementById("title");
const newObj = new Proxy(obj, {
get: function(target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log(target, key, value, receiver);
if (key === "text") {
input.value = value;
title.innerHTML = value;
}
return Reflect.set(target, key, value, receiver);
}
});
input.addEventListener("keyup", function(e) {
newObj.text = e.target.value;
});
接下来就是添加todolist列表，先把数组渲染到页面上去：
// 渲染todolist列表
const Render = {
// 初始化
init: function(arr) {
const fragment = document.createDocumentFragment();
for (let i = 0; i < arr.length; i++) {
const li = document.createElement("li");
li.textContent = arr[i];
fragment.appendChild(li);
}
list.appendChild(fragment);
},
addList: function(val) {
const li = document.createElement("li");
li.textContent = val;
list.appendChild(li);
}
};
再来一个Proxy，实现Todolist的添加：
const arr = [];
// 监听数组
const newArr = new Proxy(arr, {
get: function(target, key, receiver) {
return Reflect.get(target, key, receiver);
},
set: function(target, key, value, receiver) {
console.log(target, key, value, receiver);
if (key !== "length") {
Render.addList(value);
}
return Reflect.set(target, key, value, receiver);
}
});
// 初始化
window.onload = function() {
Render.init(arr);
};
btn.addEventListener("click", function() {
newArr.push(parseInt(newObj.text));
});
基于Proxy来实现vue的观察者机制
Proxy实现observe
observe(data) {
const that = this;
let handler = {
get(target, property) {
return target[property];
},
set(target, key, value) {
let res = Reflect.set(target, key, value);
that.subscribe[key].map(item => {
item.update();
});
return res;
}
}
this.$data = new Proxy(data, handler);
}
这段代码里把代理器返回的对象代理到this. d a t a ， 即 t h i s . data，即this. data，即this.data是代理后的对象，外部每次对this.$data进行操作时，实际上执行的是这段代码里handler对象上的方法。
compile和watcher
比较熟悉vue的同学都很清楚，vue2.x在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数，用来实现「响应式」以及「依赖收集」。类似于下面这个内部流程图：
而我们上面已经用Proxy取代了Object.defineProperty这部分观察者机制，而要实现整个基本mvvm双向绑定流程，除了observe还需要compile和watche等一系列机制，我们这里像模板编译的工作就不展开描述了，为了实现基于Proxy的vue添加Totolist,这里只写了
compile和watcher来支持observe的工作
参考：vue3.0尝鲜 – 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索
3.Ajax在请求过程中显示进度的简单实现
beforeSend， 在请求发送前执行 比如 可以判断用户有没有登录 ，如果没有登录就停止请求 并提示。
$.ajax({
url : 'my_action',
dataType: 'script',
beforeSend : function(xhr, opts){
if(1 == 1) //just an example
{
xhr.abort(); // 停止请求
}
},
complete: function(){
console.log('DONE');
}
});
$.ajax有一个参数是complete：function(){} 是在 请求完成之后执行的 ，配合beforeSend可以用来展示进度条
$.ajax({
url : 'my_action',
dataType: 'script',
beforeSend : function(){
// 设置 进度条到20%慢慢变到50%
},
complete: function(){
// 设置 进度条到80%
}
success：function(){
// 渲染页面
// 进度到100%
}
});
这个只是表面上的看到的进度条 ，展示大概的进度，并不是真正的加载进度。
Ajax在Web应用中使用得越来越频繁。在进行Ajax调用过程中一般都具有这样的做法：显示一个GIF图片动画表明后台正在工作，同时阻止用户操作本页面（比如Ajax请求通过某个按钮触发，用户不能频繁点击该按钮产生多个并发Ajax请求）；调用完成后，图片消失，当前页面运行重新编辑。以下图为例，页面中通过一个Load链接以Ajax请求的方式加载数据（左）。当用户点击该链接之后，Ajax请求开始，GIF图片显示“Loading“状态，同时当前页面被“罩住”防止用户继续点击Load按钮（中）；Ajax请求完成被返回响应的结果，结果被呈现出来的同时，GIF图片和“遮罩”同时消失（右）。
在这里我同样以ASP.NET MVC应用为例，提供一种简单的实现方式。我们GIF图片和作为遮罩的
<html>
<head>
<title>@ViewBag.Titletitle>
<style type="text/css">
.hide{displaynone }
.progress{z-index }
.mask{position fixed;top ;right ;bottom ;left ; z-index ; background-color #}
style>
...
head>
<body>
<div>@RenderBody()div>
<div id="maskOfProgressImage" class="mask hide">div>
body>
html>
然后我们通过如下的代码为jQuery定义了另一个实现Ajax调用的方法ajax2，该方法依然调用$.ajax(options)实现Ajax调用。在ajax2方法中我们将options参数complete属性进行了“封装”，让可以将显示出来的GIF图片和遮罩$.ajax(options)进行Ajax请求之前，我们将GIF图片和遮罩
<html>
<head>
...