javascript 框架功能大剖析


javascript框架有什么功能,這個不是框架作者隨意決定,這與人們經常用JS做什么事直接相關。 javascript框架是從common.js這樣工具函數集演變過來,最重要的特征是實用。由於框架作者肯定是從 一線開發人員過來的,這個他心里有數,再結合主流框架的功能調查,就萬無一失了。

jQuery

jQuery強在它專注於DOM操作的思路一開始就是對的,以后就是不斷在兼容性,性能上進行改進。

  • ajax 數據交互(1.5來自社區)
  • attributes 屬性操作,共分className, 表單元素的value值,屬性與特征四大塊。
  • callbacks 函數列隊
  • core 種子模塊,命名空間,鏈式結構,domReady,多庫共存。
  • css 樣式操作,引入DE大神的兩個偉大的hacks,基本上解決精確獲取樣式的問題。
  • data 數據存取。
  • deferred 異步列隊(三合一版的函數列隊)
  • dimensions 元素尺寸的設置讀取(來自社區)。
  • effects 動畫引擎
  • event 事件系統(基於DE大神的事件系統與社區的兩個插件)
  • exports AMD系統(被RequireJS作者說服加幾行代碼支持其東東)
  • manipulation 節點的操作
  • offset 元素offsetTop(Left)的設置讀取(來自社區)
  • queue 列隊模塊(deferred與data的合體)。
  • sizzle 從右到左進行解析的選擇器引擎。
  • support 特征偵測
  • traversing 元素遍歷。

jQuery經過多年的發展,擁有龐大的插件與完善的BUG提交渠道,因此可以通過社區的力量不斷完善自身。

Prototype.js

早期的王者,它分為四大部分:

  • 語言擴展
  • DOM擴展
  • AJAX部分
  • 廢棄部分(新版本使用其他方法實現原有功能)

Prototype.js的語言擴展覆蓋面非常廣,包括所有基本數據類型及從語言借鑒過來的“類”。 其中Enumerable 只是一個普通的方法包, ObjectRange,PeriodicalExecuter,Template 則用Class類工廠生產出來的。Class類工廠來自社區貢獻,強大無比, 與mootools的類工廠不相伯仲。

DOM部分分成五塊。dom.js花了好大勁在IE下模擬Node, Element等對象, 並在Element原型上進行擴展。event.js就是跨瀏覽器的多投事件系統與domReady, 在早些年先進到不得了,那個observe,fire,stopObserving的命名真是太好了。 form.js是專門處理表單。layout是專門處理樣式。selector.js是用於關聯選擇器引擎, 現在竟然用死對頭的Sizzle——shit, 真是落魄!

AJAX部分是重頭戲,早期框架最大的賣點,里面N個對象都是用類工廠制造的,並存在多層的繼承關系。

mootools

比Prototype.js的入侵性更強,但由於API設計得非常優雅,官網上一大堆優質插件, 強大的團隊, 因此才沒有在原型擴展的反對浪潮中沒落。

  • Core 自1.3起,所有數據類型或原生對象都封裝成Type類型,Type方法可以說是其第一類工廠
  • Type 對Number, Object(原Hash), String, Array, Function進行擴展, 事件對象的封裝
  • Brower 檢測瀏覽器與OS的類型與版本, Flash版本, XMLHTTP對象的創建方法
  • Class 第二類工廠
  • Slick mootools的新一代選擇器引擎,支持CSS3高級偽類。
  • Element 對元素的創建,克隆,插入,移除,樣式操作,事件綁定,事件代理進行封裝
  • Request 數據交互
  • Fx 動畫引擎
  • Utilities 對cookie, domReady, JSON, Flash(Swiff)提供便捷的工具方法

RightJS

又一個在原型上進行擴展的框架,不過自創了許多東東。

  • core 提供一個類工廠, Observer類, Option對象
  • lang對array, function, json, math, number, object, regexp, string進行擴展與修復
  • dom 提供各種dom 操作, 選擇器尋找, 事件綁定與代理, cookie, domReady
  • fx 動畫引擎
  • xhr 數據交互
  • olds 對舊式IE的各種兼容

MochiKit

一個python風格的框架,以前能進世界前十名的。現在作者跑去當CTO了。

  • Base 提供命名空間, isXXX系列, 將操作符變成函數,還有N多工具方法。
  • Async 數據交互以及從python引進Deferred(異步列隊)。
  • Color 顏色類型轉換。
  • DOM 節點的增刪改查。
  • Format 字符串與數字的格式化。
  • DateTime 時間的格式化。
  • DragAndDrop 拖放組件。
  • Iter 一系列迭代器。
  • Logger 調試用的日志。
  • LoggingPane Logger帶UI的升級版。
  • MochiKit 用document.write引進框架的所有JS文件。
  • Position 取得元素位置的相關方法。
  • Selector 選擇器引擎。
  • Signal 事件系統。
  • Sortable 排序組件。
  • Style 樣式操作。
  • Test 單元測試。
  • Visual 動畫引擎。

Ten

日本著名博客社區Hatena的javascript框架, 由日本頂尖高手amachang開發,核心大致於2008年完工。 受Prototype.js影響, 但一點侵入性也沒有,是最早期以命名空間為導向的框架的典范。

  • Ten對象,作為框架的基點,所有模塊作為其屬性進行擴展。
  • Ten.Class, 類工廠, 與Prototype.js1.6引入的類工廠很像,但比它早。
  • Ten.Function, Ten.Array, 兩個方法包,提供一些工具方法。 除了這兩個,Ten的其他模塊都是由類工廠制造出來。
  • Ten.JSONP,估計世界上最早裝備JSONP的幾個javascript框架之一了。
  • Ten.XHR,基於XMLHttpRequest的數據交互。
  • Ten.Observer,提供訂閱發布機制, Prototype.js的泊來物。
  • Ten.Event,Ten.EventDispatcher這兩個類分別對事件對象與多投事件進行封裝。
  • Ten.DOM DOM的增刪改查,里面有一個addObserver提供domReady功能。
  • Ten.Element 用於創建元素。
  • Ten.Cookie cookie的操作。
  • Ten.Selector,Ten._Selector,Ten._SelectorNode與Ten.querySelector共同構建其選擇器引擎。
  • Ten.Color 顏色的轉換。
  • Ten.Style 樣式的設置。
  • Ten.Geometry 元素位置的偵測。
  • Ten.Position 相當於一個Point類。
  • Ten.Logger 日志組件。
  • Ten.Browser 瀏覽器嗅探。
  • Ten.Deferred 由另一個日本頂尖高手cho45發明的異步列隊, 日本人對此異步列隊的密集研究討論持續了三年多,可見這東西非常NB。

mass Framework

一個模塊化,以大模塊開發為目標,jQuery式的框架。里面涉及的HTML5新API數量,估計除了純凈的手機框架外,無人能敵。

  • mass.js 種子模塊 提供類型識別 模塊加載 糅合機制 日志 高速化判定 domReady 簡單的事件綁定與移除 多庫共存 多版本共存。 別看這么多功能,其實本模塊體積是非常小的。
  • lang.js 提供幾個isXXX方法,parseXXX方法,以及一個語言鏈對象。此對象能對字符串,數字,對象,類數組對象進行優雅的鏈式操作, 相當於把Underscore.js這個庫整進去,但兩者實現機理完全不一樣。
  • lang_fix.js 補丁模塊, 提供ECMA262v5大部分新API的支持, 並修復IE一些BUG。
  • support.js 特征嗅探
  • class.js 類工廠
  • query.js 第五代選擇器引擎Icarus, 兼容CSS3高級偽類與jQuery所有自定義偽類。
  • node.js 提供一個節點鏈對象(與jQuery對象的API 95%兼容, 像wrap等不常用方法被剔除了)
  • data.js 數據緩存
  • css.js 相當於jquery的css dimensions offset的三合一加強版,因為它支持CSS3的transform2D。
  • css_fx.js 補丁模塊, 將對舊式IE的兼並代碼獨立出去。
  • target.js 對事件對象進行封裝,並提供自定義事件機制。
  • event.js 事件綁定與事件代理。
  • flow.js 操作流,提供比異步列隊更強大的處理異步的機制。
  • attr.js 屬性操作,同jQuery。
  • ajax 數據交互。
  • fx 動畫引擎。

經過細節比較,我們很易得出以下結論

  • 選擇器,domReady, ajax是現代框架的標配。
  • 動畫引擎,除非你的框架像Prototype.js那樣擁有像script.aculo.us這樣頂級的動畫框架做后盾,最好也加上。
  • DOM操作是重中之重,節點的遍歷,樣式操作,屬性操作也屬於它的范疇,是否細分看你框架的規模。由於完全模塊化了, mass Framework基至可以將舊式IE的兼容代碼獨立出去。
  • 現在主流的事件系統都支持事件代理了。
  • 對基本數據類型的操作是必須的,像jQuery還是不得不提供trim, camelCase, each, map等方法。 像Prototype.js等侵入式框架則可以肆無忌憚地在原型上添加camelize等好用方法。
  • 類型的判定必不可少,常見形式是isXXX系列。
  • brower sniff已死, feature detect當立。
  • 異步列隊等處理回調的方案的流行
  • 即使不專門提供一個類工廠,也應該存在一個叫extend或mixin的方法對對象進行擴展。 jQuery雖然沒有類工廠,但在jQuery ui中也不得不整一個,可見其重要性。
  • 自從jQuery搞鼓出一個叫noConflict的方法,新興的小庫們都帶此方法,以求狹縫中生存。
  • 許多框架是非常重視cookie的操作。

最后嘮叨一下,當你成為高手時,一定已經在寫或寫過框架了。這就像一位劍豪,必然開創自己的流派。為什么前端的工資普遍不如后端呢, 正是因為前端JSer的平均水平實在太低了,大多數人不是科班出身, 還懶得要命, 寫幾行代碼還上網找插件, 扣人家代碼, 具備寫框架功能的人實在太少了。PHP框架數量上千個,天天在增加。java, C, C#的人不但玩框架,還玩編譯器,制造語言去了。 而能玩ruby, python的人基本上衣食無憂, 閑得蛋疼,不說了。就前端,特別是中國前端的人的整體素質最差, 既然你只會jQuery, 老板隨便拉幾個后端學上一兩天也會jQuery,要你何用?!本段話是針對“不要重復造輪子”的人說的。其實老外也沒有說過這句話, 人家是說,“不要重復發明輪子”。為了不成為前端攻城師當炮灰, 大家努力搞鼓個框架出來當前端架構師吧。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM