常用JS框架比較

1、常用JS框架比較魯超伍|Adamhttp:/ 我的博客http:/ 評(píng)論全球最酷Web2.0網(wǎng)站 我的微博自我介紹n2005年開始接觸互聯(lián)網(wǎng)開發(fā)，曾就職于千橡互動(dòng)校內(nèi)網(wǎng)、雅虎中國(guó)、淘寶網(wǎng)，專注于前端開發(fā)，見(jiàn)證了前端行業(yè)在中國(guó)的發(fā)展，努力成為一個(gè)專業(yè)的前端工程師。n現(xiàn)負(fù)責(zé)新浪郵箱的RIA開發(fā)，喜歡創(chuàng)新互聯(lián)網(wǎng)應(yīng)用服務(wù)，對(duì)互聯(lián)網(wǎng)前端開發(fā)最新技術(shù)如HTML5/CSS3和移動(dòng)互聯(lián)網(wǎng)開發(fā)感興趣。什么是框架？n中文解釋：中文解釋：“框架”指一套包含工具、函數(shù)庫(kù)、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，目標(biāo)是使開發(fā)人員把重點(diǎn)放在任務(wù)項(xiàng)目所特有的方面，避免重復(fù)開發(fā)。n英文解釋：英文解釋：Framew

2、ork/Library/Toolkit為什么需要框架？nJavaScript 框架或庫(kù)是一組能輕松生成跨瀏覽器兼容的 JavaScript 代碼的工具和函數(shù)。每一個(gè)庫(kù)都在眾多流行的 Web 瀏覽器的現(xiàn)代版本上進(jìn)行了可靠的測(cè)試，因此，您可以放心地使用這些框架，您的基于 JavaScript 的 RIA 將會(huì)在不同瀏覽器和平臺(tái)上以類似的方式工作。 n這些框架極大地簡(jiǎn)化了開發(fā)進(jìn)程，并帶來(lái)一致，可靠，以及高度交互性的用戶界面。 常用的Javascript框架nJQuerynYUInPrototypenMootoolsnExtJSnMochiKitnDojonKissynComo JS nJETnJav

3、aScriptMVCnQooxdoonSproutCorenSencha TouchnIUI我對(duì)框架的分類nJavascript庫(kù)解決瀏覽器兼容性快速開發(fā)Web應(yīng)用豐富UI效果n跨瀏覽器RIA框架類桌面應(yīng)用n移動(dòng)網(wǎng)絡(luò)應(yīng)用APP框架為移動(dòng)設(shè)備而設(shè)計(jì)基于HTML5和CSS3JQuerynjQuery由John Resig創(chuàng)建，其宗旨是WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery是一個(gè)快速的，簡(jiǎn)潔的jav

4、aScript庫(kù)，使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。示例： YUInYahoo! User Interface (YUI) Library是一組采用DOM scripting，Dhtml和Ajax等技術(shù)開發(fā)的Web UI控件和工具。中文說(shuō)過(guò)來(lái)就是“Yahoo用戶界面庫(kù)”。nYui 工具包利用DOM腳本來(lái)簡(jiǎn)化瀏覽器內(nèi)的開發(fā)（in-browser devolvement），使用DHTML和AJAX的特性開發(fā)所有

5、的Web程序。 nYUI控件庫(kù)為你頁(yè)面提供一組高交互性性的可視化元素。這些元素完全在客戶端創(chuàng)建維護(hù)，不需要請(qǐng)求服務(wù)器進(jìn)行頁(yè)面刷新。示例： Prototypenprototype是一個(gè)易于使用、面向?qū)ο蟮腏avaScript框架。它封裝并簡(jiǎn)化和擴(kuò)展一些在Web開發(fā)過(guò)程中常用到JavaScript方法與Ajax交互處理過(guò)程。 示例： http:/last.fm/MootoolsnMooTools 是一個(gè)簡(jiǎn)潔，模塊化，面向?qū)ο蟮腏avaScript框架。它能夠幫助你更快，更簡(jiǎn)單地編寫可擴(kuò)展和兼容性強(qiáng)的JavaScript代碼。 Mootools從Prototype.js中汲取了許多有益的設(shè)計(jì)理念，語(yǔ)

6、法也和其極其類似。但它提供的功能要比Prototype.js多，整體設(shè)計(jì)也比Prototype.js要相對(duì)完善，功能更強(qiáng)大，比如增加了動(dòng)畫特效、拖放操作等等。 示例： http:/ Internet Application）應(yīng)用的JavaScript框架。提供：高性，可定制的Web UI控件庫(kù)。良好的設(shè)計(jì)、豐富的文檔和可擴(kuò)展的組件模型。 示例： MochikitnMochiKit 是一種有用的高端 JavaScript 庫(kù)。MochiKit 主要受到 Python 和 Python 標(biāo)準(zhǔn)庫(kù)提供的很多便利之處的啟發(fā)，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便

7、，能夠以比原始 JavaScript 更友好的方式處理 DOM 對(duì)象。MochiKit.DOM 大部分都是針對(duì) XHTML 文檔定制的，如果與 MochiKit 和 Ajax 結(jié)合在一起，使用 XHTML 包裝的微格式尤其方便。示例：http:/ 是一個(gè)強(qiáng)大的面向?qū)ο驤avaScript框架。主要由三大模塊組成：Core、Dijit、DojoX。Core提供 Ajax，events，packaging，CSS-based querying，animations，JSON等相關(guān)操作API。Dijit是一個(gè)可更換皮膚，基于模板的WEB UI控件庫(kù)。DojoX包括一些創(chuàng)新/新穎的代碼和控件：Date

8、Grid，charts，離線應(yīng)用，跨瀏覽器矢量繪圖等。 示例： KissynKISSY 是一個(gè)小巧靈活、簡(jiǎn)潔實(shí)用的 UI 類庫(kù)，它希望使用者能愉悅編碼、快樂(lè)開發(fā)。nKeep ItSimple & Stupid, Short & Sweet, Slim & Sexy.示例：Como JsnComo JS是一款代碼簡(jiǎn)易而功能強(qiáng)大的Javascript框架，也是作者在工作過(guò)程中的經(jīng)驗(yàn)總結(jié)，實(shí)用性強(qiáng)；通過(guò)它，能夠簡(jiǎn)化Javascript代碼開發(fā)，增強(qiáng)代碼重用性，能夠異步按需加載js和css文件，增強(qiáng)page的加載速度 示例：JetnJET 適用于 Web Page 和 Web

9、App 的開發(fā) n微內(nèi)核設(shè)計(jì)微內(nèi)核設(shè)計(jì) 內(nèi)核可完全分離出來(lái)，用于構(gòu)建自己的框架 n自由拼裝各個(gè)模塊自由拼裝各個(gè)模塊 n命名空間、原生對(duì)象零污染命名空間、原生對(duì)象零污染 n無(wú)縫集成各種無(wú)縫集成各種js框架框架 與jQuery, YUI, Mootools, Prototype.js 等框架無(wú)縫集成 與多種局部框架無(wú)縫集成，如：Mini, Sizzle, cssQuery, xpath, JSON 等等 n多版本共存多版本共存 如采用的JET版本過(guò)舊，舊有的Javascript代碼不能與新版本JET兼容，則可以采用多版本共存的方式保持程序的可延續(xù)性 n分層設(shè)計(jì)分層設(shè)計(jì) Javascript核心層，

10、與Javascript解釋引擎無(wú)關(guān)的封裝和擴(kuò)展 瀏覽器端Javascript層，對(duì)瀏覽器中的Javascript引擎部分的封裝和擴(kuò)展 示例：JavascriptMVCnJavaScriptMVC是一個(gè)功能強(qiáng)大的 JavaScript framework. 也是一個(gè)很棒的JavaScript測(cè)試框架，它同樣能提高開發(fā)的速度。JavaScriptMVC應(yīng)用了模型-視圖-控制器架構(gòu)模式，把業(yè)務(wù)邏輯和表示分離，使得代碼更加模塊化。示例：Qooxdoonqooxdoo是一個(gè) Ajax 應(yīng)用框架使用基于面向?qū)ο?JavaScript，它讓你可以用JavaScript來(lái)開發(fā)類似于VB/Delphi風(fēng)格的具有

11、Ajax功能的web2.0應(yīng)用程序。qooxdoo具有客戶端瀏覽器檢測(cè)功能，具有瀏覽器抽象層，可以無(wú)差別的創(chuàng)建跨瀏覽器的Web應(yīng)用程序，它提供方便的調(diào)試接口，具有事件管理、聚焦管理、定時(shí)器、邊框和對(duì)象屬性等特征。它提供一組窗體組件并擴(kuò)展了布局，它還提供跨平臺(tái)的png圖形透明支持功能。此外，qooxdoo提供一個(gè)原子組件，你可以在其基礎(chǔ)上開發(fā)你自己的組件。 示例：SproutCorenSproutCore蘋果對(duì)SproutCore的解釋為“開源，平臺(tái)無(wú)關(guān)，類Cocoa的JavaScript框架，用于創(chuàng)建具有桌面應(yīng)用程序外觀和操作感的Web應(yīng)用程序?！眓現(xiàn)在有不少Web框架開始使用HTML5中的一

12、些新特性（如離線存儲(chǔ)、HTML5 ApplicationCache等）來(lái)構(gòu)建富本地（rich native-class）應(yīng)用，而SproutCore則是其中之一。示例：Sencha TouchnSencha Touch可以讓你的Web App看起來(lái)像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的 WEB標(biāo)準(zhǔn)，全面兼容Android和Apple iOS設(shè)備。 示例：Sencha TouchIUInIUI 包含一套 JavaScript 庫(kù)，CSS 式樣表及圖片，是一個(gè)輕量級(jí) iPhone UI 庫(kù)，包含 iPhone 風(fēng)格導(dǎo)航菜單，設(shè)備方向，iPh

13、one 風(fēng)格切換等功能，可以為你的 Web 程序帶來(lái) iPhone 般的體驗(yàn)。示例：http:/ IUIJavascript框架使用比例Javascript框架使用比例怎么選擇一款Javascript框架n你的項(xiàng)目需求n框架支持A級(jí)瀏覽器嗎n是否利于團(tuán)隊(duì)協(xié)作開發(fā)n框架是否成熟n文檔是否健全n社區(qū)支持是否充足n框架的擴(kuò)展性如何n你是否喜歡API的風(fēng)格n代碼執(zhí)行速度性能如何n代碼是否為模塊化n代碼可重用性如何幾個(gè)JS框架比較Jquery YUI Prototype Ext-JS Qooxdoover.11.2DOM unextended YYNYYData retr

14、ieval(XMLHTTP)YYYYYRich Text EditorWith pluginYNYYDrag and dropYYYYYInput formWith pluginYYYYAnimation YYYYYEvent handlingYYYYYAutomation toolsWith pluginYYYYAccessibilityYYYNNmobie/tablet supportWith pluginpartialNYNJqueryYUI DOMPrototypeExt JSMootoolsDojoKissyComoJSJquery與YUI詳細(xì)比較nDEMOhttp:/ 如何去寫一款框架n寫一