前端知識理解的筆記

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的順序