成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript框架學(xué)習(xí)計(jì)劃

airborne007 / 2360人閱讀

摘要：前言終于要做這個(gè)計(jì)劃了，前端框架千千萬(wàn)，絕不能一頭扎進(jìn)去盲目開(kāi)始，本片文章總結(jié)一下目前前各種端框架，以及它們的用途主要解決什么問(wèn)題，然后最后做出學(xué)習(xí)計(jì)劃。希望入了前端坑的同學(xué)們可以有所幫助。但是庫(kù)與框架很難嚴(yán)格區(qū)分，所以統(tǒng)一稱為解決方案。

前言：終于要做這個(gè)計(jì)劃了，前端框架千千萬(wàn)，絕不能一頭扎進(jìn)去盲目開(kāi)始，本片文章總結(jié)一下目前前各種端框架，以及它們的用途主要解決什么問(wèn)題，然后最后做出學(xué)習(xí)計(jì)劃。希望入了前端坑的同學(xué)們可以有所幫助。

1.庫(kù)與框架

什么是庫(kù)，什么是框架？
庫(kù)：是針對(duì)特定問(wèn)題的一個(gè)解答，具有專業(yè)針對(duì)性；不控制應(yīng)用程序流程的流程；被動(dòng)的被調(diào)用
框架：控制反轉(zhuǎn)；決定應(yīng)用程序生命周期；一般會(huì)集成大量的庫(kù)

是不是框架都集成了大量的庫(kù)呢？其實(shí)這么理解是不對(duì)的，框架與庫(kù)最大的區(qū)別就是控制反轉(zhuǎn)，框架就像程序的骨架，擁有默認(rèn)的有意義的行為，知道在特定情況下該做什么樣的事情，在適當(dāng)?shù)臅r(shí)候框架會(huì)調(diào)用你的代碼，從而整個(gè)程序?qū)崿F(xiàn)你想實(shí)現(xiàn)的功能。但是庫(kù)與框架很難嚴(yán)格區(qū)分，所以統(tǒng)一稱為解決方案。

2.前端開(kāi)發(fā)中常見(jiàn)問(wèn)題

既然庫(kù)和框架都是解決方案，那么它們都是要解決前端開(kāi)發(fā)中的特定問(wèn)題，目前前端開(kāi)發(fā)中主要有以下7個(gè)方面的問(wèn)題，各種解決方案也是針對(duì)這些問(wèn)題被開(kāi)發(fā)出來(lái)的。

DOM操作 （DOM）

通信 （Communication）

工具庫(kù) （Utility）

模版技術(shù) （Templating）

組件 （Component）

路由 （Routing）

架構(gòu) （Architecture）

why？

開(kāi)發(fā)效率

可靠性：瀏覽器兼容性／測(cè)試覆蓋

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

設(shè)計(jì)的更好

專業(yè)性

HOw

開(kāi)放：基于一個(gè)外部模塊系統(tǒng)，自由組合

半開(kāi)放：基于一個(gè)定制過(guò)的模塊系統(tǒng)，內(nèi)部－外部的解決方案共存

大教堂：深度定制的模塊系統(tǒng)，很少引入外部模塊

3.DOM操作的解決方案

DOM主要有以下幾點(diǎn)：Selector／Manipulation／Event／Animation
選擇器／DOM操作／事件（簡(jiǎn)化事件綁定，提供事件代理之類）／動(dòng)畫(huà)

職責(zé)：

提供便利的DOM查詢／操作／移動(dòng) 等操作

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

瀏覽器特性檢測(cè)，UserAgent偵測(cè)

提供節(jié)點(diǎn)屬性、樣式、類名等操作

所有以上操作實(shí)現(xiàn)目標(biāo)平臺(tái)的跨瀏覽器支持

相關(guān)的框架：

JQuery

zepto.js

MOOTOOLS

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

三者對(duì)比：

MooTools：大?。?6K，兼容性：IE6+；優(yōu)點(diǎn)：概念清晰，沒(méi)有包裝對(duì)象；接口設(shè)計(jì)優(yōu)秀；源碼清晰易懂；不局限于DOM和Ajax。缺點(diǎn)：擴(kuò)展了原生對(duì)象（致命）；社區(qū)衰弱

JQuery：大?。?4K，兼容性：IE6+；優(yōu)點(diǎn)：社區(qū)強(qiáng)大，普及率高；包裝對(duì)象，不污染原生；基本上專注于DOM； 缺點(diǎn)：包裝對(duì)象，容易混淆；接口兩義性；社區(qū)水平層次不齊，容易踩坑。

Zepto.js:大小：25K，兼容性：IE10+；優(yōu)點(diǎn)：小，啟動(dòng)快；接口與JQuery兼容；提供了簡(jiǎn)單的手勢(shì)；缺點(diǎn)：與JQuery不能做到100%對(duì)應(yīng)，支持的瀏覽器少，功能較弱。

建議：

MooTools：最好的源碼閱讀學(xué)習(xí)的資源，小型項(xiàng)目可以用

JQuery：最穩(wěn)妥的方案

Zepto.js：移動(dòng)端的備選品

DOM專業(yè)領(lǐng)域解決方案：

手勢(shì)：Hammer.js:大?。?2k；常見(jiàn)手勢(shì)封裝，包括tap，hold，transform，swipe等等，并支持自定義擴(kuò)展。

局部滾動(dòng)：iscroll.js：大小：13k；移動(dòng)端position：fix＋overflow：scroll的救星

高級(jí)動(dòng)畫(huà)：Velocity.js:大小：12k；復(fù)雜動(dòng)畫(huà)序列實(shí)現(xiàn)，不僅限于dom

視頻播放：vedio.js:大?。?01k，類似原生vedio標(biāo)簽的使用方式，對(duì)低級(jí)瀏覽器回退到flash播放。

4.通信問(wèn)題解決方案

職責(zé)：

處理與服務(wù)器的請(qǐng)求與響應(yīng)

預(yù)處理請(qǐng)求數(shù)據(jù)／響應(yīng)數(shù)據(jù)Error／Success的判斷封裝

多種類型請(qǐng)求，統(tǒng)一接口（xmlHttpRequest1/2，JSONP，Iframe）

處理瀏覽器兼容性

相關(guān)框架：
JQuery和前面的框架基本都有通信的支持，但是推薦兩個(gè)備選選擇：

Reqwest：大小：3.4k；優(yōu)點(diǎn)：JSONP支持；穩(wěn)定／兼容IE6+；CROS跨域； Promise／A支持

qwest：大?。?.5k；優(yōu)點(diǎn)：更小的代碼量；支持XmlHttpRequest2；CORS跨域；支持搞基數(shù)據(jù)類型，如：ArrayBuffer，Blob和FormData

socket.io:實(shí)時(shí)性；支持二進(jìn)制數(shù)據(jù)流；智能自動(dòng)的回退支持（非二進(jìn)制數(shù)據(jù)流）；多種后端語(yǔ)言支持

5.工具包框架

職責(zé)：

彌補(bǔ)js語(yǔ)言原生不提供的功能。

方法門面包裝，使其更易于使用（某些方法比較繁瑣，包裝后方便使用）

異步隊(duì)列／流程控制等等

相關(guān)框架；

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

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

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

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

6.模版技術(shù) 基于字符串的模版

通過(guò)字符串生成DOM之后就不再變化，DOM無(wú)關(guān)，（解析到DOM時(shí)間很快），安全性差：用到innerHTML
解決方案：dustjs；hogan（mustache實(shí)現(xiàn)之一）；dot.js(體小速快)

基于DOM的模版

可以動(dòng)態(tài)修改更新，語(yǔ)法要寫(xiě)在節(jié)點(diǎn)上；初始化時(shí)間慢
解決方案：Angularjs；Vuejs； Knockout

活動(dòng)模版技術(shù)

可以動(dòng)態(tài)更新，DOM無(wú)關(guān)，實(shí)現(xiàn)局部更新，安全性高（不使用innerHTML）
解決方案：Regularjs；Ractivejs；htmlbar

7.組件

職責(zé)：

提供基礎(chǔ)組件CSS支持

提供常用組件：Slider，Modal

提供聲明式的調(diào)用方式（在HTML中綁定屬性初始化組件）

解決方案（基于JQuery）：

Bootstrap

Foundation
相同點(diǎn)：Mobile First的流式柵格，可定制UI，都是基于JQuery，MIT開(kāi)源協(xié)議。

解決方案（非JQuery版本）

Knockout－Bootstrap

UI Bootstrap

React Bootstrap

8.路由

職責(zé)：

監(jiān)聽(tīng)URL變化，并通知注冊(cè)的模塊

通過(guò)javascript進(jìn)行主動(dòng)跳轉(zhuǎn)

歷史管理

對(duì)目標(biāo)瀏覽器兼容性的支持

解決方案：

page.js:大?。?.2k；兼容IE8+；

Director.js:大小：10k，兼容IE6+；可以前后端使用一套規(guī)則來(lái)定義路由

stateman：10k；兼容IE6+；用于處理深層復(fù)雜路由的獨(dú)立路由庫(kù)。

crossroad.js： 大?。?.5k；老牌Routing庫(kù)，API定義繁瑣，兩年未更新。

9.架構(gòu)（解耦）

MVC／MVVM／MV＊

職責(zé)：

提供一種范式幫助（強(qiáng)制）開(kāi)發(fā)者進(jìn)行模塊解耦

視圖與模型分離

更容易進(jìn)行單元測(cè)試

更容易實(shí)現(xiàn)應(yīng)用程序的擴(kuò)展

例子：
MVVM為例

Model：數(shù)據(jù)實(shí)體，用于記錄應(yīng)用程序的數(shù)據(jù)

View：展示友好的界面，它是數(shù)據(jù)的定制反映，它包含樣式結(jié)構(gòu)定義以及vm享有的聲明式數(shù)據(jù)、事件綁定

ViewModel：view和model的粘合劑，它通過(guò)綁定、事件與view交互，并可以調(diào)用Sevice處理數(shù)據(jù)持久化，當(dāng)然也能通過(guò)數(shù)據(jù)綁定將Model的變動(dòng)更新到View中

10.常用網(wǎng)站介紹

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79908.html

相關(guān)文章

  • 一個(gè)治愈 JavaScript 疲勞的學(xué)習(xí)計(jì)劃

    摘要：只是抱怨事物的狀態(tài)并沒(méi)有什么卵用，我打算給你一個(gè)實(shí)實(shí)在在的一步一步征服生態(tài)圈的學(xué)習(xí)計(jì)劃。好消息是，這剛好是本學(xué)習(xí)計(jì)劃關(guān)注的問(wèn)題。比如，一個(gè)不錯(cuò)的出發(fā)點(diǎn)是的課。是一個(gè)由創(chuàng)建和開(kāi)源的庫(kù)。我個(gè)人推薦的初學(xué)者課程。而個(gè)人項(xiàng)目是嘗試新技術(shù)的完美時(shí)機(jī)。 本文轉(zhuǎn)載自：眾成翻譯譯者：網(wǎng)絡(luò)埋伏紀(jì)事鏈接：http://www.zcfy.cc/article/1617原文：https://medium.fr...

    jhhfft 評(píng)論0 收藏0

  • B站Up主-山地人-這位老哥2019年的前端自學(xué)計(jì)劃進(jìn)展如何？——講一個(gè)B站Up主自學(xué)前端85天的故

    摘要：前言自從上次在掘金發(fā)布年山地人的前端完整自學(xué)計(jì)劃講一個(gè)站主山地人的天前端自學(xué)故事以來(lái)，一眨眼山地人老哥在站做主已經(jīng)有天了。所以這個(gè)體系里的一些框架包括也是山地人年自學(xué)計(jì)劃的一部分。月底，山地人老哥開(kāi)啟了的兩個(gè)專題。 前言 自從上次在掘金發(fā)布【2019年山地人的前端完整自學(xué)計(jì)劃——講一個(gè)B站UP主山地人的40天前端自學(xué)故事】 以來(lái)，一眨眼山地人老哥在B站做Up主已經(jīng)有85天了。 時(shí)隔一個(gè)...

    cocopeak 評(píng)論0 收藏0

  • 19年一些微小的計(jì)劃

    摘要：是今年一定要學(xué)的東西這兩年頁(yè)面上用的三方組件多了，寫(xiě)的少了，的一些屬性不太記得了，針對(duì)的學(xué)習(xí)計(jì)劃有兩個(gè)參照的樣式進(jìn)行學(xué)習(xí)參照的組件樣式，學(xué)習(xí)如何處理樣式與組件之間的關(guān)系，規(guī)范自己的寫(xiě)法。 磕磕絆絆工作有幾年了，前端界幾乎每天都有新名詞，令人眼花繚亂，目瞪狗呆。這兩年一直在外包工作，業(yè)務(wù)寫(xiě)的多些，對(duì)js的基礎(chǔ)掌握的還不是很到位。最近深感技術(shù)嗅覺(jué)遲鈍，雖然平時(shí)也有看書(shū)學(xué)習(xí)，更多的時(shí)候都是斷...

    harriszh 評(píng)論0 收藏0

  • 2016年前端開(kāi)發(fā)學(xué)習(xí)計(jì)劃

    摘要：年，軟件開(kāi)發(fā)界發(fā)生了很多變化。六數(shù)據(jù)存儲(chǔ)是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，由瑞典公司開(kāi)發(fā)，目前屬于旗下公司。最流行的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，在應(yīng)用方面是最好的，關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)應(yīng)用軟件之一。七是最新的修訂版本，年月由萬(wàn)維網(wǎng)聯(lián)盟完成標(biāo)準(zhǔn)制定。 2015年，軟件開(kāi)發(fā)界發(fā)生了很多變化。有很多流行的新語(yǔ)言發(fā)布了，也有很多重要的框架和工具發(fā)布了新版本。下面有一個(gè)我們覺(jué)得最重要的簡(jiǎn)短清單，同時(shí)也有我們覺(jué)...

    asoren 評(píng)論0 收藏0

  • 2016年前端開(kāi)發(fā)學(xué)習(xí)計(jì)劃

    摘要：年，軟件開(kāi)發(fā)界發(fā)生了很多變化。六數(shù)據(jù)存儲(chǔ)是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，由瑞典公司開(kāi)發(fā)，目前屬于旗下公司。最流行的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，在應(yīng)用方面是最好的，關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)應(yīng)用軟件之一。七是最新的修訂版本，年月由萬(wàn)維網(wǎng)聯(lián)盟完成標(biāo)準(zhǔn)制定。 2015年，軟件開(kāi)發(fā)界發(fā)生了很多變化。有很多流行的新語(yǔ)言發(fā)布了，也有很多重要的框架和工具發(fā)布了新版本。下面有一個(gè)我們覺(jué)得最重要的簡(jiǎn)短清單，同時(shí)也有我們覺(jué)...

    Null 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<