web前端框架比較分析

一直以來對Web前端開發(fā)興趣頗深，用過一些框架產(chǎn)品。在JavaEye上看到一些剛接觸前端開發(fā)朋友的疑問，猶豫這些產(chǎn)品的前景利弊，不知從何入手。想把自己的一點(diǎn)經(jīng)驗(yàn)分享給大家，如有不到位之處請一起來糾正。

jQuery

1.絕對的萬金油，核心js只有50K，占用帶寬小，門戶網(wǎng)站、管理系統(tǒng)，用在哪都可以。2.jQuery是對js底層dom操作封裝最薄的一個框架，沒有大量的專有對象，多為提供函數(shù)進(jìn)行dom操作。準(zhǔn)確的說，它不是偏重于富客戶端的框架，而是側(cè)重于對jsdom

編程。下面幾種才是完整的富客戶端的框架。

3.我認(rèn)為它最大的三個亮點(diǎn)，一是支持CSS3的大量選擇符，想定位或選擇一個html元素簡直輕而易舉。二是靈活便捷的Ajax請求和回調(diào)操作。三是事件綁定功能，內(nèi)部封裝了很多事件，想統(tǒng)一為一個頁面上的一些元素添加事件很方便，這也提高了復(fù)用性和可維護(hù)性，避免了頁面中出現(xiàn)大量的html屬性。合理的編碼可以使html與js,css分離開，便于維護(hù)。4.此外它也封裝了很多常用的操作，例如節(jié)點(diǎn)的添加刪除、常用的動畫效果、邏輯判斷比較等等。避免了直接使用domapi進(jìn)行繁瑣的操作。5.本身提供了可擴(kuò)展的函數(shù)，可以自己編寫插件與核心jQuery對象進(jìn)行集成使用。這也是常用的手段，只要你理解js面向?qū)ο缶幊蹋�熟悉jQueryAPI，就能寫出很多定制的插件，復(fù)用在各種地方。

6.至于jQueryUI，與其他框架不一樣的地方在于，它很少用js去生成html，而是把現(xiàn)有的html通過jQueryUI的API加工成想要的效果，關(guān)于這點(diǎn)是好是壞，我覺得就是見仁見智的問題了，沒有必要爭論什么。7.新生的jQueryEasyUI不錯。

8.如果今后的更新都保持現(xiàn)在這種模式，我認(rèn)為它的前景很樂觀，什么時候javascript完蛋了才輪到它玩完。

ExtJS

1.一整套帶有UI的js庫，封裝得很多，很厚，核心js就600多K，這么大的東西門戶網(wǎng)站當(dāng)然就別想了，里面的效果當(dāng)然也不會運(yùn)用到門戶網(wǎng)站，所以它是專門為管理系統(tǒng)而生的。因?yàn)榫钟蚓W(wǎng)不會有帶寬問題。

2.它與jQuery不同，基本上是純用js來生成html的，頁面里只需引入各個ExtJS庫和你自己寫的js，不會出現(xiàn)很多html內(nèi)容，body里基本沒什么。所以優(yōu)化就顯得重要了，不然會嚴(yán)重浪費(fèi)資源。

3.UI就不說了，大家都認(rèn)可，本來就是為UI而生，它可以做出來桌面級程序的效果。一般來說，一個管理系統(tǒng)的項(xiàng)目如果用Ext，基本就從始至終都是Ext做了，不會像jQuery那樣，哪想要了就加在哪，很隨意。Ext更像一個整體(雖然它也可以拆開用，不過麻煩，不建議)。

4.提供了對其他js框架的適配，像對jQuery,prototype等。沒實(shí)際應(yīng)用過，就不說了。5.理解js面向?qū)ο缶幊淘趀xt中很重要，如果你覺得用jQuery時了解簡單的dom和css即可，那你在這就吃大虧了，Ext處處離不開對象的概念。

6.Ext的UI開發(fā)類似C#，有很多控件。不同的是，你要全部自己手寫，所以開發(fā)量較大。現(xiàn)在雖然有ExtDesigner可視化工具，但其效果并不很好，生成的代碼有的往往不是想要的，不易維護(hù)，真做起來還是自己寫更方便。7.團(tuán)隊(duì)開發(fā)時，必須保證做UI的人每人都會Ext，而且深入應(yīng)用過，因?yàn)镋xt項(xiàng)目是整體，不適于參雜html替代。

8.Ext項(xiàng)目在IE系列瀏覽器上不可用，相當(dāng)卡，我想這不是Ext本身的問題，所謂內(nèi)存泄露等問題現(xiàn)在早已解決了，而且不是關(guān)鍵所在。我開很多網(wǎng)頁同時用IE8看jQuery.net官網(wǎng)時有時也會卡，試想他們官網(wǎng)肯定做到很好的優(yōu)化了吧，jQuery既是如此，何況Ext。反觀其他瀏覽器，F(xiàn)ireFox,Chrome等瀏覽Ext項(xiàng)目都很流暢，所以應(yīng)該是瀏覽器對js解析不同造成的。

9.版權(quán)問題，Ext運(yùn)用在商業(yè)項(xiàng)目中是收費(fèi)的。

Flex[自己也是在學(xué)習(xí)中，不敢妄言，以后深入應(yīng)用后再做補(bǔ)充]

1.Adobe平臺的，基于ActionScript實(shí)現(xiàn)，用在哪都行，但偏重于內(nèi)網(wǎng)管理系統(tǒng)，用在門戶網(wǎng)站就相當(dāng)于在線玩Flash游戲，loading...

2.與Ext不同，它有健壯的可視化開發(fā)工具FlashBuilder，可以同C#一樣進(jìn)行拖拽布局，生成一種xml，也便于維護(hù)。

3.編譯后生成swf文件直接嵌入html即可，提高安全性，瀏覽時同flash，需要flashplayer。4.與Ext相同，也是屬于一個整體，有豐富的控件庫。5.這條純屬個人觀點(diǎn)，HTML5不支持插入對象，也就意味著不能插入swf文件，難道Flex就完蛋了？雖然HTML5不支持Flash是客觀事實(shí)，但HTML5的統(tǒng)一為時尚遠(yuǎn)，各大瀏覽器對HTML5的支持，Adobe是否會有對策，這些會怎么樣現(xiàn)在都不好說，HTML5與HTML4并行應(yīng)該會有很長一段時間，至少Flex在現(xiàn)在是一個名列前茅的好產(chǎn)品，所以我選擇了它。

SilverLight

微軟平臺的，主要是應(yīng)用在微軟系列的語言中，包括CS與BS架構(gòu)。同樣，除了jQuery，Asp.net也不適合與以上等框架集成，因?yàn)锳sp.net是事件驅(qū)動，這些框架都是為消息驅(qū)動而生的，勉強(qiáng)應(yīng)用只會事倍功半，喪失.net本身的優(yōu)勢。

js面向?qū)ο缶幊涛乙恢痹谔幔�其�?shí)并不難理解，關(guān)于這點(diǎn)應(yīng)該學(xué)習(xí)下，很有必要。它涉及到代碼復(fù)用、功能擴(kuò)展、對象繼承、閉包、優(yōu)化等很多問題，能省去不少編碼，便于維護(hù)，還能不改變框架源代碼而實(shí)現(xiàn)不同的功能。

我也從應(yīng)用系統(tǒng)的開發(fā)角度說說Flex相關(guān)的優(yōu)缺點(diǎn).缺點(diǎn)：

和以往的技術(shù)相比，F(xiàn)lex沒有JSP這個層次，以往JSP的做用是生成動態(tài)的HTML。因?yàn)镕lex沒有類似的和JSP相同作用的技術(shù)。所以Flex是純靜態(tài)的，是和HTML一樣的靜態(tài)。這種靜態(tài)直接限制了Flex中ComboBox不能直接擁有動態(tài)的不完全確定的Options.，而是Flex顯示到客戶瀏覽器上之后，再進(jìn)行二次請求ComboBox的項(xiàng)。

優(yōu)點(diǎn)：因?yàn)镕lex是靜態(tài)的，他和靜態(tài)HTML，IMG一樣，客戶對他的訪問過程對WEB服務(wù)器沒有什么壓力。

Flex把這種壓力分解到各各客戶的機(jī)器上了。缺點(diǎn)：

客戶機(jī)器上的壓力加大的，客戶能不能受得了。

缺點(diǎn)：因?yàn)槠浔旧淼捏w積較大，所以對網(wǎng)絡(luò)流亮要求高一些，

還有一種特殊的場景：頁面的上的字段個數(shù)不一定，就是說有哪些字段是動態(tài)的，如果用JSP的話，我可以在JSP中寫一個For語句，循環(huán)產(chǎn)生input(文本框)和input組件的相關(guān)屬性與值。但在Flex下，你只能等Flex到客戶瀏覽器之后，再發(fā)一個請求問服務(wù)器，頁面有幾個組件？這幾個組件的相關(guān)屬性是怎么樣的�。糠�務(wù)器把這些信息響應(yīng)回瀏覽器上的Flex，F(xiàn)lex運(yùn)用ActionScript腳本動態(tài)的去建立文本框組件。但在這個過程中，動態(tài)組件的相關(guān)屬性的描述信息，通過網(wǎng)絡(luò)傳送到客戶的機(jī)器之中了。浪費(fèi)了網(wǎng)絡(luò)流量。

優(yōu)點(diǎn)：客戶的體驗(yàn)非常好。前臺開發(fā)過程中代碼自然、流暢、簡潔。在客戶端跨瀏覽器跨系統(tǒng)平臺。可以很方便的開發(fā)自己所需的個性化組件.

較HTML相比，在代碼保護(hù)方面有一定的優(yōu)勢。訪問者不容易看到Flex的代碼。有效的保護(hù)的知識產(chǎn)權(quán)。

因?yàn)檫@條優(yōu)點(diǎn)，所以不能像以前那樣，直接從瀏覽器上看HTML原碼進(jìn)行調(diào)試了。一個大的問題,他對反射支持的不好，

與J2EE的集成開發(fā)環(huán)境還不是特別的成熟，完善。

第一，F(xiàn)lex沒有JSP的層次，F(xiàn)lex的通信基本上都是異步的，而你所說的層次還停留在傳統(tǒng)的交互方式上，這是Flex的一個優(yōu)點(diǎn)，并非缺點(diǎn)。

第二，F(xiàn)lex分解壓力到各各客戶的機(jī)器上，如果程序設(shè)計合理，適當(dāng)增加客戶機(jī)的壓力，從而很有效地減輕了服務(wù)器的負(fù)載，這種情況下，用戶表示鴨梨不大，情緒很蛋定。所以這也是Flex的優(yōu)點(diǎn)，并非缺點(diǎn)。

第三，特殊的場景，JSP是在服務(wù)器端生成HTML的代碼（html組件）再返回到客戶端顯示，F(xiàn)lex是請求服務(wù)器得到組件的相關(guān)屬性（這個數(shù)據(jù)量要比請求JSP小的多），然后再根據(jù)得到的數(shù)據(jù)現(xiàn)實(shí)組件。所以不存在“浪費(fèi)了網(wǎng)絡(luò)流量”這樣一說。

第四，與J2EE的集成開發(fā)環(huán)境還不是特別的成熟，完善這個只是相對，目前來說已經(jīng)相對成熟，完善了，Eclipse+MyEclipse+Flexbuilder(插件版本)組合的IDE可以整合j2ee+flex一體式工程，debug也比較方便。例外，通信方面結(jié)合LCDS/DBS/DGS使用RemoteObject進(jìn)行數(shù)據(jù)訪問。Remote是基于AMF協(xié)議，使用AMF協(xié)議通信比使用HTTP快10被左右。由于AS3和JAVA語法極為相似，在使用RemoteObject遠(yuǎn)程對象調(diào)用和RemoteClass對象的數(shù)據(jù)傳輸，都是比較容易和方便的。這樣的通信方式在目前也是比較先進(jìn)的。

當(dāng)然Flex也有其很多缺點(diǎn)，比如內(nèi)存優(yōu)化和管理，Module的優(yōu)化等等，我們在學(xué)習(xí)和使用的過程中需要對其要有客觀，正確的認(rèn)識。~~~

擴(kuò)展閱讀：幾個Web前端開發(fā)框架的比較

原文在我的博客中，歡迎大家來訪交流

強(qiáng)調(diào)一下，這篇日志主要還是針對想學(xué)前端開發(fā)的新朋友寫的，不是說我有什么獨(dú)特見解，而是比較客觀的狀態(tài)，就各種框架的異同和應(yīng)用場合，需要注意的地方做簡單描述，不做具體深入分析，有的地方比較抽象，對于抽象之處大家可以到網(wǎng)上或各大高手博客中深入學(xué)習(xí)，當(dāng)然也可以與我繼續(xù)探討。

一直以來對Web前端開發(fā)興趣頗深，用過一些框架產(chǎn)品。在JavaEye上看到一些剛接觸前端開發(fā)朋友的疑問，猶豫這些產(chǎn)品的前景利弊，不知從何入手。想把自己的一點(diǎn)經(jīng)驗(yàn)分享給大家，如有不到位之處請一起來糾正。

jQuery

1.絕對的萬金油，核心js只有50K，占用帶寬小，門戶網(wǎng)站、管理系統(tǒng)，用在哪都可以。2.jQuery是對js底層dom操作封裝最薄的一個框架，沒有大量的專有對象，多為提供函數(shù)進(jìn)行dom操作。準(zhǔn)確的說，它不是偏重于富客戶端的框架，而是側(cè)重于對jsdom編程。下面幾種才是完整的富客戶端的框架。

3.我認(rèn)為它最大的三個亮點(diǎn)，一是支持CSS3的大量選擇符，想定位或選擇一個html元素簡直輕而易舉。二是靈活便捷的Ajax請求和回調(diào)操作。三是事件綁定功能，內(nèi)部封裝了很多事件，想統(tǒng)一為一個頁面上的一些元素添加事件很方便，這也提高了復(fù)用性和可維護(hù)性，避免了頁面中出現(xiàn)大量的html屬性。合理的編碼可以使html與js,css分離開，便于維護(hù)。4.此外它也封裝了很多常用的操作，例如節(jié)點(diǎn)的添加刪除、常用的動畫效果、邏輯判斷比較等等。避免了直接使用domapi進(jìn)行繁瑣的操作。

5.本身提供了可擴(kuò)展的函數(shù)，可以自己編寫插件與核心jQuery對象進(jìn)行集成使用。這也是常用的手段，只要你理解js面向?qū)ο缶幊�，熟悉jQueryAPI，就能寫出很多定制的插件，復(fù)用在各種地方。

6.至于jQueryUI，與其他框架不一樣的地方在于，它很少用js去生成html，而是把現(xiàn)有的html通過jQueryUI的API加工成想要的效果，關(guān)于這點(diǎn)是好是壞，我覺得就是見仁見智的問題了，沒有必要爭論什么。7.新生的jQueryEasyUI不錯。

8.如果今后的更新都保持現(xiàn)在這種模式，我認(rèn)為它的前景很樂觀，什么時候javascript完蛋了才輪到它玩完。

ExtJS

1.一整套帶有UI的js庫，封裝得很多，很厚，核心js就600多K，這么大的東西門戶網(wǎng)站當(dāng)然就別想了，里面的效果當(dāng)然也不會運(yùn)用到門戶網(wǎng)站，所以它是專門為管理系統(tǒng)而生的。因?yàn)榫钟蚓W(wǎng)不會有帶寬問題。

2.它與jQuery不同，基本上是純用js來生成html的，頁面里只需引入各個ExtJS庫和你自己寫的js，不會出現(xiàn)很多html內(nèi)容，body里基本沒什么。所以優(yōu)化就顯得重要了，不然會嚴(yán)重浪費(fèi)資源。

3.UI就不說了，大家都認(rèn)可，本來就是為UI而生，它可以做出來桌面級程序的效果。一般來說，一個管理系統(tǒng)的項(xiàng)目如果用Ext，基本就從始至終都是Ext做了，不會像jQuery那樣，哪想要了就加在哪，很隨意。Ext更像一個整體(雖然它也可以拆開用，不過麻煩，不建議)。4.提供了對其他js框架的適配，像對jQuery,prototype等。沒實(shí)際應(yīng)用過，就不說了。5.理解js面向?qū)ο缶幊淘趀xt中很重要，如果你覺得用jQuery時了解簡單的dom和css即可，那你在這就吃大虧了，Ext處處離不開對象的概念。

6.Ext的UI開發(fā)類似C#，有很多控件。不同的是，你要全部自己手寫，所以開發(fā)量較大�，F(xiàn)在雖然有ExtDesigner可視化工具，但其效果并不很好，生成的代碼有的往往不是想要的，不易維護(hù)，真做起來還是自己寫更方便。

7.團(tuán)隊(duì)開發(fā)時，必須保證做UI的人每人都會Ext，而且深入應(yīng)用過，因?yàn)镋xt項(xiàng)目是整體，不適于參雜html替代。

8.Ext項(xiàng)目在IE系列瀏覽器上不可用，相當(dāng)卡，我想這不是Ext本身的問題，所謂內(nèi)存泄露等問題現(xiàn)在早已解決了，而且不是關(guān)鍵所在。我開很多網(wǎng)頁同時用IE8看jQuery.net官網(wǎng)時有時也會卡，試想他們官網(wǎng)肯定做到很好的優(yōu)化了吧，jQuery既是如此，何況Ext。反觀其他瀏覽器，F(xiàn)ireFox,Chrome等瀏覽Ext項(xiàng)目都很流暢，所以應(yīng)該是瀏覽器對js解析不同造成的。

9.版權(quán)問題，Ext運(yùn)用在商業(yè)項(xiàng)目中是收費(fèi)的。

Flex[自己也是在學(xué)習(xí)中，不敢妄言，以后深入應(yīng)用后再做補(bǔ)充]

1.Adobe平臺的，基于ActionScript實(shí)現(xiàn)，用在哪都行，但偏重于內(nèi)網(wǎng)管理系統(tǒng)，用在門戶網(wǎng)站就相當(dāng)于在線玩Flash游戲，loading...

2.與Ext不同，它有健壯的可視化開發(fā)工具FlashBuilder，可以同C#一樣進(jìn)行拖拽布局，生成一種xml，也便于維護(hù)。

3.編譯后生成swf文件直接嵌入html即可，提高安全性，瀏覽時同flash，需要flashplayer。4.與Ext相同，也是屬于一個整體，有豐富的控件庫。

5.這條純屬個人觀點(diǎn)，HTML5不支持插入對象，也就意味著不能插入swf文件，難道Flex就完蛋了？雖然HTML5不支持Flash是客觀事實(shí)，但HTML5的統(tǒng)一為時尚遠(yuǎn)，各大瀏覽器對HTML5的支持，Adobe是否會有對策，這些會怎么樣現(xiàn)在都不好說，HTML5與HTML4并行應(yīng)該會有很長一段時間，至少Flex在現(xiàn)在是一個名列前茅的好產(chǎn)品，所以我選擇了它。

SilverLight

微軟平臺的，主要是應(yīng)用在微軟系列的語言中，包括CS與BS架構(gòu)。同樣，除了jQuery，Asp.net也不適合與以上等框架集成，因?yàn)锳sp.net是事件驅(qū)動，這些框架都是為消息驅(qū)動而生的，勉強(qiáng)應(yīng)用只會事倍功半，喪失.net本身的優(yōu)勢。

js面向?qū)ο缶幊涛乙恢痹谔�，其�?shí)并不難理解，關(guān)于這點(diǎn)應(yīng)該學(xué)習(xí)下，很有必要。它涉及到代碼復(fù)用、功能擴(kuò)展、對象繼承、閉包、優(yōu)化等很多問題，能省去不少編碼，便于維護(hù)，還能不改變框架源代碼而實(shí)現(xiàn)不同的功能。

閑話不多說了，希望能給剛走進(jìn)前端開發(fā)的朋友一點(diǎn)幫助。以后可能還會就js面向?qū)ο缶幊淘賹懸黄�日志，有興趣可以來看看。我的QQ是421557193，有興趣可以與我交流，請注明是IT同行。

友情提示：本文中關(guān)于《web前端框架比較分析》給出的范例僅供您參考拓展思維使用，web前端框架比較分析：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《web前端框架比較分析》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.seogis.com/gongwen/585489.html

• 上一篇：財政局前段群眾工作匯報
• 下一篇：WEB前端開發(fā)規(guī)范