八款Js架構介紹及比較,Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx，componentartui (轉載)

Extjs 與 JQuery

1.Turbomail(www.turbomail.org)下一版本決定用Extjs + jquery 開發。

2.JQuery 提供了友善的對網頁元素操作方法，但不提供基本控件,如：Tab，Grid，Muen 等，Extjs 是一套   完整的控件庫，Extjs 提供這些控件。

3.Extjs 對制作控件的方法就是使用div 畫格子，這點類似當年我寫 windows 基本控件使用的方法。是以說   通過 js 完全可實作windows 界面。

4.Extjs 也提供JQuery 所包含的功能

5.Extjs 庫體積大，JQuery 體積小，這是因為JQuery 隻提供了網頁元素操作方法，不提供控件，不過如果你  自己開發一套具有Extjs 這樣完整的控件庫，體積肯定不比Extjs 小

6.Extjs 和 JQuery 的源代碼都寫得很好，很值得一看。

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

Posted on 2008-05-10 22:53 上校 閱讀(3626) 評論(4)  編輯 收藏 網摘 所屬分類: JavaScript 

目前來看，JS架構以及一些開發包和庫類有如下幾個，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最為強大的j s架構，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個“大一統”的工具箱，不僅僅是浏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨浏覽器API，包括了JS本身的語言擴充，以及各個方面的工具類庫，和比較完善的UI元件庫，也被廣泛應用在很多項目中，他的UI元件的特點是通過給html标簽增加tag的方式進行擴充，而不是通過寫JS來生成，dojo的API模仿Java類庫的組織方式。 用dojo寫Web OS可謂非常友善。dojo現在已經4.0了，dojo強大的地方在于界面和特效的封裝，可以讓開發者快速建構一些相容标準的界面。

優點：庫相當完善，發展時間也比較長，功能強大，據說利用dojo的io.bind()可以實作comet，看見其功能強大非一般，得到IBM和SUN的支援

缺點：檔案體積比較大，200多KB，初次下載下傳相當慢，此外，dojo的類庫使用顯得不是那麼易用，j s文法增強方面不如prototype。

Prototype （JS OO library）：

是一個非常優雅的JS庫，定義了JS的面向對象擴充，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴充庫，是相當有前途的JS底層架構，值得推薦，感覺也是現實中應用最廣的庫類（RoR內建的AJAX JS庫），之上還有 Scriptaculous 實作一些JS元件功能和效果。

優點：基本底層，易學易用，甚至是其他一些js特效開發包的底層，體積算是最小的了。

缺點：如果說缺點，可能就是功能是他的弱項

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基于prototype.js架構的JS效果。包含了6個js檔案，不同的檔案對應不同的js效果，是以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合适不過的了，連大名鼎鼎的digg都在用他，可見不一般

優點：基于prototype是最大的優點，由于使用prototype的廣泛性，無疑對使用者書錦上添花，并且在《ajax in action》中就拿Scriptaculous來講述js效果

缺點：剛剛興起，需要時間的磨練

yui-ext (JS UI component)：

基于Yahoo UI的擴充包yui-ext是具有CS風格的Web使用者界面元件能實作複雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發。真正的可編輯的表格Edit Grid，支援XML和Json資料類型，直接可以遷入grid。許多元件實作了對資料源的支援，例如動态的布局，可編輯的表格控件，動态加載的Tree 控件、動态拖拽效果等等。1.0 beta版開始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

優點：結構化，類似于java的結構，清晰明了，底層用到了Jquery的一些函數，使整合使用有了選擇，最重要的一點是界面太讓讓人震撼了。

缺點：太過複雜，整個界面的構造過于複雜。

Jquery ：

jQuery是一款同prototype一樣優秀js開發庫類，特别是對css和XPath的支援，使我們寫js變得更加友善！如果你不是個js高手又想寫出優 秀的js效果，jQuery可以幫你達到目的！并且簡介的文法和高的效率一直是jQuery追求的目标，

優點：注重簡介和高效，js效果有yui-ext的選擇，因為yui-ext 重用了很多jQuery的函數

缺點：據說太嫩，曆史不悠久。

Mochikit ：

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

優點：MochiKit.DOM這部分很實用，簡介也是很突出的

缺點：輕量級的缺點

mootools ：

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

優點：可以定制自己所需要的功能，可以說是prototypejs的增強版。

缺點：不大不小，具體應用具體分析

moo.fx ：

moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools架構一起使用。它非常快、易于使用、跨浏覽器、符合标準，提供控制和修改任何HTML元素的CSS屬性，包括顔色。它内置檢查器能夠防止使用者通過多次或瘋狂點選來破壞效果。moo.fx整體采用子產品化設計，是以可以在它的基礎上開發你需要的任何特效。

優點：小塊頭有大能耐

缺點：這麼小了，已經不錯了

轉自：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。

我們很快就發現， Dojo, ExtJS和MochiKit基本不被這些主流網站所采用。于是，我們就将目光鎖定到了剩下的4款JavaScript架構上。

Prototype

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

CNN

The New York Times

Digg

Apple

Veoh.com

TypePad

Fox News Channel

Finetune

iLike

Last.fm

Twitter

Hakia

YouSendIt

JQuery

Jquery架構因其庫檔案大小，速度以及豐富的模式化操作所帶來的海量插件庫，目前引起了大家廣泛的關注。在所有檢測的網站中，有11個網站采用Jquery架構作為其開發架構，這包括：

Digg

BBC

Major League Baseball

Dell

IsoHunt

Break.com

TinyPic

FixMyMovie

eMusic

Kayak

Box.net

MooTools

與其他很多架構類似，Mootools包含了大量的函數和方法來協助其開發與拓展，這裡面最著名的莫過于advanced effects元件了（advanced effects component）。在所有檢測的網站中，有4個網站采用了MooTools:

Mint

Worth1000

Bebo

Vimeo

Yahoo! UI Library (YUI)

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

Yahoo! Shopping

Zillow

Bebo

YouSendIt

ImageShack

LinkedIn

Walmart.com

那些我們無法确定使用架構的網站

在檢測的網站中，有不少網站采用了不止一個JavaScript架構，而是多個組合使用。而這就導緻，使用者必須不得不被迫下載下傳所有這些架構庫，但所用到的功能僅僅是這些架構的部分功能。這種情況無疑是可以避免的。

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

這些使用多個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

推薦一個不錯的javascript架構——Mootools

作者：青蛙

目前網上有很多JS的架構，有美觀的，有易用的，有靈活的，這些無非是讓使用者使用JS時更加的順手。是以，對于沒有自己寫JS習慣的人來說，可能接觸最多的就是目前比較常用且簡單的幾個架構，如：ExtJS（前身為YUI），JQuery。

對于經常自己寫JS的人說，可能有時會接觸這些架構，但高深的運用，用得比較多的我想應當是prototype架構，相對來說較成熟的底層，擴充性也不錯。

但我們今天推薦的不是以上這幾個，而是另外一個靈活且強大的底層JS架構，主要是針對有能力自己開發JS擴充的人員。

Mootools，當仁不讓！當然，相信應當有不少人聽過這個架構的名稱。

在推薦這個架構之前先說說前面幾種架構的大多使用場合，這樣才有一個比較好的對比。

ExtJS，前身為YUI，由Yahoo開發的一套UI JS架構，或者叫元件更合适。對界面元素，特别是表單元素的細節及樣式處理得十分炫麗。在多數的場合裡，該架構擔當着界面美化師的角色，為平淡無奇的HTML表單元素提供了華麗的外衣。是以，它的主要用途應當是用在WEB Apps的美化工作，對于WEB頁面使用較少。如果真要說優缺點的話，那這個架構的優點就是美觀；缺點就是使用範圍太小，進而限制了它的用途。

JQuery，應當是目前網絡中使用得最多的架構。由于本身就是為了易用為出發點而設計，是以大多數的方法都是可以即時實作需要的效果。是以，不管是JS的初學者還是高手，隻要知道使用方法如何調用及設定，就可以很友善地實作很多很酷很炫的效果。該架構目前已具備較完善的方法集合，如TAB标簽，SlideBar及目前炒得火熱的Ajax。但該架構有相對較完善的效果注定了這個架構的龐大，易于使用就注定了方法的定形，另外可擴充性不高；雖然有着種種不如人意的地方，但确實給在JS方面雲裡霧裡的使用者提供了強大的技術支援。

Prototype，曾經一時的火熱，目前不知道情況如何。它的出現，為開發人員提供了一個良好的協作環境，可以基于共同的底層實作方法的擴充，自由度及靈活性得到不小的提高。但底層方法較死闆，相對限制較多，但總體來說，它解決了上兩種架構的無法自定義擴充的問題。缺點就是對JS技能有要求，想實作一些效果需要自己碼代碼。

現在重點講講這個Mootools的架構，就青蛙個人而言，就目前為止還沒碰過這麼靈活的架構。

Mootools為mad4milk團隊開發的JS架構，力求以最少的代碼實作最靈活的底層，很明顯，他們的目标就是這個。從參考文檔來看，核心的方法就隻有幾個，包括Core類包，Class類包及Element類包，但已包括多個應用場合，如浏覽器的Browser，本地的Natives，必須的Utlities及請求的Request等，另外還附帶了一些簡單的動畫效果，如Fx的Tween，Transtions，CSS等，可見架構的涉及面廣。

除了架構核心代碼量少外，Mootools還有一個對有OOP代碼的使用者來說很容易上手的功能，事實上，使用Mootools的要求就是使用者也要有OOP能力。在Mootools裡有着OOP的繼承，實作接口等，甚至引入了命名空間的概念；與傳統的OOP比起來，它的寫法有些不一樣，但又十分相似，比如接口的一種寫法：

var newClass = new Class({initialize : function(){ //todo } });  //建立類

newClass. implement (//接口實作的方法);  //對象實作接口

與Java或者C#之類的public class newClass implements IFace{}寫法比起來，是不是很像？

如果沒接觸過傳統的OOP寫法也沒關系，依靠JS本身的寫法寫繼承及實作接口也可以，如：

var iface = new Class({ //接口實作 });

var newClass = new Class({ implements:iface, initialize:function(){ //todo...} });

一樣也很友善，可見在編碼習慣這方面，Mootools處理得還是不錯的，讓不同的使用者能保持自己的編碼風格。

當然，這些僅是剛開始，利用這個架構開始編碼的開始，具體的有哪些擴充及寫法，不同的組合自然有不同的效果，篇幅有限這裡不多做說明。

說了它這麼多的優點，對于缺點我想大家也應當自己總結出來了，就是對使用者技能要求較高，最起碼得了解JS的OOP寫法。如果隻是普通的運用，這個架構有點像"殺雞用牛刀"的感覺了。不過，仁者見仁，智者見智吧。

如果你會自己寫JS，如果你想用架構寫JS的進階擴充，如果你想讓自己的JS水準更上一層樓，建議你試試這個Mootools，應當不會讓你失望的。

流行的AJAX架構對比：jQuery，Mootools，Dojo，Ext JS 2009-07-31 17:40

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