前端知识理解的笔记

html语义化的做用

• 根据内容的结构使用适当的标签，便于开发者阅读和代码的结构优雅
• 语义化标签会让网络爬虫和机器更好的解析页面，从而暴露给爬虫更多的有效数据。有利于seo
• 语义化标签提升用户体验，好比title和alt属性，label标签的表单控制
• 方便其余设备解析渲染网页，屏幕阅读器
• 便于维护和开发。

react的diff算法理解

react利用虚拟dom和diff算法，进行新dom和旧dom的差别计算，再进行对应dom片断的真实dom更新，其算法有三个级别：tree（树）、component（组件）、element（元素），性能依次加强。

• tree级别的diff算法，顾名思义，对一棵树进行diff算法，react必须检索整棵树，而后计算出差别片断，react利用先添加后删除的实现方法，更新整个dom，tree级别的diff影响性能，所以咱们尽可能避免在页面上有dom树层面的改动
• component级别的diff算法，react的dom片断单位就是组件，定义一个class，就是定义了一个虚拟dom组件。组件进行diff算法，若是新的dom与旧的dom的组件不是同一个class，那么react认为其没法复用，直接删除旧组件，添加新的组件。由于咱们定义的每个class都有不一样的dom结构，react不须要去检索dom结构。
• element级别的diff算法，element级别的算法，同一等级的元素须要有惟一的key进行关联，让react能够新旧dom进行匹配。此级别中，react有三种行为：
  • 　　新的element不存在于旧dom中，插入新element
  • 　　旧element不存在新dom中，删除旧element
  •       新element存在旧dom，顺序发生改变，则进行移动dom

　　　在dom更新时，react会遍历一遍新的dom判断与旧dom的差别，diff算法的巧妙就在于，若是element只是位置发生了变化，若是进行删除增长的方法，影响性能。所          以react制定了一个规则去将旧dom排序。

　　　 排序规则以下： 若是element在旧dom中的位置比新dom中的位置小，就将element右移，若是element在旧dom中的位置比新dom中的位置同样或者大，不改变它　　    的位置， react只须要改动前者，就会将位置差别的dom排列完成。

　　　 好比一个dom列表为  A B C D ， 将要渲染的dom列表变成了 B A D C ， react会将B右移， D右移。从不会将A、C左移的操做。

react中的key的重要做用

在遍历插入组件时，咱们常会设置一个key值给组件，这即是react的diff算法时须要的key，若是没有了这个key值，react无法进行新dom与旧dom中element的匹配，从而无法进行判断element是否只是位置发生了变化，所以只能进行删除和插入的操做，对dom的删除插入，所以下降性能。

vue和angular的双向数据绑定的实现

1. angular的双向数据绑定 - 脏检查机制

angular的$scope挂在了全部的双向数据绑定的属性，在页面渲染完毕后，angular会将全部的可能改变数据模式的行为进行监听，如事件、ajax请求、timeout等。一旦有这些行为须要触发，angular在每个行为完成后都会进行$digist循环，来进行脏值检查，若是有新的值，那么angular就发布更新，使得响应到视图。

因为这个特性，所以咱们用原生js或者jqeury等外部的行为改变数据模型的值，angular并没有法检测，所以没法进入脏值检查阶段，这时候咱们就须要$apply方法手动进入$digist循环，它会检查全部监听的内容。

2. vue的双向数据绑定  - 数据劫持

vue的双向数据绑定离不开Object.defineProperty方法，此方法没法兼容ie9之前，所以vue不兼容老版本ie浏览器。

vue在实例化过程当中，保存了全部data中的属性，而且给每个属性定义监听器，在定义监听器同时，会建立一个发布器，该发布器会添加订阅者到该属性下，当某一时刻，数据模型发生了改变，该发布器会触发响应，通知全部订阅者引发更新，经过订阅/发布模式来进行交互。

Promise的语法笔记

Promise归入了es6标准以前，angular、jquery等的类Promise的实现，并不是标准的 Promise，这里记录一下Promise的标准语法

1. Promise对象

var p = new Promise(function (resolve, reject) {
   setTimeout(function () {
       var ra = Math.random()
       ra < 0.5 ? resolve() : reject()  
    }, 1000)
})

p.then(function () {
  console.log('成功')
}, function () {
  console.log('失败')
})

new Promise() 构造函数创建一个Promise对象

其最多见的就是then方法，then方法可接收3个函数，通常传递2个，最多见传递1个。

分别为 成功回调、失败回调、完成回调

若是只想定义失败回调能够这样定义

var p = new Promise(function (resolve, reject) {
  // ...
})

p.then(null, function () {
  console.log('失败')
})

promise对象还有一个方法是catch，捕捉异常。利用这个方法改进上面方法

var p = new Promise(function (resolve, reject) {
  // ...
})

p.catch(function (err) {
  console.log('失败')
})

catch来处理全部的失败状况。

then方法能够多个调用，return不会终止then方法继续调用，若是须要终止then方法的往下执行，throw抛出异常。

var p = new Promise(function (resolve, reject) {
  // ...
})

p.then(function () {
  console.log('第一次then')
  //  未成功阻止
  return false
}).then(function (falg) {
  console.log('第二次then, falg = ' + flag)  // false
  throw new Error('终止')
}).then(function (){
  console.log('执行不到')
}).catch(function () {
  console.log('失败')
})

then方法中全部的return值都会传递给下一个then，就像一个加工流水线，一个一个往下传。一个then中执行一类操做。

2. 返回新的Promise对象

then方法中能够返回新的promise对象

p.then(function (res) {
  console.log('第一个Promise')
  //  未成功阻止
  return new Promise(function () {
    // ...
  })
}).then(function (res) {
  console.log('第二个Promise对象')

}).catch(function () {
  console.log('失败')
})

第一个then中return的Promise内，resolve的值会传递给第二个then的res参数。

3. Promise.all 并行执行全部promise对象

var arr = []
arr[0] = new Promise(function (resolve, reject) {
  // ...
})
arr[1] = new Promise(function (resolve, reject) {
  // ...
})

Promise.all(arr).then(function (resArr) {
  // ..
}).catch(function (err) {
  // ..
})

执行全部Promise对象，resArr保存着相对应的结果

4. Promise.resolve()

Promise.resolve().then(function () {
  console.log('开始')
}).catch(function (err) {
  // ..
})

console.log('最后')

//  最后 
//  开始

Promise.resolve方法直接返回一个发布成功的Promise，此方法用来将then方法延迟，如上。then方法会延迟到当前函数栈调用的最后，所以改变了console.log的顺序