常用JS框架比較

常用JS框架比較魯超伍|Adam我的博客評論全球最酷Web2.0網(wǎng)站我的微博1自我介紹2005年開始接觸互聯(lián)網(wǎng)開發(fā)，曾就職于千橡互動校內(nèi)網(wǎng)、雅虎中國、淘寶網(wǎng)，專注于前端開發(fā)，見證了前端行業(yè)在中國的發(fā)展，努力成為一個專業(yè)的前端工程師?，F(xiàn)負(fù)責(zé)新浪郵箱的RIA開發(fā)，喜歡創(chuàng)新互聯(lián)網(wǎng)應(yīng)用服務(wù)，對互聯(lián)網(wǎng)前端開發(fā)最新技術(shù)如HTML5/CSS3和移動互聯(lián)網(wǎng)開發(fā)感興趣。2什么是框架？中文解釋：“框架”指一套包含工具、函數(shù)庫、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，目標(biāo)是使開發(fā)人員把重點放在任務(wù)項目所特有的方面，避免重復(fù)開發(fā)。英文解釋：Framework/Library/Toolkit34為什么需要框架？JavaScript框架或庫是一組能輕松生成跨瀏覽器兼容的JavaScript代碼的工具和函數(shù)。每一個庫都在眾多流行的Web瀏覽器的現(xiàn)代版本上進(jìn)行了可靠的測試，因此，您可以放心地使用這些框架，您的基于JavaScript的RIA將會在不同瀏覽器和平臺上以類似的方式工作。這些框架極大地簡化了開發(fā)進(jìn)程，并帶來一致，可靠，以及高度交互性的用戶界面。5常用的Javascript框架JQueryYUIPrototypeMootoolsExtJSMochiKitDojoKissyComoJSJETJavaScriptMVCQooxdooSproutCoreSenchaTouchIUI6我對框架的分類Javascript庫解決瀏覽器兼容性快速開發(fā)Web應(yīng)用豐富UI效果跨瀏覽器RIA框架類桌面應(yīng)用移動網(wǎng)絡(luò)應(yīng)用APP框架為移動設(shè)備而設(shè)計基于HTML5和CSS37JQueryjQuery由JohnResig創(chuàng)建，其宗旨是——WRITELESS,DOMORE,寫更少的代碼,做更多的事情。它是輕量級的js庫(壓縮后只有21k)，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時還有許多成熟的插件可供選擇。示例：8YUIYahoo!UserInterface(YUI)Library是一組采用DOMscripting，Dhtml和Ajax等技術(shù)開發(fā)的WebUI控件和工具。中文說過來就是“Yahoo用戶界面庫”。Yui

工具包利用DOM腳本來簡化瀏覽器內(nèi)的開發(fā)（in-browser

devolvement），使用DHTML和AJAX的特性開發(fā)所有的Web程序。YUI控件庫為你頁面提供一組高交互性性的可視化元素。這些元素完全在客戶端創(chuàng)建維護(hù)，不需要請求服務(wù)器進(jìn)行頁面刷新。示例：9Prototypeprototype是一個易于使用、面向?qū)ο蟮腏avaScript框架。它封裝并簡化和擴展一些在Web開發(fā)過程中常用到JavaScript方法與Ajax交互處理過程。示例：10MootoolsMooTools是一個簡潔，模塊化，面向?qū)ο蟮腏avaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools從Prototype.js中汲取了許多有益的設(shè)計理念，語法也和其極其類似。但它提供的功能要比Prototype.js多，整體設(shè)計也比Prototype.js要相對完善，功能更強大，比如增加了動畫特效、拖放操作等等。示例：11ExtJSExtJS是一個跨瀏覽器，用于開發(fā)RIA（RichInternetApplication）應(yīng)用的JavaScript框架。提供：高性，可定制的WebUI控件庫。良好的設(shè)計、豐富的文檔和可擴展的組件模型。示例：12MochikitMochiKit是一種有用的高端JavaScript庫。MochiKit主要受到Python和Python標(biāo)準(zhǔn)庫提供的很多便利之處的啟發(fā)，另外還緩解了瀏覽器版本之間的不一致性。其中的MochiKit.DOM尤其方便，能夠以比原始JavaScript更友好的方式處理DOM對象。MochiKit.DOM大部分都是針對XHTML文檔定制的，如果與MochiKit和Ajax結(jié)合在一起，使用XHTML包裝的微格式尤其方便。示例：13DojoDojo是一個強大的面向?qū)ο驤avaScript框架。主要由三大模塊組成：Core、Dijit、DojoX。Core提供Ajax，events，packaging，CSS-basedquerying，animations，JSON等相關(guān)操作API。Dijit是一個可更換皮膚，基于模板的WEBUI控件庫。DojoX包括一些創(chuàng)新/新穎的代碼和控件：DateGrid，charts，離線應(yīng)用，跨瀏覽器矢量繪圖等。示例：14KissyKISSY是一個小巧靈活、簡潔實用的UI類庫，它希望使用者能愉悅編碼、快樂開發(fā)。KeepItSimple&Stupid,Short&Sweet,Slim&Sexy...示例：15ComoJsComoJS是一款代碼簡易而功能強大的Javascript框架，也是作者在工作過程中的經(jīng)驗總結(jié)，實用性強；通過它，能夠簡化Javascript代碼開發(fā)，增強代碼重用性，能夠異步按需加載js和css文件，增強page的加載速度示例：16JetJET適用于WebPage和WebApp的開發(fā)微內(nèi)核設(shè)計

內(nèi)核可完全分離出來，用于構(gòu)建自己的框架自由拼裝各個模塊

命名空間、原生對象零污染

無縫集成各種js框架

與jQuery,YUI,Mootools,Prototype.js等框架無縫集成與多種局部框架無縫集成，如：Mini,Sizzle,cssQuery,xpath,JSON等等多版本共存

如采用的JET版本過舊，舊有的Javascript代碼不能與新版本JET兼容，則可以采用多版本共存的方式保持程序的可延續(xù)性分層設(shè)計

Javascript核心層，與Javascript解釋引擎無關(guān)的封裝和擴展瀏覽器端Javascript層，對瀏覽器中的Javascript引擎部分的封裝和擴展示例：17JavascriptMVCJavaScriptMVC是一個功能強大的JavaScriptframework.也是一個很棒的JavaScript測試框架，它同樣能提高開發(fā)的速度。JavaScriptMVC應(yīng)用了模型-視圖-控制器架構(gòu)模式，把業(yè)務(wù)邏輯和表示分離，使得代碼更加模塊化。示例：18Qooxdooqooxdoo是一個Ajax應(yīng)用框架使用基于面向?qū)ο驤avaScript，它讓你可以用JavaScript來開發(fā)類似于VB/Delphi風(fēng)格的具有Ajax功能的web2.0應(yīng)用程序。qooxdoo具有客戶端瀏覽器檢測功能，具有瀏覽器抽象層，可以無差別的創(chuàng)建跨瀏覽器的Web應(yīng)用程序，它提供方便的調(diào)試接口，具有事件管理、聚焦管理、定時器、邊框和對象屬性等特征。它提供一組窗體組件并擴展了布局，它還提供跨平臺的png圖形透明支持功能。此外，qooxdoo提供一個原子組件，你可以在其基礎(chǔ)上開發(fā)你自己的組件。示例：19SproutCoreSproutCore蘋果對SproutCore的解釋為“開源，平臺無關(guān)，類Cocoa的JavaScript框架，用于創(chuàng)建具有桌面應(yīng)用程序外觀和操作感的Web應(yīng)用程序。”現(xiàn)在有不少Web框架開始使用HTML5中的一些新特性（如離線存儲、HTML5ApplicationCache等）來構(gòu)建富本地（richnative-class）應(yīng)用，而SproutCore則是其中之一。示例：20SenchaTouchSenchaTouch可以讓你的WebApp看起來像NativeApp。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的WEB標(biāo)準(zhǔn)，全面兼容Android和AppleiOS設(shè)備。示例：21SenchaTouch22IUIIUI包含一套JavaScript庫，CSS式樣表及圖片，是一個輕量級iPhoneUI庫，包含iPhone風(fēng)格導(dǎo)航菜單，設(shè)備方向，iPhone風(fēng)格切換等功能，可以為你的Web程序帶來iPhone般的體驗。示例：23IUI24Javascript框架使用比例25Javascript框架使用比例26怎么選擇一款Javascript框架你的項目需求框架支持A級瀏覽器嗎是否利于團(tuán)隊協(xié)作開發(fā)框架是否成熟文檔是否健全社區(qū)支持是否充足框架的擴展性如何你是否喜歡API的風(fēng)格代碼執(zhí)行速度性能如何代碼是否為模塊化代碼可重用性如何27幾個JS框架比較28Jquery29YUIDOM30Prototype31ExtJS32Mootools33Dojo34Kissy35ComoJS36Jquery與YUI詳細(xì)比較DEMO37如何去寫一款框架寫一個穩(wěn)定的API一個命名空間不要擴展原生的對象代碼要容易被擴