前端相關片斷整理——持續更新

更好閱讀 移步這裏

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

持續更新，歡迎交流~