八款Js框架介紹及比較 收藏

Posted on 2008-05-10 22:53 上校 閱讀(3626) 評論(4)  編輯 收藏 網摘 所屬分類: JavaScript 
目前來看，JS框架以及一些開發(fā)包和庫類有如下幾個，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx
Dojo （JS library and UI component ）：
Dojo是目前最為強大的j s框架，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個“大一統(tǒng)”的工具箱，不僅僅是瀏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API，包括了JS本身的語言擴展，以及各個方面的工具類庫，和比較完善的UI組件庫，也被廣泛應用在很多項目中，他的UI組件的特點是通過給html標簽增加tag的方式進行擴展，而不是通過寫JS來生成，dojo的API模仿Java類庫的組織方式。 用dojo寫Web OS可謂非常方便。dojo現(xiàn)在已經4.0了，dojo強大的地方在于界面和特效的封裝，可以讓開發(fā)者快速構建一些兼容標準的界面。

優(yōu)點：庫相當完善，發(fā)展時間也比較長，功能強大，據說利用dojo的io.bind()可以實現(xiàn)comet，看見其功能強大非一般，得到IBM和SUN的支持
缺點：文件體積比較大，200多KB，初次下載相當慢，此外，dojo的類庫使用顯得不是那么易用，j s語法增強方面不如prototype。

Prototype （JS OO library）：
是一個非常優(yōu)雅的JS庫，定義了JS的面向對象擴展，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴展庫，是相當有前途的JS底層框架，值得推薦，感覺也是現(xiàn)實中應用最廣的庫類（RoR集成的AJAX JS庫），之上還有 Scriptaculous 實現(xiàn)一些JS組件功能和效果。

優(yōu)點：基本底層，易學易用，甚至是其他一些js特效開發(fā)包的底層，體積算是最小的了。
缺點：如果說缺點，可能就是功能是他的弱項

Scriptaculous （JS UI component based on prototype）：
Scriptaculous是基于prototype.js框架的JS效果。包含了6個js文件，不同的文件對應不同的js效果，所以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合適不過的了，連大名鼎鼎的digg都在用他，可見不一般
優(yōu)點：基于prototype是最大的優(yōu)點，由于使用prototype的廣泛性，無疑對用戶書錦上添花，并且在《ajax in action》中就拿Scriptaculous來講述js效果
缺點：剛剛興起，需要時間的磨練

yui-ext (JS UI component)：
基于Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件能實現(xiàn)復雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發(fā)。真正的可編輯的表格Edit Grid，支持XML和Json數據類型，直接可以遷入grid。許多組件實現(xiàn)了對數據源的支持，例如動態(tài)的布局，可編輯的表格控件，動態(tài)加載的Tree 控件、動態(tài)拖拽效果等等。1.0 beta版開始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。
優(yōu)點：結構化，類似于java的結構，清晰明了，底層用到了Jquery的一些函數，使整合使用有了選擇，最重要的一點是界面太讓讓人震撼了。
缺點：太過復雜，整個界面的構造過于復雜。

Jquery ：
jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個js高手又想寫出優(yōu) 秀的js效果，jQuery可以幫你達到目的！并且簡介的語法和高的效率一直是jQuery追求的目標，

優(yōu)點：注重簡介和高效，js效果有yui-ext的選擇，因為yui-ext 重用了很多jQuery的函數
缺點：據說太嫩，歷史不悠久。

Mochikit ：
MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發(fā)，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。MochiKit.DOM 大部分都是針對 XHTML 文檔定制的，如果與 MochiKit 和 Ajax 結合在一起，使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對字符串或者數字格式化輸出，比較實用和方便。它還有自己的 js 代碼解釋器

優(yōu)點：MochiKit.DOM這部分很實用，簡介也是很突出的
缺點：輕量級的缺點

mootools ：
MooTools是一個簡潔，模塊化，面向對象的JavaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強大。比如增加了動畫特效、拖放操作等等。

優(yōu)點：可以定制自己所需要的功能，可以說是prototypejs的增強版。
缺點：不大不小，具體應用具體分析
moo.fx ：
moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非常快、易于使用、跨瀏覽器、符合標準，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果。moo.fx整體采用模塊化設計，所以可以在它的基礎上開發(fā)你需要的任何特效。

優(yōu)點：小塊頭有大能耐
缺點：這么小了，已經不錯了

轉自：http://www.cnblogs.com/zhuawang/archive/2008/05/10/1191701.html

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/Vanessa219/archive/2009/04/17/4087688.aspx

美國主流網站所使用的JavaScript框架 收藏

作者：Pingdom 時間：2008-10-04 來自：翻譯 技術等級：
哪些JavaScript框架是最常見，使用最頻繁的？

要回答這個問題，我們對大約200個美國主流網站進行了調研，檢查他們是否使用了JavaScript框架?如果使用，那么他們選用什么樣的框架？在這里，我們選擇檢測的網站均源自于Alexa美國網站排名前100名和WebWare前100個WEB應用程式。而我們所檢測的JavaScript框架包括： Prototype, JQuery, MooTools, Yahoo! UI Library, Dojo, ExtJS 以及 MochiKit。

我們很快就發(fā)現(xiàn)， Dojo, ExtJS和MochiKit基本不被這些主流網站所采用。于是，我們就將目光鎖定到了剩下的4款JavaScript框架上。

Prototype
Prototype是早期的JavaScript框架之一，而它也同時被應用到了Ruby on Rails框架之中。在所有檢測的200個網站中，有13個網站采用Prototype作為其開發(fā)框架，包括：

CNN
The New York Times
Digg
Apple
Veoh.com
TypePad
Fox News Channel
Finetune
iLike
Last.fm
Twitter
Hakia
YouSendIt
JQuery
Jquery框架因其庫文件大小，速度以及豐富的模式化操作所帶來的海量插件庫，目前引起了大家廣泛的關注。在所有檢測的網站中，有11個網站采用Jquery框架作為其開發(fā)框架，這包括：

Digg
BBC
Major League Baseball
Dell
IsoHunt
Break.com
TinyPic
FixMyMovie
eMusic
Kayak
Box.net
MooTools
與其他很多框架類似，Mootools包含了大量的函數和方法來協(xié)助其開發(fā)與拓展，這里面最著名的莫過于advanced effects組件了（advanced effects component）。在所有檢測的網站中，有4個網站采用了MooTools:

Mint
Worth1000
Bebo
Vimeo
Yahoo! UI Library (YUI)
這是一套Yahoo（雅虎）自行開發(fā)的JavaScript框架。雅虎不僅將其作為自己所屬網站的JS開放框架，而且免費提供給其他人自由使用。在所有檢測的網站中，有7個網站采用了 Yahoo! UI Library:

Yahoo! Shopping
Zillow
Bebo
YouSendIt
ImageShack
LinkedIn
Walmart.com
那些我們無法確定使用框架的網站
在檢測的網站中，有不少網站采用了不止一個JavaScript框架，而是多個組合使用。而這就導致，用戶必須不得不被迫下載所有這些框架庫，但所用到的功能僅僅是這些框架的部分功能。這種情況無疑是可以避免的。

這部分網站將多種框架組合使用，可能是考慮希望使用每個框架中最精華的部分，也可能是在項目中期臨時換掉了項目開始時所確定的那個JavaScript框架，他們還卻沒有來得及將所有代碼進行整合統(tǒng)一。

這些使用多個JS框架的網站是：Digg (Prototype和JQuery), Bebo (MooTools和YUI) 以及YouSendIt (Prototype和YUI)。

總結
在本次檢測中，Prototype似乎是最受主流網站歡迎的JS框架，而JQuery緊隨其后。有趣的是，我們也看到有多個網站采用 Yahoo! UI Library框架作為他們的JS框架，這與我們當初的想象是有一定差距的。

本次對這些主流網站的JS框架檢查，可能不是百分之百的真實的，因為我們僅僅檢測了他們的網站首頁上所使用的框架。并且，我們也沒有注冊登錄這些網站進行檢查，所有在數據上可能存在一定的漏洞。

我們是如何做檢測的？

首先，我們列出Alexa上美國網站前100名和WebWare前100個應用程式；然后，我們利用一個特殊的小工具進行關鍵字檢查以確定其網站使用的JavaScript框架。

比如，對于Prototype來說，我們會搜索“prototype.js” 和 “/prototype”字符串以確定網站是否使用prototype或它的修改版本（除非所有的類似“prototype”都被替換去除掉了）。

當然，我們也會手工查看工具所檢查出的這些網站所使用的框架是否與實際相符。比如，我們就去除掉了那些僅適用了雅虎的CSS框架，而非JavaScript框架的網站。

原文：Javascript framework usage among top websites

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/Vanessa219/archive/2009/04/17/4087680.aspx

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/Vanessa219/archive/2009/04/17/4087680.aspx

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/Vanessa219/archive/2009/04/17/4087680.aspx

AJAX是web20的基石，現(xiàn)在網上流行幾種開源的AJAX框架，比如：jQuery,Mootools,Dojo,Ext JS等等，那么我們到底在什么情況下該使用那個框架？以下是一組摘抄的數據： Ajaxian在2007年底對Ajax工具進行了調查，部分調查結果見下表（其中數字為調查者使用該工具的百分比，詳細的請參見網頁）：http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results Prototype jQuery Ext Script.aculo.us Mootools YUI JSON Dojo Backbase 34.1% 29.3% 22.5% 22.3% 14.3% 13% 12.9% 11.8% 8.3% 其中Prototype使用率最高，很大程度上是因為它是最早成熟的框架，很多以前在項目中采用，所以現(xiàn)在一直在用 讓我們來看看選擇AJAX框架的基礎： 你的項目需求（即你需要哪些特性，例如是否要求做出精美的界面、特效或其它功能） 是否支持A等級的瀏覽器（IE, Firefox等）? 文檔的質量：是否完善（包含教程，API，代碼示例等） 框架的可擴展性如何？為框架寫插件容易嗎？ 你是否喜歡它的API的風格？ 能大多程度上統(tǒng)一你的JavaScript代碼的風格？ 框架大小（太大的框架導致用戶下載時間的延長） 框架是否強迫你改變寫HTML的方式（Dojo就是這樣）？ 代碼執(zhí)行速度：性能如何？ 代碼是否為模塊化（Mootools為高度模塊化）？代碼可重用性如何？ 一、jQuery 主頁：http://jquery.com/ 設計思想 簡潔的思想：幾乎所有操作都是以選擇DOM元素（有強大的Selector）開始，然后是對其的操作（Chaining等特性）。 優(yōu)點 小，壓縮后代碼只有20多k（無壓縮代碼94k）。 Selector和DOM操作的方便：jQuery的Selector與mootools的Element.Selectors.js比較，CSS Selector, XPath Selector（1.2后已刪除） Chaining：總是返回一個jQuery對象，可以連續(xù)操作。 文檔的完整，易用性（每個API都有完整的例子，這是其它框架現(xiàn)在不能比的），而且網上還有很多其它的文檔，書籍。 應用的廣泛，包括google code也使用了jQuery。 使用jQuery的站點：http://docs.jquery.com/Sites_Using_jQuery 核心的開發(fā)團隊和核心人員：John Resig等。 簡潔和簡短的語法，容易記。 可擴展性：有大量用戶開發(fā)的插件可供使用（http://jquery.com/plugins/） jQuery UI（http://jquery.com/plugins/，基于jQuery，但和核心的jQuery是獨立的），不斷發(fā)展中。 友好和活躍的社區(qū)：google groups: http://docs.jquery.com/Discussion 事件處理有很多方便的方法，如click，而不是單一的addEvent之類的。 缺點 由于設計思想是追求高效和簡潔，沒有面向對象的擴展。設計思路和Mootools不一樣。 CSS Selector的速度稍微有些慢（但是現(xiàn)在速度已經大幅提高） Mootools 主頁：http://mootools.net/ 設計思想 面向對象的設計思想。 優(yōu)點 模塊化，各模塊代碼非常獨立，最小的核心只有8k，最大的優(yōu)點是可選擇使用哪些模塊，用的時候只導入使用的模塊即可，完整的也不到180k（沒有壓縮），壓縮后不到70k。 語法的簡潔，直觀。 特效（Effects）：這一點比jQuery稍強，現(xiàn)在也正在開發(fā)Mootools UI（這應該是Ajax框架開發(fā)的一個趨勢）。 代碼寫的優(yōu)美，易閱讀和修改。 文檔的完整（最新的1.2beta的文檔比以前更詳細）。 活躍的社區(qū)：官網(http://forum.mootools.net/)，還有一個IRC。 性能：見：http://mootools.net/slickspeed/ 缺點 修改了低層的一些類：如Array, String等，這也是設計思想的不同。 在DOM和CSS Selector上不如jQuery強大。   Dojo 主頁：http://dojotoolkit.org/ 優(yōu)點 背后強大的支持：IBM、Sun、BEA等，這是非常重要的優(yōu)勢。 功能的強大，F(xiàn)ull Stack的框架，擴展了DHTML的能力，例如： 支持與瀏覽器Back/Forward按鈕的集成。 Dojo Offline，一個跨平臺的離線存儲API。 Chart組件，可以方便地在瀏覽器端生成圖表。 基于SVG/VML的矢量圖形庫。 Google Maps、Yahoo! Maps組件，方便開發(fā)Mashup應用。 Comet支持，通過通用的Buyeux協(xié)議。 強大的UI（Dijit）。 面向對象的設計，統(tǒng)一的命名空間，包管理機制（The Package System and Custom Builds） 可擴展性。 缺點 復雜，學習曲線陡。 文檔的極端不全，這是一個很大的問題。 API很多不穩(wěn)定，各版本間改動較大，現(xiàn)在還不是一個成熟的框架。 侵入性太大，頁面中大量使用dojo的屬性，例如<button dojoType="dijit.form.Button" id="helloButton">，如果將來dojo升級或者換一個框架時，負擔會很大。 性能問題，由于dojo加載采用了同步的機制，會暫時鎖定瀏覽器，導致CPU使用率達到100%。另外，很多Widget的速度很慢。 Ext JS 主頁：http://extjs.com/ 設計思想 組件化，推進RIA（Rich Internet Application）的應用。 優(yōu)點 強大的UI，而且性能不錯，這是其最大的優(yōu)點。 速度快，管是UI還是其它模塊。 100%面向對象和組件化的思想，一致的語法，全局的命名空間。 文檔的完整，規(guī)范，方便。 核心的開發(fā)團隊，Jack Slocum等。 活躍的社區(qū)，迅速增加的用戶量。 模塊化實現(xiàn)，可擴展性強。 所有的組件（widgets）都可直接使用，而無需進行設置（當然，用戶可以選擇重新配置）。 缺點 稍復雜。 為重量級的框架（包含大量UI），體積大。如果導入ext-all.js，壓縮后也有近500k。 注意：EXT的商業(yè)使用：如果只是把extjs包含在自己的項目中，而且這個項目不是賣給用戶做二次開發(fā)的工具箱，或組件庫，就可以遵守LGPL協(xié)議免費使用；否則要付費。   總結 輕量級選擇 輕量級的選擇：主要是mootools和jquery，由于它們的設計思想的不同，jQuery是追求簡潔和高效，Mootools除了追求這些目標以外，其核心在于面向對象，所以jQuery適合于快速開發(fā)，Mootools適合于稍大型和復雜的項目，其中需要面向對象的支持；另外，在Ajax的支持上，jQuery稍強一些；在Comet的支持上，jQuery有相關的插件，Mootools目前沒有，但是Comet的核心在于服務器的支持，瀏覽器端的接口很簡單，開發(fā)相關的插件很簡單。 在面向對象的Javascript Library中，mootools逐漸戰(zhàn)勝了prototype（體積大，面向對象的設計不合理等），也包括script.acul.ous（基于prototype，實際上就是prototype上的UI庫）。 面向RIA的框架 考慮純JavaScripty庫，目前主要是Dojo和ExtJS（還有YUI）。Dojo更適合企業(yè)應用和產品開發(fā)的需要，因為離線存儲、DataGrid、2D、3D圖形、Chart、Comet等組件對于企業(yè)應用來說都是很重要的（當然這些組件還要等一段時間才能穩(wěn)定下來）。例如，BEA基于Mashup技術開發(fā)的產品中已經使用了Dojo。 ExtJS：美觀和"易用"，并且足夠強大。在對UI有比較大的需求時，是首選。