javascript框架學習計劃

前言：終於要作這個計劃了，前端框架千千萬，毫不能一頭扎進去盲目開始，本片文章總結一下目前前各類端框架，以及它們的用途主要解決什麼問題，而後最後作出學習計劃。但願入了前端坑的同窗們能夠有所幫助。

1.庫與框架

什麼是庫，什麼是框架？
庫：是針對特定問題的一個解答，具備專業針對性；不控制應用程序流程的流程；被動的被調用
框架：控制反轉；決定應用程序生命週期；通常會集成大量的庫

是否是框架都集成了大量的庫呢？其實這麼理解是不對的，框架與庫最大的區別就是控制反轉，框架就像程序的骨架，擁有默認的有意義的行爲，知道在特定狀況下該作什麼樣的事情，在適當的時候框架會調用你的代碼，從而整個程序實現你想實現的功能。可是庫與框架很難嚴格區分，因此統一稱爲解決方案。

2.前端開發中常見問題

既然庫和框架都是解決方案，那麼它們都是要解決前端開發中的特定問題，目前前端開發中主要有如下7個方面的問題，各類解決方案也是針對這些問題被開發出來的。

1. DOM操做 （DOM）

2. 通訊 （Communication）

3. 工具庫 （Utility）

4. 模版技術 （Templating）

5. 組件 （Component）

6. 路由 （Routing）

7. 架構 （Architecture）

why？

1. 開發效率

2. 可靠性：瀏覽器兼容性／測試覆蓋

3. 更好的配套：文檔／DEMO／工具

4. 設計的更好

5. 專業性

HOw

1. 開放：基於一個外部模塊系統，自由組合

2. 半開放：基於一個定製過的模塊系統，內部－外部的解決方案共存

3. 大教堂：深度定製的模塊系統，不多引入外部模塊

3.DOM操做的解決方案

DOM主要有如下幾點：Selector／Manipulation／Event／Animation
選擇器／DOM操做／事件（簡化事件綁定，提供事件代理之類）／動畫

職責：

1. 提供便利的DOM查詢／操做／移動 等操做

2. 提供事件綁定／事件代理等支持

3. 瀏覽器特性檢測，UserAgent偵測

4. 提供節點屬性、樣式、類名等操做

5. 全部以上操做實現目標平臺的跨瀏覽器支持

相關的框架：

1. JQuery

2. zepto.js

3. MOOTOOLS

JQuery：定義了兩義型的接口，可讀性不夠
MOOTOOLS：嚴格遵循Commond－Query，沒有兩翼型接口，直接擴展了DOM原生對象：Element.propotype.inject = function(){}

三者對比：

1. MooTools：大小：96K，兼容性：IE6+；優勢：概念清晰，沒有包裝對象；接口設計優秀；源碼清晰易懂；不侷限於DOM和Ajax。缺點：擴展了原生對象（致命）；社區衰弱

2. JQuery：大小：94K，兼容性：IE6+；優勢：社區強大，普及率高；包裝對象，不污染原生；基本上專一於DOM； 缺點：包裝對象，容易混淆；接口兩義性；社區水平層次不齊，容易踩坑。

3. Zepto.js:大小：25K，兼容性：IE10+；優勢：小，啓動快；接口與JQuery兼容；提供了簡單的手勢；缺點：與JQuery不能作到100%對應，支持的瀏覽器少，功能較弱。

建議：

1. MooTools：最好的源碼閱讀學習的資源，小型項目能夠用

2. JQuery：最穩妥的方案

3. Zepto.js：移動端的備選品

DOM專業領域解決方案：

1. 手勢：Hammer.js:大小：12k；常見手勢封裝，包括tap，hold，transform，swipe等等，並支持自定義擴展。

2. 局部滾動：iscroll.js：大小：13k；移動端position：fix＋overflow：scroll的救星

3. 高級動畫：Velocity.js:大小：12k；複雜動畫序列實現，不只限於dom

4. 視頻播放：vedio.js:大小：101k，相似原生vedio標籤的使用方式，對低級瀏覽器回退到flash播放。

4.通訊問題解決方案

職責：

1. 處理與服務器的請求與響應

2. 預處理請求數據／響應數據Error／Success的判斷封裝

3. 多種類型請求，統一接口（xmlHttpRequest1/2，JSONP，Iframe）

4. 處理瀏覽器兼容性

相關框架：
JQuery和前面的框架基本都有通訊的支持，可是推薦兩個備選選擇：

1. Reqwest：大小：3.4k；優勢：JSONP支持；穩定／兼容IE6+；CROS跨域； Promise／A支持

2. qwest：大小：2.5k；優勢：更小的代碼量；支持XmlHttpRequest2；CORS跨域；支持搞基數據類型，如：ArrayBuffer，Blob和FormData

3. socket.io:實時性；支持二進制數據流；智能自動的回退支持（非二進制數據流）；多種後端語言支持

5.工具包框架

職責：

1. 彌補js語言原生不提供的功能。

2. 方法門面包裝，使其更易於使用（某些方法比較繁瑣，包裝後方便使用）

3. 異步隊列／流程控制等等

相關框架；

1. es5-shim（部分支持）：大小53k；提供語言墊片；Github：es－shims／es5-shim

2. es6-shim：大小38k；Github：paulmillr／es6-shim

3. underscore：大小：16.5k；兼容IE6+

4. Lodash：大小：50k；兼容IE6+；是underscore的高性能版本，方法大部分是runtime編譯出來

6.模版技術

基於字符串的模版

經過字符串生成DOM以後就再也不變化，DOM無關，（解析到DOM時間很快），安全性差：用到innerHTML
解決方案：dustjs；hogan（mustache實現之一）；dot.js(體小速快)

基於DOM的模版

能夠動態修改更新，語法要寫在節點上；初始化時間慢
解決方案：Angularjs；Vuejs； Knockout

活動模版技術

能夠動態更新，DOM無關，實現局部更新，安全性高（不使用innerHTML）
解決方案：Regularjs；Ractivejs；htmlbar

7.組件

職責：

1. 提供基礎組件CSS支持

2. 提供經常使用組件：Slider，Modal

3. 提供聲明式的調用方式（在HTML中綁定屬性初始化組件）

解決方案（基於JQuery）：

1. Bootstrap

2. Foundation
   相同點：Mobile First的流式柵格，可定製UI，都是基於JQuery，MIT開源協議。

解決方案（非JQuery版本）

1. Knockout－Bootstrap

2. UI Bootstrap

3. React Bootstrap

8.路由

職責：

1. 監聽URL變化，並通知註冊的模塊

2. 經過javascript進行主動跳轉

3. 歷史管理

4. 對目標瀏覽器兼容性的支持

解決方案：

1. page.js:大小：6.2k；兼容IE8+；

2. Director.js:大小：10k，兼容IE6+；能夠先後端使用一套規則來定義路由

3. stateman：10k；兼容IE6+；用於處理深層複雜路由的獨立路由庫。

4. crossroad.js： 大小：7.5k；老牌Routing庫，API定義繁瑣，兩年未更新。

9.架構（解耦）

MVC／MVVM／MV＊

職責：

1. 提供一種範式幫助（強制）開發者進行模塊解耦

2. 視圖與模型分離

3. 更容易進行單元測試

4. 更容易實現應用程序的擴展

例子：
MVVM爲例

1. Model：數據實體，用於記錄應用程序的數據

2. View：展現友好的界面，它是數據的定製反映，它包含樣式結構定義以及vm享有的聲明式數據、事件綁定

3. ViewModel：view和model的粘合劑，它經過綁定、事件與view交互，並能夠調用Sevice處理數據持久化，固然也能經過數據綁定將Model的變更更新到View中

10.經常使用網站介紹

http://www.javascripting.com/
http://www.javascriptoo.com/
http://microjs.com