前端相关片断整理——持续更新

更好阅读 移步这里

1. ES6

• 箭头函数
• 字符串模板
• generators(生成器)
• async/await
• 解构赋值
• class
• 引入module模块的概念

1.1. 箭头函数：

• 函数内的this对象，是定义时所在的对象，不是使用时所在的对象
• 不可当构造函数
• 用rest代替argument
• this指向通常可变，但在箭头函数中固定
• 简单，单行，不会复用的函数建议使箭头函数
  复杂，行多，使用传统

1.2. promise

解决异步回调多层嵌套的问题

• 是一个容器；
  包含某个将来结束的事件
• 是一个对象：
  从它可获取异步操做的消息

1. pending 进行中
2. resolved 已完成
3. rejected 已失败

特色

• 状态不受外界影响，只有事件结果决定
• 状态改变不会再变

缺点：

• 没法取消promise，一旦创建当即执行，中途没法撤回
• 无回掉函数的话，错误不反应到外部
• pending时，状态没法得知

Promise.all

接收 Promise 数组为参数，将多个Promise实例，包装成一个新的Promise实例，全部 resolve ，返回全部值

在不一样的接口请求数据而后拼合成本身所需的数据，一般这些接口之间没有关联（例如不须要前一个接口的数据做为后一个接口的参数）

var p = Promise.all([p1, p2, p3]);

p的状态由p一、p二、p3决定，分红两种状况:

• 只有p一、p二、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p一、p二、p3的返回值组成一个数组，传递给p的回调函数。
• 只要p一、p二、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race
它一样接收一个数组，不一样的是只要该数组中的 Promise 对象的状态发生变化（不管是 resolve 仍是 reject）该方法都会返回

async/await

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来

• 是写异步代码的新方式，之前的方法有回调函数和Promise。
• 是基于Promise实现的，它不能用于普通的回调函数。
• 与Promise同样，是非阻塞的。
• 使得异步代码看起来像同步代码，这正是它的魔力所在。

1.3. interator

是一种接口，为全部数据结构提供一种统一的访问机制，即for...of 循环

做用：

• 一是为各类数据结构，提供一个统一的、简便的访问接口；
• 二是使得数据结构的成员可以按某种次序排列；
• 三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

interator遍历过程：

1. 建立一个只针对象，指向当前数据结构的起始位置（遍历器对象本质是指针对象）
2. 调用指针对象的next方法

使用场合：

• 解构赋值
• 扩展运算符（...）
• yield*

for...in

• 为遍历对象设计，不适用数组
• key
• 以字符串做为键名
• 遍历数字键以及手动添加的其余键
• 可能会以任意顺序遍历键名

for...of

• 语法简洁，无以上缺点
• 循环value
• 不一样用于foreach方法，能够与break，continue，return配合使用
• 提供了遍历全部数据结构的统一操做接口，循环普通对象结合 bject.keys() 搭配使用
• 可自动遍历generator函数生成的iterator对象
• 除了遍历数组元素之外,还会遍历自定义属性

1.4. generator 函数

一种异步解决方案（一种封装了多个内部状态的状态机）

• 返回的不是函数运行结果，而是指向内部状态的指针对象
• 调用next方法，从中止地方开始执行，移向下一个状态

1.5. yield 与 return

类似：都能返回紧跟在语句后面那个表达式的值
区别：记忆功能，执行次数，返回值数量

1.6. 回调函数

JavaScript对异步编程的实现

1.7. ES6 Object.assign

将源对象（source）的全部可枚举属性，复制到目标对象（target）

Object.assign(target, source1, source2);
后面属性覆盖前面同名属性

• 一个参数时，返回该参数
• 参数不是对象，转成对象（undefined，null会报错），若为源对象位置，则跳过
• 可用来操做数组，将数组视为对象
• 浅拷贝非深拷贝（若源对象的有对象属性值，则拷贝的是该引用）

用途：

• 为兑现添加属性/方法
• 克隆对象
• 合并对象
• 为属性指定默认值

2. 通讯

2.1. JSONP

被包含在一个回调函数中的 json
核心是： 动态添加script标签调用服务器提供的js脚本

2.2. cors

使用自定义的http头部让浏览器与服务器进行沟通，肯定该请求是否成功
核心：由服务器发送一个响应标头

2.3. web安全

1） 将重要的cookie标记为http only
2） 只容许用户输入指望值
3） encode
4） 过滤或移除特殊标签
5） 过滤JavaScript事件标签

3. 架构

3.1. 模块化

原理： 将复杂系统分解为代码结构更合理，可维护性更高，可管理的模块
目的： 只需完成本身的业务代码
发展过程：

1. commonjs
   模块为单独的文件，require，同步使用
   nodejs主要用于服务器进程，加载内容在本地磁盘
   异步状况：浏览器环境中须要从服务器加载模块，须要采用异步模式
2. AMD（Asynchronous Module Definition）
   • 容许输出模块兼容commonjs规范
   • require([module], callback);
   • 模块加载与调用不一样步，浏览器不会发生假死
   • requirejs curljs
3. CMD
   seajs推广中对模块定义的产出

CMD与AMD区别：

• amd推崇依赖前置（定义模块时申明其依赖的模块），cmd推崇依赖就近（用时再require）
• amd的api默认一当多，cmd推崇职责单一（amd中require分全局和局部）

requirejs 与 seajs 分析：

1. 定位，requirejs想成为浏览器端的模块加载器，也想成为rhino/node等环境的模块加载器
   seajs专一web浏览器端，经过node扩展方式方便跑在node端
2. 标准，requirejs醉醺amd规范，seajs遵循cmd，api不一样
3. 理念，requirejs尝试让第三方类库修改自身来支持requirejs，seajs不强推，采用资助封装方式，已较成熟封装策略
4. 质量，require<seajs
5. 插件

更多了解：

• AMD && CMD

3.2. react

用于构建用户界面的JavaScript库，主要用于构建ui，将普通的DOM以数据结构的形式展示出来

永远只须要关心数据总体，两次数据之间的UI如何变化，则彻底交给框架去作，使用React大大下降了逻辑复杂性
Virtual DOM并无彻底实现DOM，Virtual DOM最主要的仍是保留了Element之间的层次关系和一些基本属性

基于React进行开发时全部的DOM构造都是经过虚拟DOM进行，每当数据变化时，React都会从新构建整个DOM树，而后React将当前整个DOM树和上一次的DOM树进行对比，获得DOM结构的区别，而后仅仅将须要变化的部分进行实际的浏览器DOM更新

虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操做的仅仅是Diff部分，于是能达到提升性能的目的。这样，再也不须要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只须要关心在任意一个数据状态下，整个界面是如何Render的

设计特色：

• 变换：react核心认为ui只是把数据经过映射关系变换成另外一种形式的数据——函数
• 组合：将两个或多个不一样的抽象合并为一个
• 组件化：推荐以组件的方式思考ui构成，将小组件经过组合或嵌套构成大组件

组件特征：

• 可组合
• 可重用
• 可维护

jsx语法：
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它容许 HTML 与 JavaScript 的混写

生命周期：
组件的生命周期分红三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被从新渲染
• Unmounting：已移出真实 DOM

React 为每一个状态都提供了两种处理函数，will 函数在进入状态以前调用，did 函数在进入状态以后调用，三种状态共计五种处理函数:

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

两种特殊状态的处理函数：

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：判断是否从新渲染时调用

3.3. angular

特性：

• MVVM
• 模块化
• 自动化双向数据绑定
• 语义化标签
• 依赖注入

3.4. vue

• 父-子
  props
• 子-父
  on/emit
  
• 其余
  使用空的vue实例做为中央事件总线

3.5. angular与react之对比

• React 和 Angular 之间的巨大差别是 单向与双向绑定
• React 和 Vue 都使用了虚拟 DOM —— 没必要在每一个元素每次变化时从新渲染整个巨大的table
• 若是应用时常要处理大量的动态数据集，并以相对简便和高性能的方式对大型数据表进行显示和变动，因为双向数据绑定须要监听每个可变元素, 数据量变大就会带来显著的性能问题，React是至关不错的选择。可是React不像AngularJS那样包含完整的功能，举例来讲，React没有负责数据展示的控制器

3.6. 软件架构

模式之间不一样 主要是 M与V 的数据传递的流程不一样

3.6.1. mvc

• View 传送指令到 Controller
• Controller 完成业务逻辑后，要求 Model 改变状态
• Model 将新的数据发送到 View，用户获得反馈

MVC 能够分红两种方式：

• 经过 View 接受指令，传递给 Controller
• 直接经过controller接受指令

3.6.2. MVP

• 各部分之间的通讯，都是双向的。
• View 与 Model 不发生联系，都经过 Presenter 传递。
• View 很是薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter很是厚，全部逻辑都部署在那里。

3.6.3. MVVM

• 用数据“绑定”的形式让数据更新的事件不须要开发人员手动去编写特殊用例，而是自动地双向同步。
• 数据绑定能够认为是Observer模式或者是Publish/Subscribe模式，原理都是为了用一种统一的集中的方式实现频繁须要被实现的数据更新问题。
• MVVM不只简化了业务与界面的依赖关系，还优化了数据频繁更新的解决方案

3.7. restful架构

Fielding将他对互联网软件的架构原则，定名为REST，即Representational State Transfer的缩写。我对这个词组的翻译是"资源的表现层状态转化"。

4. js

4.1. js垃圾回收与内存管理

各大浏览器一般用采用的垃圾回收有两种方法：标记清除、引用计数

4.1.1. 垃圾回收

自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程当中使用的内存
垃圾收集器会按期（周期性）找出那些不在继续使用的变量，而后释放其内存

• 标记清除
  1. 垃圾收集器在运行的时候会给存储在内存中的全部变量都加上标记
  2. 而后，它会去掉环境中的变量以及被环境中的变量引用的标记
  3. 而在此以后再被加上标记的变量将被视为准备删除的变量，缘由是环境中的变量已经没法访问到这些变量了
  4. 最后,垃圾收集器完成内存清除工做，销毁那些带标记的值，并回收他们所占用的内存空间
• 引用计数
  跟踪记录每一个值被引用的次数
  当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，若是包含对这个值引用的变量又取得了另一个值，则这个值的引用次数就减1，释放那些引用次数为0的值所占的内存。

function problem() {
    var objA = new Object();
    var objB = new Object();

    objA.someOtherObject = objB;
    objB.anotherObject = objA;
}

这个方式存在一个比较大的问题就是循环引用
能够手动切断他们的循环引用

myObj.element = null;
element.someObject =null;

4.1.2. 减小JavaScript中的垃圾回收

• 在初始化的时候新建对象，而后在后续过程当中尽可能多的重用这些建立好的对象。
• 另外还有如下三种内存分配表达式（可能不像new关键字那么明显了）：
  • {} （建立一个新对象）
  • [] （建立一个新数组）
  • function() {…} (建立一个新的方法，注意：新建方法也会致使垃圾收集！！)

4.1.3. 优化

1. 对象object优化
   • 避免使用new/{}来新建对象
   • cr.wipe(obj)—遍历此对象的全部属性，并逐个删除，最终将对象清理为一个空对象
     
2. 数组array优化
   js arr = []; //将原数组变成一小片内存垃圾 arr.length = 0 //清空数组

4.2. 闭包

特色：

• 函数
• 能访问另一个函数做用域中的变量

ES 6以前，Javascript只有函数做用域的概念，没有块级做用域。即外部是访问不到函数做用域中的变量。

总结

• 能够访问外部函数做用域中变量的函数
• 被内部函数访问的外部函数的变量能够保存在外部函数做用域内而不被回收---这是核心，后面咱们遇到闭包都要想到，咱们要重点关注被闭包引用的这个变量

4.3. 做用域链

为何闭包就能访问外部函数的变量呢

Javascript中有一个执行环境(execution context)的概念，它定义了变量或函数有权访问的其它数据，决定了他们各自的行为。每一个执行环境都有一个与之关联的变量对象，环境中定义的全部变量和函数都保存在这个对象中

当访问一个变量时，解释器会首先在当前做用域查找标示符，若是没有找到，就去父做用域找，直到找到该变量的标示符或者再也不存在父做用域了，这就是做用域链。

做用域链的顶端是全局对象。对于全局环境中的代码，做用域链只包含一个元素：全局对象

做用域链和原型继承：
有点相似，但又有点小区别：

• 若是去查找一个普通对象的属性时，在当前对象和其原型中都找不到时，会返回undefined
• 查找的属性在做用域链中不存在的话就会抛出ReferenceError

更多了解：

• 闭包中的this做用域

闭包的运用

• 匿名自执行函数
  有的函数只须要执行一次，其内部变量无需维护，执行后释放变量
• 实现封装/模块化代码
  变量做用域为函数内部，外部没法访问
  
• 实现面向对象中的对象
  这样不一样的对象(类的实例)拥有独立的成员及状态，互不干涉

优势：

• 可让一个变量常驻内存 (若是用的多了就成了缺点
• 避免全局变量的污染
• 私有化变量

缺点：

• 由于闭包会携带包含它的函数的做用域，所以会比其余函数占用更多的内存
• 引发内存泄露

4.4. 事件委托和this

4.4.1. 事件委托

由其它元素而非事件目标元素来响应事件产生的行为的思想。如用ul元素来处理其子元素li的事件。

事件冒泡： stopPropagation、stopImmediatePropagation、preventDefault

订阅发布
优势：减小监听器数量，改善性能
缺点：父容器的侦听器可能须要检查事件来选择正确的操做

4.4.2. this

this 关键字在JavaScript中的一种经常使用方法是指代码当前上下文

• 默认指向全局对象，其一般是window
• this老是表明它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
• 在严格模式下,没有直接调用者的函数中的this是 undefined
• 使用call,apply,bind绑定的,this指的是 绑定的对象

在异步编程中，this能够很容易改变过程当中一个功能操做。保持处理程序上下文的一个小技巧是将其设置到闭包内的一个变量，当在上下文改变的地方调用一个函数时，如setTimeout，你仍然能够经过该变量引用须要的对象。

箭头函数中的this

• 箭头函数没有本身的this, 它的this是继承而来
• 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window
• 箭头函数能够方便地让咱们在 setTimeout ,setInterval中方便的使用this

持续更新，欢迎交流~