中级前端知识点提要

时间 2019-11-13

标签中级前端知识提要繁體版

原文原文链接

中级前端知识点提要

标签（空格分隔）： JavaScript HTML 基础javascript

1 Restful API

Representational State Transfer（表现层状态转移）。
URL定位资源，用HTTP动词（GET POST PUT DELETE）描述操做。
资源、统一接口、URI、无状态。
应该将API的版本号放入URL；URL中只能有名词而不能有动词；API应该提供参数。css

2 CommonJS/AMD/CMD/ES6 Module

2.1 CommonJS

是Node.js模块系统具体实现的基石html

JavaScript: not just for browsers any more!
为解决JavaScript没有模块系统，标准库较少，缺少包管理工具。
定义的模块
- 模块引用（require）
- 模块定义（exports）
- 模块标识（module）
运行环境
- 服务端JavaScript应用程序
- 命令行工具
- 图形界面应用程序
- 混合应用程序
特色
- 全部代码运行在模块做用域，不会污染全局做用域
- 模块能够第一次加载，只在第一次加载时运行一次
- 模块按照其在代码中出现的顺序加载（同步）
包结构
- package.json包描述文件，存在于包根目录下
- bin存放可执行二进制文件的目录
- lib存放js代码的目录
- doc存放文档的目录
- test存放单元测试用例代码的目录

2.2 AMD Asynchronous Module Definition(异步模块定义)

浏览器端的模块，不能采用“同步加载（synchronous）”，只能采用“异步加载（asynchronous）”。这就是AMD规范诞生的背景。
典型表明require.js前端

模块定义vue
```
define(id?: String, dependencies?: String, factory: Function|Object);
```
- id是模块的名字。
- dependencies是依赖模块列表，默认值是["require", "exports", "module"]。
- factory是模块的具体实现。
模块加载html5
```
require([module], callback);
```
require.js
- 实现js文件的异步加载，避免网页失去响应。
- 管理模块之间的依赖性，便于代码的编写和维护。

2.3 CMD Common Module Definition（通用模块定义）

一个模块就是一个文件，依赖就近；懒加载（延迟执行）；没有全局require。
典型SeaJSjava

模块定义node

define(factory);

factory是函数时，表示是模块的构造方法。react

define(function(require, exports, module) {
    // 模块代码
});

SeaJS和RequireJS的差别jquery
- 定位有差别
  RequireJS目的是同时做为浏览器端和服务器端的模块加载器。
  SeaJS专一于浏览器端。
- 遵循规范不一样
  RequireJS遵循AMD规范。
  SeaJS遵循CMD规范，更贴近CommonJS和Node Modules。
- 执行方式不一样（AMD和CMD的差别）
  RequireJS依赖前置，预执行（异步加载：依赖先执行）（RequireJS从2.0开始，也改为能够延迟执行）。
  SeaJS依赖就近，懒执行（运行到需加载，根据顺序执行）。
- 对开发调试的支持有差别
  SeaJS有更多的调试插件。
- 插件机制不一样
  RequireJS采起源码中预留接口形式，插件类型比较单一。
  SeaJS采起通用事件机制，插件类型更丰富。

2.4 ES6 Module

ES6模块的设计思想是尽可能的静态化，使得编译时就能肯定模块的依赖关系，以及输入和输出的变量。
这一点不一样于CommonJS和AMD模块。所以也不能实现动态加载（提案import([path])用于解决这个问题）。
一个文件就是一个模块。该文件内部的全部变量，外部没法获取，使用export关键字输出指定变量。

export命令

使用as关键字重命名导出变量。

对外的接口，必须与模块内部的变量创建一一对应的关系。好比：

export 1; // 报错
var m = 1;
export m; // 报错
// 由于1只是一个值不是接口
// 正确应该是这样
export var m = 1;
export { m };

import命令
- 使用as关键字重命名变量名。
- import命令输入的变量是只读的，不能改写接口（好比从新赋值）；可是若是变量是个对象，修改属性是容许的（不建议这么作）。
- from关键字指定模块文件的位置（相对/绝对路径）；.js后缀能够省略。
- import命令具备提高效果，率先执行。
- import命令是静态执行，不能使用表达式、变量或者在结构语句中。
- 重复import只执行一次。
- 使用*实现全部导出值都加载在as的对象上，好比：
```
import * as obj from './module';
obj.a();
```
  虽然obj是个对象，可是不容许修改它的属性，好比：obj.a = 'Hello'; // 报错。
- import默认输出（export default）时候不须要大括号，而其它的则须要。
- 想要在一条import语句中同时导入默认接口export default和其它接口，能够用_实现：
```
import _, { momduleA, moduleB as moduleC } from './module';
```
export default命令
- 为用户指定默认输出。
- 其它模块加载该模块时，import命令能够为该匿名导出接口指定任意名字（即使export时候是具名接口，在外部模块视为无效）。
```
export default function foo() { };
import bar from './foo';
```
- 一个模块只能使用一次export default。
- 本质上export default就是输出一个叫作default的变量或方法，而后容许你为它取任意名字。
- export default后面不能跟变量声明语句。
- 能够直接把一个值或变量export default，好比：
```
export default 123;
var a = 1;
export default a;
```

export与import复合写法

export { foo as bar } from './module'; // 接口更名转发
export { default } from './module'; // 转发默认接口
export { foo as default } from './module'; // 转发具名接口为默认接口
export { default as foo } from './module'; // 转发默认接口为具名接口

模块的继承

假设有一个moduleA模块，继承了moduleB模块。
```
// @file moduleA.js

export * from 'moduleB';
export var e = 123;
export default function() { };
```
export *表示输出moduleB的全部属性和方法，且忽略default方法。
跨模块常量

创建一个constants文件夹，各个文件保存不一样类型的常量，加一个index.js来合并（转发）这些常量，使用的时候直接加载index.js就能够了。
import()提案
- 用于解决没法动态加载模块的问题。
- 返回一个Promise对象。
- import()与Node的require方法差别在于：异步加载。
- 使用场景：按需加载、条件加载、动态模块路径。
- 加载完成后模块会做为一个对象成为then方法的参数。
  可使用对象解构赋值语法：
```
import('module.js').then((export1, export2) => {
    // TODO
});
```
- 同时加载多个模块
```
promise.all([
    import('moduleA.js'),
    import('moduleB.js')
]).then(([moduleA, moduleB]) => {
    // TODO
});
```

3 三大框架底层原理

前端三大框架数据流动和原理

3.1 Angular2+

Angular2+是经过zone.js代理原生异步事件，事件发生触发tick()去执行变化检测。
Angular2+脏值检测（存储全部变量的值，每当有变量发生变化时，就将全部变量的旧值与新值比较，不相等就说明检测到变化），Angular每一个组件都有本身的变化检测器；数据流从上到下（从根组件向下）。

3.2 Vue2+

Vue是经过Object.defineProperty()来劫持数据的getter/setter实现数据绑定。
实现一个数据监听器observer，对全部属性进行监听，有变化通知订阅者。
实现一个指令解析器compile，根据指令模板替换数据。
实现一个watcher链接以上二者的联系。

3.3 React

Virtual DOM（虚拟DOM）。

4 跨域

跨域资源共享 CORS 详解

CORS Cross-Origin Resource Sharing(跨域资源共享)。
它容许向跨源服务器发出XHR请求。
实现关键是服务器实现了CORS接口，就能够跨源通讯。

4.1 简单请求

同时知足两个条件：

请求方法时如下三种之一
- HEAD
- GET
- POST
HTTP头信息不超出如下几种字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type(仅限值为application/x-www-form-urlencoded、multipart/form-data、text/plain)。

4.1.1 基本流程

浏览器请求时，在head信息中增长Origin字段。
服务器根据Origin指定的源，判断是否在许可范围内：

若是不在Response Headers中就不会有Access-Control-Allow-Origin字段，触发XHR的onerror回调。
若是在，会返回如下字段：

Access-Control-Allow-Origin: https://www.google.com  // 必有字段， *（接受任意域名）或者是Request Headers里的Origin字段值

Access-Control-Allow-Credentials: true  // 可选字段，表示容许发送cookie；若是不发送删除该字段

Access-Control-Expose-Headers: FooBar  // 可选字段，XHR的getResponseHeader方法只能拿到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段，想要其余字段在这里指定

Content-Type: text/html;charset=utf-8

4.1.2 withCredentials属性

容许CORS发送cookie和http认证信息，服务器须要设置Access-Control-Allow-Credentials为true；浏览器端XHR请求须要设置：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

若是要发送cookie，Access-Control-Allow-Origin不能设置为*，必须指定明确，与请求网页一致的域名。同时，cookie依旧同源策略，只有服务器域名设置的cookie才会上传，浏览器端document.cookie没法读取服务器域名下的cookie。

4.2 非简单请求

非简单请求，会在正式通讯以前增长一次HTTP查询请求，叫“预检请求(preflight)”。
用以询问服务器当前浏览器端网页所在域名是否在服务器的许可名单之中，以及可使用哪些HTTP动词和头信息字段，只有获得确定答复才会发起正式请求，不然报错。

Preflight请求方法是OPTIONS，表示询问请求。
关键字段Origin。

Access-Control-Request-Method  // 必有字段 表示CORS请求的HTTP方法

Access-Control-Request-Headers // 逗号分隔字符串，指定CORS请求额外发送头信息的字段

Preflight请求的Response。

Access-Control-Allow-Origin  // 表示容许请求的源

Access-Control-Allow-Methods  // 必有字段，逗号分隔字符串，表示服务器支持的跨域请求的全部方法

Access-Control-Allow-Headers  // 若是request时包含Access-Control-Request-Headers字段，则此response字段必有。逗号分隔字符串，表示服务器支持的全部头信息字段

Access-Control-Allow-Credentials  // 是否容许cookie

Access-Control-Max-Age  // 可选，单位是秒，表示该条回应缓存时间

浏览器正常请求和回应
与简单请求一致。

4.3 与JSONP跨域的区别

JSONP只支持GET请求，其优点在于支持老版本浏览器。

5 同源策略

浏览器同源政策及其规避方法

Same-Origin Policy(同源策略)
1995年网景公司引入浏览器。目的是保证用户信息安全，防止恶意网站窃取数据。

概念
- 协议相同
- 域名相同
- 端口相同
限制范围
- cookie localStorage和indexDB
- DOM
- Ajax请求
规避限制
- cookie
  若是一个网站一级域名相同，二级域名不一样。两个网页设置相同的document.domain共享cookie。
- iframe
  - 片断标识符
    Fragment Indentifier指的是URL中#后面的部分
    父窗口能够把信息写入子窗口的片断标识符
```
var src = './page-1.html' + '#test';
setTimeout(() => {
    document.getElementById('iframe').src = src;
}, 1000);
```
    子窗口经过监听hashchange事件获得通知：
```
window.onhashchange = function() {
    console.log('Page-1 print fragment identifier: ', window.location.hash);
}
```
    一样的，子窗口也能够改变父窗口的片断标识符：
```
parent.location.href = target + '#' + hash;
```
    demo如图所示：
  - window.name
    不管同源，只要在一个窗口里，前一个网页设置了这个属性，后一个网页就能够读取它。
  - window.postMessage
    HTML5新API：跨文档通讯（Cross-Document Messaging）。
    它容许跨窗口通讯，不管是否同源。
- ajax
  JSONP
  WebSocket
  CORS

6 闭包

闭包是函数和声明该函数的词法环境的组合。
闭包（closure）就是可以读取其它函数内部变量的函数（定义在一个函数内部的函数）。
本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。

做用
- 读取函数内部的变量
- 让这些变量的值始终保持在内存中
- 实现私有属性
不能滥用
- 闭包在处理速度和内存消耗方面对脚本性能具备负面影响
- 形成内存溢出

7 面向对象

面向对象程序设置(OOP)的目的是在编程中促进更好的灵活性和可维护性、

Namesoace（命名空间）
一个独特、应用相关名字的名称下捆绑全部功能的容器。
在js中，命名空间只是一个包含方法、属性、对象的对象。
Class（类）
定义对象的特征。它是对象的属性和方法的模板定义。
js经过定义函数来声明类(ES6以前)。
Object（对象）
类的一个实例。
js中的每一个对象都是Object对象的实例且继承它全部的属性和方法。
Property（属性）
对象的特征。
经过this关键字调用类中的属性。
Method（方法）
对象的能力（方法）。
将函数赋值给类的prototype属性。
Constructor（构造函数）
对象初始化的瞬间，被调用的方法。一般它的名字与包含它的类一致。

Inheritance（继承）
一个类能够继承另外一个类的特征。

// 子类
// 调用父类构造器，确保（使用Function#call）“this”在调用过程当中设置正确
Parent.call(this, args);
// 同时须要显示的继承父类的prototype
Child.prototype = Object.create(Parent.prototype);
// 设置constructor属性指向子类
Child.prototype.contructor = Child;

// Object.create()仅支持现代浏览器（IE9+），有shim方案
functuon createObject(proto) {
    function ctor() {}
    ctor.prototype = proto;
    return new ctor();
}

通用方法：

function extend(Child, Parent) {
    var F = function() {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype; // uber 是在模拟 class 时用来表示 super 的(由于super是关键字因此不能直接用)
}

Encapsulation（封装）
一种把数据和相关方法绑定在一块儿使用的方法。
Abstraction（抽象）
结合复杂的继承、方法、属性的对象可以模拟现实的模型。
Polymorphism（多态）
多意思是“许多”，态是“形态”。不一样类能够定义相同的方法或属性。

8 继承与原型链

js只有一种结构：对象。每一个实例对象（object）都有一个私有属性（称之为[[prototype]]）指向它的原型对象（prototype）。该原型对象也有一个本身的原型对象，层层向上直到一个对象的原型对象为null。根据定义，null没有原型，并做为这个原型链中的最后一环节。
几乎全部的js中的对象都是位于原型链顶端的Object的实例。

prototype属性属于构造函数，这个属性包含一个对象（prototype对象），全部实例对象须要共享的属性和方法，都放在这对象里；那些不须要共享的属性和方法，放在狗仔函数里。

9 前端优化

雅虎前端优化

Content
- 减小HTTP请求次数
  - 合并文件
  - CSS Sprites(雪碧图)
  - image maps
  - inline images 使用data:url scheme内联图片
- 减小DNS查询
  缓存DNS查询。
- 避免重定向
  最浪费的重定向发生在url尾部slash(/)缺失。
- 使Ajax能够缓存
  Add an Expires or a Cache-Control Header.
- 延迟加载组件
  考虑什么是页面初始化必须的，剩下的内容和组件均可以延迟加载。包括隐藏的内容、折叠起来的图片等等。
- 预加载组件
  - 无条件(Unconditional )预加载
    一旦onload触发，你当即获取另外的组件。好比谷歌会在主页这样加载搜索结果页面用到的雪碧图。
  - 有条件(Conditional)预加载
    基于用户动做，推测用户下一步会去哪里并加载相应的组件。
  - 预期的(Anticipated)预加载
    You can mitigate this side effect by preloading some components before you even launched the redesign.
- 减小DOM数量
- 跨域拆分组件
  使用2-4个域名来拆分前端资源。好比能够把HTML和动态内容部署在www.example.com，拆分静态资源到static1.example.com和static2.example.com。
- 减小iframe数量
  iframe优势：
  * 解决缓慢的第三方内容的加载
  * 安全沙盒
  * 并行下载脚本
  iframe缺点：
  * 空的也消耗资源和时间
  * 阻塞了页面的onload
  * 非语义化
- 不要404
  http请求是昂贵的，发出http请求但得到没用的响应（404）是彻底没必要要的。
Server
- 使用CDN(Content Delivery Network)内容分发网络
  CDN是一群不一样地点的服务器，能够更高效地分发内容到用户。
- 在头信息使用Expires或是Cache-Control
  - 对静态组件：经过设置Expires头部来实现“永不过时”策略，好比图片。当组件更新后，必须更改文件名。
  - 对动态组件：用合适的Cache-Control来帮助浏览器进行有条件请求
- Gzip压缩组件
  针对文本类型的文件（html，脚本，样式，xml和json等）。图片或pdf等不该该被gzip。
  能够减少http响应的大小从而减小响应时间。
```
Content-Encoding: gzip
```
- 配置Etag
  实体标记（Entity Tag, ETag）是服务器和浏览器之间判断浏览器缓存中某个组件是否匹配服务器端原组件的一种机制。实体就是组件：图片、脚本、样式等。ETag被当作验证明体的，且比last-modified（最后更改）更高效地机制。服务器这样设置组件的ETag:
```
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
```
  浏览器经过If-None-Match验证组件，若是ETag匹配，服务器返回304：
```
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
```
- Flush the Buffer Early
- Use GET for AJAX Requests
  获取数据应该用GET，提交数据到服务器用POST。
- 避免空src的img
  - IE，向页面所在的目录发请求。
  - Safari和Chrome，请求实际的页面。
  - FireFox3及以前和Safari/Chrome同样，但从3.5开始修复问题，再也不发请求。
  - Opera遇到空图片src不作任何事。
Cookie
- 减少cookie体积
  - 消除没必要要的cookie
  - 尽量减少cookie的大小下降响应时间
  - 注意设置cookie到合适的域名级别，则其它子域名不会被影响
  - 适当设置Expires日期。
- 为静态资源设置不一样域名(Use Cookie-free Domains for Components)
  请求静态资源没必要传输cookie，因此启用一个新域名来托管静态资源。
CSS
- 把样式文件放在顶部<head>。
- 避免使用CSS表达式（CSS Expressions）
```
// 背景颜色能够设置成每小时轮换
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
```
- 避免使用@import
  在IE用@import等效于样式文件放到页面底部。
- 避免使用过滤器(Filters)
  放弃IE的AlphaImageLoader。用PNG8来优雅降级。
JavaScript
- 把脚本放在底部
  当脚本在下载，浏览器不会再下载其余组件，即便在不一样域名下。
  一个替代建议是使用异步脚本。defer和async。
- 使用外部CSS和js。
- 压缩js和css
- 删除重复脚本
- 最小化DOM访问
  用js访问DOM元素是缓慢的:
  * 缓存访问过的元素的引用
  * 在DOM树外更新节点，而后添加到DOM树
  * 避免使用js实现固定布局
- 使事件处理更灵活
  考虑使用事件委托。
  另外没必要等到onload事件来开始处理DOM树，DOMContentLoaded更快。onload包含图片都被下载完毕才执行。
Images
- 优化图片
  - 检查gif图片的palette size（调色板大小）是否匹配图片颜色数。
  - 能够把fig转成png看看有没有变小。gif通常能够转成png8，动画除外。
  - 运行pngcrush或其它工具压缩png。
  - 运行jpegtran或其它工具压缩jpeg。
- 优化雪碧图(CSS Sprites)
  - 把图片横向合并而不是纵向，横向更小。
  - 把颜色近似的图片合并到一张雪碧图，这样可让颜色数更少，若是低于256就能够用png8。
  - “Be mobile-friendly”而且合并时图片间的间距不要太大，这样对客户端解压时须要的内存更少。
- 不要把大图片缩成小图片
  好比使用100x100的图片就使用这么大的，而不该该是500x500。
- 使favicon.ico小且可缓存
  - 最好1k如下
  - 设置Expires头部，也许能够安全设置为几个月。
Mobile
- 保持资源小于25k
  这个限制于iPhone不缓存大于25k的组件息息相关。并且注意是非压缩(uncompressed)的文件大小。
- Pack Components into a Multipart Document

10 浏览器兼容性

推荐一个reboot样式表Normalize.css。
html5shiv.js 解决IE9如下浏览器对HTML5标签不识别的问题。
respond.js 解决IE9如下不支持媒体查询的问题。
picturefill.js 解决IE9 10 11等不支持<picture>标签的问题。

条件注释

操做符	范例	含义
`lt`	`[if lt IE 10]`	小于
`gt`	`[if gt IE 9]`	大于
`lte`	`[if lte IE 6]`	小于等于
`gte`	`[if gte IE 5.5 ]`	大于等于
`!`	`[if !IE]`	不等于
`()`	`[if !(IE 7)]`	子表达式
`&`	`[if (gt IE 5)&(lt IE 7)]`	AND
竖线(md表格语法问题)	`[if (IE 6)竖线(IE 7)]`	OR

好比：

<!--[if !IE]> 除IE外均可识别 <![endif]-->
<!--[if IE]> 全部的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6如下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

浏览器CSS兼容前缀

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

a标签CSS状态顺序
1 :link 日常状态
2 :visited 被访问过以后
3 :hover 鼠标悬浮
4 :active 连接被点击

求窗口大小

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop || document.body.scrollTop;

11 浏览器内核

五大流浏览器内核及其表明
各主流浏览器内核介绍

浏览器的内核分为两个部分，一个是渲染引擎（Rendering Engine），一个是js引擎。如今就是引擎比较独立，内核更加倾向于说渲染引擎。

Trident(三叉戟)内核
表明做是IE浏览器。
Gecko(壁虎)内核
表明做是Firefox。开源项目。
Webkit(引擎)内核
苹果公司基于KDE的KHTML引擎开发的内核。
由WebCore和JSCore构成。严格意义上来说不只仅是Rendering Engine。
表明做是Safari、曾经的Chrome，开源项目。
谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的Webkit做为浏览器内核原型，是Webkit的一个分支，能够称之为Chromium引擎。
Presto(说变就变)内核
表明做是Opera(v7.0-v12.16)。13年Opera弃用了Presto转为WebKit分支上的Chromium。
Blink(闪亮)内核
有Google和Opera Software开发的，2013年4月发布的浏览器排版引擎。现代Chrome(v28.0.1469.0~)内核是Blink。

12 经典算法和原理

13 TCP/IP协议

Transmission Control Protocol/Internet Protocol（传输控制协议/因特网互联协议）又名网络通信协议，是Internet最基本的协议，Internet国际互联网的基础，由网络层的IP协议和传输层的TCP协议组成。

14 HTTP协议

HyperText Transfer Protocol（超文本传输协议），是一种用于分布式、协做式和超媒体信息系统的应用层协议。HTTP是万维网的数据通讯基础。万维网协议（World Wide Web Consortium, W3C）。
经过HTTP或HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers, URI）来标识。

15 OSI模型

有国际标准化组织提出的使各类计算机在世界范围内互连为网络的标准框架。
Open System Interconnection Reference Model(开放式系统互联通讯参考模型)

第1层物理层
第2层数据链路层
第3层网络层
第4层传输层
第5层会话层
第6层表达层
第7层应用层

16 MVC设计模式

Model
数据模型
View
视图
Controller
数据模型和视图之间的控制器。用户和应用产生交互时，控制器中的事件触发器触发工做，更新视图或者更新数据。

17 MVVM设计模式

Model
数据层的域模型，域模型同步，主要用于抽象出ViewModel中视图的Model。
View
视图动态模板。处理状态，数据绑定的声明、指令的声明、事件绑定的声明。
ViewModel
处理View层的具体业务逻辑。底层作好绑定树形的监听，实现双向绑定。

18 分层架构模式

分层架构（3-tier architecture）：界面层、业务逻辑层、数据访问层。
为了高内聚低耦合的软件设计思想。

19 三次握手

20 call & apply

是为了动态改变this而生（从新定义函数的执行环境）。

21 Map

Map

Map对象保存键值对。任何值（对象或原始值）均可以觉得一个键或一个值。
new Map([iterable]);
iterable能够是一个数组或者其余iterable对象，其元素或为键值对，或为两个元素的数组。每一个键值对都会添加到新的Map。null会被当作undefined。

22 this

javascript this

this指的是函数运行时所在的环境。
因为函数能够在不一样的运行运行环境中执行，因此须要一种机制，可以在函数体内部得到当前运行环境（context）。这就是this的由来，它设计的目的就是在函数体内部，指代函数当前的运行环境。

23 undefined和null区别

null表示没有对象（此处不该该有值）
- 做为函数的参数，表示该函数的参数不是对象
- 做为对象原型链的终点
undefined表示缺乏值（此处应该有一个值，可是尚未定义）
- 变量被声明了，可是没有赋值，就等于undefined；像GoLang里的零值
- 调用函数时，应该提供的参数没有提供，这个参数等于undefined
- 对象没有赋值的属性，该属性值为undefined
- 函数没有返回值时，默认返回undefined

24 HTML5之websocket

HTML5 WebSockets Api

WebSockets 是一种先进的技术。它能够在用户的浏览器和服务器之间打开交互式通讯会话。使用此API，您能够向服务器发送消息并接收事件驱动的响应，而无需经过轮询服务器的方式以得到响应。

webSockets
用于链接websocket服务器的主要接口，以后能够在这个链接上发送和接受数据。
closeEbent
链接关闭时wensocket对象发送的事件。
messageEvent
当从服务器获取到消息时websocket对象触发的事件。

25 HTML5之history

HTML5 history Api

26 HTML5之canvas

27 HTML5之picture

HTML5 picture

是一个容器，用来为其内部特定的<img>元素提供多样的<source>元素。浏览器会根据当前页面的布局以及当前浏览的设备区从中选择最合适的资源。

<picture>
    <source srcset="./img/1.jpg" media="(max-width: 992px)">
    <source srcset="./img/2.jpg" media="(max-width: 1200px)">
    <img src="./img/3.jpg" alt="3">
</picture>

28 HTML5之localStorage和sessionStorage

29 W3C标准

W3C标准文档

网页设计和应用
- HTML和CSS
  - HTML
    HTML is the language for describing the sticture of web pages.
    用途：
    * 发布带有头部、文字、表格、列表、图片等的在线文档
    * 点击按钮经过超文本连接检索在线信息
    * 设计表单，用于和远程服务进行交易，用户搜索信息，预约，订购产品等
    * 直接在其文档中包含电子表格，视频剪辑，声音剪辑和其它应用程序
  - XHTML
    XHTML is a variant(变种) of HTML that uses the syntax(语法) of XML, the Extensible Markup Language(可扩展标记语言).
  - CSS
    CSS is the language for describing the presentation(呈现) of web pages, including colors, layout, and fonts.
    It allows one to adapt(适应) the presentation to different types of devices, such as large screens, small screens, or printers(打印机).
  - WebFonts
    WebFonts is a technology that enables people to use fonts on demand(按需) over the Web without installation in the operating system(操做系统).
- JavaScript Web APIs
- Graphics
  png, SVG, Canvas API. WebCGM
- Audio and Video
- Accessibility(无障碍)
  W3C的Web Accessibility Initiative(WAI 网页可访问性计划)发布了Web Content Accessibility Guidelines(WCAG 网页内容可访问性指南)，以帮助开发者建立对残障人士可访问的内容。
- Internationalization(国际化)
- Mobile Web
- Privacy(隐私)
- Math on the Web

30 自动化发布，前端自动化

31 前端工程化

32 微信小程序

33 前端架构设计

34 ES6/ES7经常使用

35 cookie操做

36 函数和变量的预解析

函数和变量声明会置顶，函数声明在变量声明之上。因此即使书写的代码变量声明在函数声明之上，变量声明也不会被覆盖。

如下是个典型的题目：

function Foo() {
    // 没有用var，变量提高
    bar = function() {
        console.log(1);
    };
    return this;
}

Foo.bar = function() {
    console.log(2);
};
Foo.prototype.bar = function() {
    console.log(3);
};
var bar = function() {
    console.log(4);
};

bar = function() {
    console.log(6);
};

function bar() {
    console.log(5);
}


Foo.bar(); // 2
bar(); //** 6
Foo().bar(); // 1
bar(); //** 1
new Foo.bar(); // 2
new Foo().bar(); // 3
new new Foo().bar(); // 3

37 CSS3新增伪类

38 HTML5遗弃的元素

39 event对象

40 XMLHttpRequest基础

XMLHttpRequest

使用XMLHttpRequest(XHR)对象能够与服务器交互。

对于full-duplex(全双工)通讯，WebSockets能够是更好的选择。

属性

XMLHttpRequest.onreadystatechange
当readyState属性发生变化时调用的事件。

var xhr = new XMLHttpRequest(),
    method = 'GET',
    url = 'https://developer.mozilla.org/';

xhr.open(method, url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

XMLHttpRequest.readystate 只读
返回一个无符号短整型(unsigned short)，表示请求的状态码。

值	状态	描述
0	UNSENT	代理被建立，但还没有调用`open()`方法
1	OPENED	`open()`方法已经调用
2	HEADERS_RECEIVED	`send()`方法已经被调用，而且头部和状态已经可获取
3	LOADING	下载中，`responseText`属性已经包含部分数据
4	DONE	下载操做已完成

XMLHttpRequest.response 只读
返回ArrayBuffer, Blob, Document, DOMString，取决于XMLHttpRequest.responseType的值。
其中包含响应体body。
XMLHttpRequest.responseText 只读
返回一个DOMString，包含对请求的响应；若是请求失败或未发送，返回null。

XMLHttpRequest.responseType
定义响应类型的枚举值。

值	描述
`""`	默认类型，与`"text"`相同；`DOMString`
`"arraybuffer"`	包含二进制数据的JavaScript`ArrayBuffer`
`"blob"`	包含二进制数据的`Blob`对象
`"document"`	是一个HTML`Document`或XML`XMLDocument`，取决于接收到的数据的MIME类型
`"json"`	是一个JavaScript对象，由JOSN解析
`"text"`	包含在DOMString对象中的文本

XMLHttpRequest.reponseURL 只读
返回响应的序列化URL，若是URL为空，则返回空字符串。
XMLHttpRequest.status 只读
返回无符号短整型(unsigned short)的请求响应状态。
请求完成前和XMLHttpRequest出错，status为0。

HTTP状态码
XMLHttpRequest.statusText 只读
返回一个DOMString，其中包含HTTP服务器返回的响应状态。包括整个文本，好比："200 OK"。
XMLHttpRequest.timeout
无符号长整型(unsigned long)，表示该请求的最大请求时间（毫秒），超过该时间会自动结束。
XMLHttpRequest.ontimeout
当请求超时调用的事件。
XMLHttpRequest.upload 只读
表示上传过程。
XMLHttpRequest.withCredentials
Boolean，用来指定跨域的请求是否应该使用证书（cookie或受权header头）。
XMLHttpRequest.channel 只读
对象在执行请求时使用的通道。
XMLHttpRequest.mozAnon 只读
Boolean，若是为真，请求将在没有cookie和身份验证header头的状况下发送。
XMLHttpRequest.mozSystem 只读
Boolean，若是为真，则在请求时不会强制执行同源策略。
XMLHttpRequest.mozBackgoundRequest
Boolean，它指示对象是不是后台服务器端的请求。

方法
- XMLHttpRequest.abort()
  若是请求已经被发送，则马上终止请求。
- XMLHttpRequest.getAllResponseHeaders()
  以字符串的形式返回全部用CRLF分隔的响应头，若是没有收到响应，则返回null。
- XMLHttpRequest.getResponseHeader()
  返回包含指定响应头的字符串，若是响应还没有收到或响应中不存在该报头，则返回null。
- XMLHttpRequest.open()
  初始化一个请求。该方法只能在JavaScript代码中使用，若要在native code中初始化请求，请使用openRequest()。
```
xhr.open(method, url, async);
```
  - method HTTP方法
  - url 发送请求的URL
  - async 默认为true，执行异步操做
- XMLHttpRequest.overrideMimeType()
  重写由服务器返回的MIME type。
- XMLHttpRequest.send()
  发送请求。若是请求是异步的，那么该方法将在请求发送后当即返回。
```
void send();
void send(ArrayBuffer data);
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
```
- XMLHttpRequest.setRequestHeader()
  设置HTTP请求头的值。您必须在open()以后，send()以前调用setRequestHeader()方法。

41 Ajax基础

Asynchronous JavaScript and XML

ajax优势
* 改善用户体验，页面无刷新更新数据
* 异步处理服务器通讯，减小页面等待时间
* 减轻服务器负担，按需请求数据，减小冗余请求
* 基于标准被普遍支持
ajax缺点
* 没法前进后退(能够经过操做history api来解决)，破坏浏览器机制
* SEO问题
* 安全问题

42 `src`和`href`属性

src用于替代这个元素，而href用于创建这个标签与外部资源之间的关系。

href (Hypertext Reference) 超文本引用href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如连接）与目标锚点或目标资源之间的联系。
src (Source)源这个属性是将资源嵌入到当前文档中元素所在的位置。

43 Web应用实现推送的方式

Ajax轮询
客户端定时向服务器发送Ajax请求，服务器接收到请求后返回响应信息并关闭链接。
- 优势：简单
- 缺点：浪费带宽和服务器资源
长轮询
客户端向服务器发送Ajax请求，服务器接收到请求后Hold住连接，直到有新消息才返回响应信息，并关闭连接；客户端处理完响应后再向服务器发起新一轮请求。
- 优势：较少耗费资源
- 缺点：仍然会耗费服务器资源，返回数据顺序没法保证，难于管理维护
长连接
在页面中嵌入一个隐藏的iframe，将这个iframe的src属性设置为对一个长连接的请求或XHR请求。
- 优势：消息即时到达，不发送无用请求。
- 缺点：服务器维护一个长连接会增长开销
Flash Socket
在页面中嵌入一个使用了Socket类的Flash程序。
- 优势：实现真正的即时通讯
- 缺点：客户端必须安装Flash插件；非HTTP协议，没法自动穿越防火墙
WebSocket
HTML5的全双工API。
- 优势：事件驱动，异步；使用WS或者WSS协议的客户端Socket；实现真正意义上的推送功能
- 缺点：兼容性

44 CSS盒模型

45 js做用域

for(var i = 0; i < 5; i++) {
  setTimeout(function() {
     console.log(i);            // 5 5 5 5 5
  }, 200);
};

块级做用域能够解决这个问题：

for(let i = 0; i < 5; i++) {
  setTimeout(function() {
     console.log(i);            // 0 1 2 3 4
  }, 200);
};

46 js解析

JavaScript代码是先声明后执行，解析的时候js引擎总会从最近的一个域，向外层查找。
如下是个经典题目:

var a = 1;
function b() {
    console.log(a); // undefined
    var a = 2;
    console.log(a); // 2
}
b();

咱们来剖析一下：1：首先声明变量a；2：声明函数b；3：赋值a为1；4：调用函数b；5：进入函数b；6：声明变量a；7：执行第一个console；8：为a赋值为2；9：执行第二个console。

执行第一个console的时候，a已经被声明可是没有赋值，咱们知道js中声明一个未赋值的变量其值是undefined；并且因为a已经在b函数做用域声明，引擎也不会去函数做用域外查找。

再好比这个题目：

var foo = 1;
(function() {
    var foo = foo || 2; // js先声明后执行；变量被声明了js引擎就不会去当前函数做用域外查找
    console.log(foo); // 2
})();

47 多域名存储网页资源

CDN缓存更方便
突破浏览器并发限制
减小没必要要的cookie，节省带宽
对于UGC的内容和主站隔离，防止没必要要的安全问题
数据做了划分，设置切到了不一样的物理集群，方便经过子域名分流

48 NodeJS适用场景

高并发
I/O密集
少许业务逻辑
海量长连接推送

中级前端知识点提要

中级前端知识点提要

1 Restful API

2 CommonJS/AMD/CMD/ES6 Module

2.1 CommonJS

2.2 AMD Asynchronous Module Definition(异步模块定义)

2.3 CMD Common Module Definition（通用模块定义）

2.4 ES6 Module

3 三大框架底层原理

3.1 Angular2+

3.2 Vue2+

3.3 React

4 跨域

4.1 简单请求

4.1.1 基本流程

4.1.2 withCredentials属性

4.2 非简单请求

4.3 与JSONP跨域的区别

5 同源策略

6 闭包

7 面向对象

8 继承与原型链

9 前端优化

10 浏览器兼容性

11 浏览器内核

12 经典算法和原理

13 TCP/IP协议

14 HTTP协议

15 OSI模型

16 MVC设计模式

17 MVVM设计模式

18 分层架构模式

19 三次握手

20 call & apply

21 Map

22 this

23 undefined和null区别

24 HTML5之websocket

25 HTML5之history

26 HTML5之canvas

27 HTML5之picture

28 HTML5之localStorage和sessionStorage

29 W3C标准

30 自动化发布，前端自动化

31 前端工程化

32 微信小程序

33 前端架构设计

34 ES6/ES7经常使用

35 cookie操做

36 函数和变量的预解析

37 CSS3新增伪类

38 HTML5遗弃的元素

39 event对象

40 XMLHttpRequest基础

41 Ajax基础

42 src和href属性

43 Web应用实现推送的方式

44 CSS盒模型

45 js做用域

46 js解析

47 多域名存储网页资源

48 NodeJS适用场景

42 `src`和`href`属性