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