資訊專欄INFORMATION COLUMN
摘要：前言終于要做這個計劃了，前端框架千千萬，絕不能一頭扎進去盲目開始，本片文章總結一下目前前各種端框架，以及它們的用途主要解決什么問題，然后最后做出學習計劃。希望入了前端坑的同學們可以有所幫助。但是庫與框架很難嚴格區分，所以統一稱為解決方案。
前言：終于要做這個計劃了，前端框架千千萬，絕不能一頭扎進去盲目開始，本片文章總結一下目前前各種端框架，以及它們的用途主要解決什么問題，然后最后做出學習計劃。希望入了前端坑的同學們可以有所幫助。
1.庫與框架什么是庫，什么是框架？
庫：是針對特定問題的一個解答，具有專業針對性；不控制應用程序流程的流程；被動的被調用
框架：控制反轉；決定應用程序生命周期；一般會集成大量的庫
是不是框架都集成了大量的庫呢？其實這么理解是不對的，框架與庫最大的區別就是控制反轉，框架就像程序的骨架，擁有默認的有意義的行為，知道在特定情況下該做什么樣的事情，在適當的時候框架會調用你的代碼，從而整個程序實現你想實現的功能。但是庫與框架很難嚴格區分，所以統一稱為解決方案。
既然庫和框架都是解決方案，那么它們都是要解決前端開發中的特定問題，目前前端開發中主要有以下7個方面的問題，各種解決方案也是針對這些問題被開發出來的。
DOM操作 （DOM）
通信 （Communication）
工具庫 （Utility）
模版技術 （Templating）
組件 （Component）
路由 （Routing）
架構 （Architecture）
why？
開發效率
可靠性：瀏覽器兼容性／測試覆蓋
更好的配套：文檔／DEMO／工具
設計的更好
專業性
HOw
開放：基于一個外部模塊系統，自由組合
半開放：基于一個定制過的模塊系統，內部－外部的解決方案共存
大教堂：深度定制的模塊系統，很少引入外部模塊
3.DOM操作的解決方案DOM主要有以下幾點：Selector／Manipulation／Event／Animation
選擇器／DOM操作／事件（簡化事件綁定，提供事件代理之類）／動畫
職責：
提供便利的DOM查詢／操作／移動 等操作
提供事件綁定／事件代理等支持
瀏覽器特性檢測，UserAgent偵測
提供節點屬性、樣式、類名等操作
所有以上操作實現目標平臺的跨瀏覽器支持
相關的框架：
JQuery
zepto.js
MOOTOOLS
JQuery：定義了兩義型的接口，可讀性不夠
MOOTOOLS：嚴格遵循Commond－Query，沒有兩翼型接口，直接擴展了DOM原生對象：Element.propotype.inject = function(){}
三者對比：
MooTools：大小：96K，兼容性：IE6+；優點：概念清晰，沒有包裝對象；接口設計優秀；源碼清晰易懂；不局限于DOM和Ajax。缺點：擴展了原生對象（致命）；社區衰弱
JQuery：大小：94K，兼容性：IE6+；優點：社區強大，普及率高；包裝對象，不污染原生；基本上專注于DOM； 缺點：包裝對象，容易混淆；接口兩義性；社區水平層次不齊，容易踩坑。
Zepto.js:大小：25K，兼容性：IE10+；優點：小，啟動快；接口與JQuery兼容；提供了簡單的手勢；缺點：與JQuery不能做到100%對應，支持的瀏覽器少，功能較弱。
建議：
MooTools：最好的源碼閱讀學習的資源，小型項目可以用
JQuery：最穩妥的方案
Zepto.js：移動端的備選品
DOM專業領域解決方案：
手勢：Hammer.js:大小：12k；常見手勢封裝，包括tap，hold，transform，swipe等等，并支持自定義擴展。
局部滾動：iscroll.js：大小：13k；移動端position：fix＋overflow：scroll的救星
高級動畫：Velocity.js:大小：12k；復雜動畫序列實現，不僅限于dom
視頻播放：vedio.js:大小：101k，類似原生vedio標簽的使用方式，對低級瀏覽器回退到flash播放。
4.通信問題解決方案職責：
處理與服務器的請求與響應
預處理請求數據／響應數據Error／Success的判斷封裝
多種類型請求，統一接口（xmlHttpRequest1/2，JSONP，Iframe）
處理瀏覽器兼容性
相關框架：
JQuery和前面的框架基本都有通信的支持，但是推薦兩個備選選擇：
Reqwest：大小：3.4k；優點：JSONP支持；穩定／兼容IE6+；CROS跨域； Promise／A支持
qwest：大小：2.5k；優點：更小的代碼量；支持XmlHttpRequest2；CORS跨域；支持搞基數據類型，如：ArrayBuffer，Blob和FormData
socket.io:實時性；支持二進制數據流；智能自動的回退支持（非二進制數據流）；多種后端語言支持
5.工具包框架職責：
彌補js語言原生不提供的功能。
方法門面包裝，使其更易于使用（某些方法比較繁瑣，包裝后方便使用）
異步隊列／流程控制等等
相關框架；
es5-shim（部分支持）：大小53k；提供語言墊片；Github：es－shims／es5-shim
es6-shim：大小38k；Github：paulmillr／es6-shim
underscore：大小：16.5k；兼容IE6+
Lodash：大小：50k；兼容IE6+；是underscore的高性能版本，方法大部分是runtime編譯出來
6.模版技術 基于字符串的模版通過字符串生成DOM之后就不再變化，DOM無關，（解析到DOM時間很快），安全性差：用到innerHTML
解決方案：dustjs；hogan（mustache實現之一）；dot.js(體小速快)
可以動態修改更新，語法要寫在節點上；初始化時間慢
解決方案：Angularjs；Vuejs； Knockout
可以動態更新，DOM無關，實現局部更新，安全性高（不使用innerHTML）
解決方案：Regularjs；Ractivejs；htmlbar
職責：
提供基礎組件CSS支持
提供常用組件：Slider，Modal
提供聲明式的調用方式（在HTML中綁定屬性初始化組件）
解決方案（基于JQuery）：
Bootstrap
Foundation
相同點：Mobile First的流式柵格，可定制UI，都是基于JQuery，MIT開源協議。
解決方案（非JQuery版本）
Knockout－Bootstrap
UI Bootstrap
React Bootstrap
8.路由職責：
監聽URL變化，并通知注冊的模塊
通過javascript進行主動跳轉
歷史管理
對目標瀏覽器兼容性的支持
解決方案：
page.js:大小：6.2k；兼容IE8+；
Director.js:大小：10k，兼容IE6+；可以前后端使用一套規則來定義路由
stateman：10k；兼容IE6+；用于處理深層復雜路由的獨立路由庫。
crossroad.js： 大小：7.5k；老牌Routing庫，API定義繁瑣，兩年未更新。
9.架構（解耦）MVC／MVVM／MV＊
職責：
提供一種范式幫助（強制）開發者進行模塊解耦
視圖與模型分離
更容易進行單元測試
更容易實現應用程序的擴展
例子：
MVVM為例
Model：數據實體，用于記錄應用程序的數據
View：展示友好的界面，它是數據的定制反映，它包含樣式結構定義以及vm享有的聲明式數據、事件綁定
ViewModel：view和model的粘合劑，它通過綁定、事件與view交互，并可以調用Sevice處理數據持久化，當然也能通過數據綁定將Model的變動更新到View中
10.常用網站介紹http://www.javascripting.com/
http://www.javascriptoo.com/
http://microjs.com
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79908.html
摘要：只是抱怨事物的狀態并沒有什么卵用，我打算給你一個實實在在的一步一步征服生態圈的學習計劃。好消息是，這剛好是本學習計劃關注的問題。比如，一個不錯的出發點是的課。是一個由創建和開源的庫。我個人推薦的初學者課程。而個人項目是嘗試新技術的完美時機。 本文轉載自：眾成翻譯譯者：網絡埋伏紀事鏈接：http://www.zcfy.cc/article/1617原文：https://medium.fr...
摘要：前言自從上次在掘金發布年山地人的前端完整自學計劃講一個站主山地人的天前端自學故事以來，一眨眼山地人老哥在站做主已經有天了。所以這個體系里的一些框架包括也是山地人年自學計劃的一部分。月底，山地人老哥開啟了的兩個專題。 前言 自從上次在掘金發布【2019年山地人的前端完整自學計劃——講一個B站UP主山地人的40天前端自學故事】 以來，一眨眼山地人老哥在B站做Up主已經有85天了。 時隔一個...
摘要：是今年一定要學的東西這兩年頁面上用的三方組件多了，寫的少了，的一些屬性不太記得了，針對的學習計劃有兩個參照的樣式進行學習參照的組件樣式，學習如何處理樣式與組件之間的關系，規范自己的寫法。 磕磕絆絆工作有幾年了，前端界幾乎每天都有新名詞，令人眼花繚亂，目瞪狗呆。這兩年一直在外包工作，業務寫的多些，對js的基礎掌握的還不是很到位。最近深感技術嗅覺遲鈍，雖然平時也有看書學習，更多的時候都是斷...
摘要：年，軟件開發界發生了很多變化。六數據存儲是一個關系型數據庫管理系統，由瑞典公司開發，目前屬于旗下公司。最流行的關系型數據庫管理系統，在應用方面是最好的，關系數據庫管理系統應用軟件之一。七是最新的修訂版本，年月由萬維網聯盟完成標準制定。 2015年，軟件開發界發生了很多變化。有很多流行的新語言發布了，也有很多重要的框架和工具發布了新版本。下面有一個我們覺得最重要的簡短清單，同時也有我們覺...
摘要：年，軟件開發界發生了很多變化。六數據存儲是一個關系型數據庫管理系統，由瑞典公司開發，目前屬于旗下公司。最流行的關系型數據庫管理系統，在應用方面是最好的，關系數據庫管理系統應用軟件之一。七是最新的修訂版本，年月由萬維網聯盟完成標準制定。 2015年，軟件開發界發生了很多變化。有很多流行的新語言發布了，也有很多重要的框架和工具發布了新版本。下面有一個我們覺得最重要的簡短清單，同時也有我們覺...
閱讀 1823·2021-09-28 09:46
閱讀 3143·2019-08-30 14:22
閱讀 1878·2019-08-26 13:36
閱讀 3343·2019-08-26 11:32
閱讀 2081·2019-08-23 16:56
閱讀 1151·2019-08-23 16:09
閱讀 1303·2019-08-23 12:55
閱讀 2148·2019-08-23 11:44
