javascript框架有什么功能，這個(gè)不是框架作者隨意決定，這與人們經(jīng)常用JS做什么事直接相關(guān)。 javascript框架是從common.js這樣工具函數(shù)集演變過(guò)來(lái)，最重要的特征是實(shí)用。由于框架作者肯定是從一線(xiàn)開(kāi)發(fā)人員過(guò)來(lái)的，這個(gè)他心里有數(shù)，再結(jié)合主流框架的功能調(diào)查，就萬(wàn)無(wú)一失了。
jQuery強(qiáng)在它專(zhuān)注于DOM操作的思路一開(kāi)始就是對(duì)的，以后就是不斷在兼容性，性能上進(jìn)行改進(jìn)。
- ajax 數(shù)據(jù)交互（1.5來(lái)自社區(qū)）
- attributes 屬性操作，共分className, 表單元素的value值，屬性與特征四大塊。
- callbacks 函數(shù)列隊(duì)
- core 種子模塊，命名空間，鏈?zhǔn)浇Y(jié)構(gòu)，domReady，多庫(kù)共存。
- css 樣式操作，引入DE大神的兩個(gè)偉大的hacks，基本上解決精確獲取樣式的問(wèn)題。
- data 數(shù)據(jù)存取。
- deferred 異步列隊(duì)（三合一版的函數(shù)列隊(duì)）
- dimensions 元素尺寸的設(shè)置讀取（來(lái)自社區(qū)）。
- effects 動(dòng)畫(huà)引擎
- event 事件系統(tǒng)（基于DE大神的事件系統(tǒng)與社區(qū)的兩個(gè)插件）
- exports AMD系統(tǒng)(被RequireJS作者說(shuō)服加幾行代碼支持其東東)
- manipulation 節(jié)點(diǎn)的操作
- offset 元素offsetTop(Left)的設(shè)置讀取（來(lái)自社區(qū)）
- queue 列隊(duì)模塊（deferred與data的合體）。
- sizzle 從右到左進(jìn)行解析的選擇器引擎。
- support 特征偵測(cè)
- traversing 元素遍歷。
jQuery經(jīng)過(guò)多年的發(fā)展，擁有龐大的插件與完善的BUG提交渠道，因此可以通過(guò)社區(qū)的力量不斷完善自身。
早期的王者，它分為四大部分:
- 語(yǔ)言擴(kuò)展
- DOM擴(kuò)展
- AJAX部分
- 廢棄部分（新版本使用其他方法實(shí)現(xiàn)原有功能）
Prototype.js的語(yǔ)言擴(kuò)展覆蓋面非常廣，包括所有基本數(shù)據(jù)類(lèi)型及從語(yǔ)言借鑒過(guò)來(lái)的“類(lèi)”。 其中Enumerable 只是一個(gè)普通的方法包， ObjectRange，PeriodicalExecuter，Template 則用Class類(lèi)工廠(chǎng)生產(chǎn)出來(lái)的。Class類(lèi)工廠(chǎng)來(lái)自社區(qū)貢獻(xiàn)，強(qiáng)大無(wú)比， 與mootools的類(lèi)工廠(chǎng)不相伯仲。
DOM部分分成五塊。dom.js花了好大勁在IE下模擬Node, Element等對(duì)象， 并在Element原型上進(jìn)行擴(kuò)展。event.js就是跨瀏覽器的多投事件系統(tǒng)與domReady， 在早些年先進(jìn)到不得了，那個(gè)observe，fire，stopObserving的命名真是太好了。 form.js是專(zhuān)門(mén)處理表單。layout是專(zhuān)門(mén)處理樣式。selector.js是用于關(guān)聯(lián)選擇器引擎， 現(xiàn)在竟然用死對(duì)頭的Sizzle——shit， 真是落魄！
AJAX部分是重頭戲，早期框架最大的賣(mài)點(diǎn)，里面N個(gè)對(duì)象都是用類(lèi)工廠(chǎng)制造的，并存在多層的繼承關(guān)系。
比Prototype.js的入侵性更強(qiáng)，但由于A(yíng)PI設(shè)計(jì)得非常優(yōu)雅，官網(wǎng)上一大堆優(yōu)質(zhì)插件， 強(qiáng)大的團(tuán)隊(duì)， 因此才沒(méi)有在原型擴(kuò)展的反對(duì)浪潮中沒(méi)落。
- Core 自1.3起,所有數(shù)據(jù)類(lèi)型或原生對(duì)象都封裝成Type類(lèi)型,Type方法可以說(shuō)是其第一類(lèi)工廠(chǎng)
- Type 對(duì)Number, Object(原Hash), String, Array, Function進(jìn)行擴(kuò)展, 事件對(duì)象的封裝
- Brower 檢測(cè)瀏覽器與OS的類(lèi)型與版本, Flash版本, XMLHTTP對(duì)象的創(chuàng)建方法
- Class 第二類(lèi)工廠(chǎng)
- Slick mootools的新一代選擇器引擎，支持CSS3高級(jí)偽類(lèi)。
- Element 對(duì)元素的創(chuàng)建,克隆,插入,移除,樣式操作,事件綁定，事件代理進(jìn)行封裝
- Request 數(shù)據(jù)交互
- Fx 動(dòng)畫(huà)引擎
- Utilities 對(duì)cookie, domReady, JSON, Flash(Swiff)提供便捷的工具方法
又一個(gè)在原型上進(jìn)行擴(kuò)展的框架，不過(guò)自創(chuàng)了許多東東。
- core 提供一個(gè)類(lèi)工廠(chǎng), Observer類(lèi), Option對(duì)象
- lang對(duì)array, function, json, math, number, object, regexp, string進(jìn)行擴(kuò)展與修復(fù)
- dom 提供各種dom 操作, 選擇器尋找, 事件綁定與代理, cookie, domReady
- fx 動(dòng)畫(huà)引擎
- xhr 數(shù)據(jù)交互
- olds 對(duì)舊式IE的各種兼容
一個(gè)python風(fēng)格的框架，以前能進(jìn)世界前十名的。現(xiàn)在作者跑去當(dāng)CTO了。
- Base 提供命名空間, isXXX系列, 將操作符變成函數(shù),還有N多工具方法。
- Async 數(shù)據(jù)交互以及從python引進(jìn)Deferred(異步列隊(duì))。
- Color 顏色類(lèi)型轉(zhuǎn)換。
- DOM 節(jié)點(diǎn)的增刪改查。
- Format 字符串與數(shù)字的格式化。
- DateTime 時(shí)間的格式化。
- DragAndDrop 拖放組件。
- Iter 一系列迭代器。
- Logger 調(diào)試用的日志。
- LoggingPane Logger帶UI的升級(jí)版。
- MochiKit 用document.write引進(jìn)框架的所有JS文件。
- Position 取得元素位置的相關(guān)方法。
- Selector 選擇器引擎。
- Signal 事件系統(tǒng)。
- Sortable 排序組件。
- Style 樣式操作。
- Test 單元測(cè)試。
- Visual 動(dòng)畫(huà)引擎。
日本著名博客社區(qū)Hatena的javascript框架, 由日本頂尖高手amachang開(kāi)發(fā),核心大致于2008年完工。 受Prototype.js影響， 但一點(diǎn)侵入性也沒(méi)有，是最早期以命名空間為導(dǎo)向的框架的典范。
- Ten對(duì)象，作為框架的基點(diǎn)，所有模塊作為其屬性進(jìn)行擴(kuò)展。
- Ten.Class， 類(lèi)工廠(chǎng)， 與Prototype.js1.6引入的類(lèi)工廠(chǎng)很像，但比它早。
- Ten.Function, Ten.Array， 兩個(gè)方法包，提供一些工具方法。 除了這兩個(gè)，Ten的其他模塊都是由類(lèi)工廠(chǎng)制造出來(lái)。
- Ten.JSONP，估計(jì)世界上最早裝備JSONP的幾個(gè)javascript框架之一了。
- Ten.XHR，基于XMLHttpRequest的數(shù)據(jù)交互。
- Ten.Observer，提供訂閱發(fā)布機(jī)制， Prototype.js的泊來(lái)物。
- Ten.Event，Ten.EventDispatcher這兩個(gè)類(lèi)分別對(duì)事件對(duì)象與多投事件進(jìn)行封裝。
- Ten.DOM DOM的增刪改查，里面有一個(gè)addObserver提供domReady功能。
- Ten.Element 用于創(chuàng)建元素。
- Ten.Cookie cookie的操作。
- Ten.Selector，Ten._Selector，Ten._SelectorNode與Ten.querySelector共同構(gòu)建其選擇器引擎。
- Ten.Color 顏色的轉(zhuǎn)換。
- Ten.Style 樣式的設(shè)置。
- Ten.Geometry 元素位置的偵測(cè)。
- Ten.Position 相當(dāng)于一個(gè)Point類(lèi)。
- Ten.Logger 日志組件。
- Ten.Browser 瀏覽器嗅探。
- Ten.Deferred 由另一個(gè)日本頂尖高手cho45發(fā)明的異步列隊(duì)， 日本人對(duì)此異步列隊(duì)的密集研究討論持續(xù)了三年多，可見(jiàn)這東西非常NB。
一個(gè)模塊化，以大模塊開(kāi)發(fā)為目標(biāo)，jQuery式的框架。里面涉及的HTML5新API數(shù)量，估計(jì)除了純凈的手機(jī)框架外，無(wú)人能敵。
- mass.js 種子模塊 提供類(lèi)型識(shí)別 模塊加載 糅合機(jī)制 日志 高速化判定 domReady 簡(jiǎn)單的事件綁定與移除 多庫(kù)共存 多版本共存。 別看這么多功能，其實(shí)本模塊體積是非常小的。
- lang.js 提供幾個(gè)isXXX方法，parseXXX方法，以及一個(gè)語(yǔ)言鏈對(duì)象。此對(duì)象能對(duì)字符串，數(shù)字，對(duì)象，類(lèi)數(shù)組對(duì)象進(jìn)行優(yōu)雅的鏈?zhǔn)讲僮鳎?相當(dāng)于把Underscore.js這個(gè)庫(kù)整進(jìn)去，但兩者實(shí)現(xiàn)機(jī)理完全不一樣。
- lang_fix.js 補(bǔ)丁模塊, 提供ECMA262v5大部分新API的支持, 并修復(fù)IE一些BUG。
- support.js 特征嗅探
- class.js 類(lèi)工廠(chǎng)
- query.js 第五代選擇器引擎Icarus， 兼容CSS3高級(jí)偽類(lèi)與jQuery所有自定義偽類(lèi)。
- node.js 提供一個(gè)節(jié)點(diǎn)鏈對(duì)象（與jQuery對(duì)象的API 95%兼容， 像wrap等不常用方法被剔除了）
- data.js 數(shù)據(jù)緩存
- css.js 相當(dāng)于jquery的css dimensions offset的三合一加強(qiáng)版，因?yàn)樗С諧SS3的transform2D。
- css_fx.js 補(bǔ)丁模塊， 將對(duì)舊式IE的兼并代碼獨(dú)立出去。
- target.js 對(duì)事件對(duì)象進(jìn)行封裝，并提供自定義事件機(jī)制。
- event.js 事件綁定與事件代理。
- flow.js 操作流，提供比異步列隊(duì)更強(qiáng)大的處理異步的機(jī)制。
- attr.js 屬性操作，同jQuery。
- ajax 數(shù)據(jù)交互。
- fx 動(dòng)畫(huà)引擎。
經(jīng)過(guò)細(xì)節(jié)比較，我們很易得出以下結(jié)論
- 選擇器，domReady, ajax是現(xiàn)代框架的標(biāo)配。
- 動(dòng)畫(huà)引擎，除非你的框架像Prototype.js那樣擁有像script.aculo.us這樣頂級(jí)的動(dòng)畫(huà)框架做后盾，最好也加上。
- DOM操作是重中之重，節(jié)點(diǎn)的遍歷，樣式操作，屬性操作也屬于它的范疇，是否細(xì)分看你框架的規(guī)模。由于完全模塊化了， mass Framework基至可以將舊式IE的兼容代碼獨(dú)立出去。
- 現(xiàn)在主流的事件系統(tǒng)都支持事件代理了。
- 對(duì)基本數(shù)據(jù)類(lèi)型的操作是必須的，像jQuery還是不得不提供trim, camelCase, each, map等方法。 像Prototype.js等侵入式框架則可以肆無(wú)忌憚地在原型上添加camelize等好用方法。
- 類(lèi)型的判定必不可少，常見(jiàn)形式是isXXX系列。
- brower sniff已死， feature detect當(dāng)立。
- 異步列隊(duì)等處理回調(diào)的方案的流行
- 即使不專(zhuān)門(mén)提供一個(gè)類(lèi)工廠(chǎng)，也應(yīng)該存在一個(gè)叫extend或mixin的方法對(duì)對(duì)象進(jìn)行擴(kuò)展。 jQuery雖然沒(méi)有類(lèi)工廠(chǎng)，但在jQuery ui中也不得不整一個(gè)，可見(jiàn)其重要性。
- 自從jQuery搞鼓出一個(gè)叫noConflict的方法，新興的小庫(kù)們都帶此方法，以求狹縫中生存。
- 許多框架是非常重視cookie的操作。
最后嘮叨一下，當(dāng)你成為高手時(shí)，一定已經(jīng)在寫(xiě)或?qū)戇^(guò)框架了。這就像一位劍豪，必然開(kāi)創(chuàng)自己的流派。為什么前端的工資普遍不如后端呢，正是因?yàn)榍岸薐Ser的平均水平實(shí)在太低了，大多數(shù)人不是科班出身， 還懶得要命， 寫(xiě)幾行代碼還上網(wǎng)找插件， 扣人家代碼， 具備寫(xiě)框架功能的人實(shí)在太少了。PHP框架數(shù)量上千個(gè)，天天在增加。java, C, C#的人不但玩框架，還玩編譯器，制造語(yǔ)言去了。而能玩ruby, python的人基本上衣食無(wú)憂(yōu)， 閑得蛋疼，不說(shuō)了。就前端，特別是中國(guó)前端的人的整體素質(zhì)最差， 既然你只會(huì)jQuery， 老板隨便拉幾個(gè)后端學(xué)上一兩天也會(huì)jQuery，要你何用？！本段話(huà)是針對(duì)“不要重復(fù)造輪子”的人說(shuō)的。其實(shí)老外也沒(méi)有說(shuō)過(guò)這句話(huà)，人家是說(shuō)，“不要重復(fù)發(fā)明輪子”。為了不成為前端攻城師當(dāng)炮灰， 大家努力搞鼓個(gè)框架出來(lái)當(dāng)前端架構(gòu)師吧。
400 186 1886
