web前端框架比較分析

1、一直以來(lái)對(duì) Web 前端開(kāi)發(fā)興趣頗深，用過(guò)一些框架產(chǎn)品。在 JavaEye 上看到一些剛接觸前端開(kāi)發(fā)朋友的疑問(wèn)，猶豫這些產(chǎn)品的前景利弊，不知從何入手。想把自己的一點(diǎn)經(jīng)驗(yàn)分享給大家，如有不到位之處請(qǐng)一起來(lái)糾正。jQuery1 .絕對(duì)的萬(wàn)金油，核心 js 只有 50K,占用帶寬小，門戶網(wǎng)站、管理系統(tǒng)，用在哪都可以。2 .jQuery 是對(duì) js 底層 dom 操作封裝最薄的一個(gè)框架，沒(méi)有大量的專有對(duì)象，多為提供函數(shù)進(jìn)彳Tdom 操作。準(zhǔn)確的說(shuō)，它不是偏重于富客戶端的框架，而是側(cè)重于對(duì) jsdom編程。下面幾種才是完整的富客戶端的框架。3 .我認(rèn)為它最大的三個(gè)亮點(diǎn)，一是支持 CSS3 的大量選擇符，

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

3、就能寫出很多定制的插件，復(fù)用在各種地方。6 .至于 jQueryUI,與其他框架不一樣的地方在于，它很少用 js 去生成 html,而是把現(xiàn)有的 html 通過(guò) jQueryUI 的 API 加工成想要的效果，關(guān)于這點(diǎn)是好是壞，我覺(jué)得就是見(jiàn)仁見(jiàn)智的問(wèn)題了，沒(méi)有必要爭(zhēng)論什么。7 .新生的 jQueryEasyUI 不錯(cuò)。8 .如果今后的更新都保持現(xiàn)在這種模式，我認(rèn)為它的前景很樂(lè)觀，什么時(shí)候 javascript 完蛋了才輪到它玩完。ExtJS1 .一整套帶有 UI 的 js 庫(kù)，封裝得很多，很厚，核心 js 就 600 多 K,這么大的東西門戶網(wǎng)站當(dāng)然就別想了，里面的效果當(dāng)然也不會(huì)運(yùn)用到門戶網(wǎng)站

4、，所以它是專門為管理系統(tǒng)而生的。因?yàn)榫钟蚓W(wǎng)不會(huì)有帶寬問(wèn)題。2 .它與 jQuery 不同，基本上是純用 js 來(lái)生成 html 的，頁(yè)面里只需引入各個(gè) ExtJS 庫(kù)和你自己寫的 js,不會(huì)出現(xiàn)很多 html 內(nèi)容，body 里基本沒(méi)什么。所以優(yōu)化就顯得重要了，不然會(huì)嚴(yán)重浪費(fèi)資源。3 .UI 就不說(shuō)了，大家都認(rèn)可，本來(lái)就是為 UI 而生，它可以做出來(lái)桌面級(jí)程序的效果。一般來(lái)說(shuō)，一個(gè)管理系統(tǒng)的項(xiàng)目如果用 Ext,基本就從始至終都是 Ext 做了，不會(huì)像 jQuery 那樣，哪想要了就加在哪，很隨意。Ext 更像一個(gè)整體（雖然它也可以拆開(kāi)用，不過(guò)麻煩，不建議）。4 .提供了對(duì)其他 js 框架的適配

5、，像對(duì) jQuery,prototype 等。沒(méi)實(shí)際應(yīng)用過(guò)，就不說(shuō)了。5 .理解 js 面向?qū)ο缶幊淘?ext 中很重要，如果你覺(jué)得用 jQuery 時(shí)了解簡(jiǎn)單的 dom 和 css即可，那你在這就吃大虧了，Ext 處處離不開(kāi)對(duì)象的概念。6 .Ext 的 UI 開(kāi)發(fā)類似 C#,有很多控件。不同的是，你要全部自己手寫，所以開(kāi)發(fā)量較大?，F(xiàn)在雖然有ExtDesigner 可視化工具，但其效果并不很好，生成的代碼有的往往不是想要的，不易維護(hù)，真做起來(lái)還是自己寫更方便。7 .團(tuán)隊(duì)開(kāi)發(fā)時(shí)，必須保證做 UI 的人每人都會(huì) Ext,而且深入應(yīng)用過(guò)，因?yàn)?Ext 項(xiàng)目是整體，不適于參雜 html 替代。8 .E

6、xt 項(xiàng)目在 IE 系列瀏覽器上不可用，相當(dāng)卡，我想這不是 Ext 本身的問(wèn)題，所謂內(nèi)存泄露等問(wèn)題現(xiàn)在早已解決了，而且不是關(guān)鍵所在。我開(kāi)很多網(wǎng)頁(yè)同時(shí)用 IE8 看 jQ 官網(wǎng)時(shí)有時(shí)也會(huì)卡，試想他們官網(wǎng)肯定做到很好的優(yōu)化了吧，jQuery 既是如此，何況 Ext。反觀其他瀏覽器，F(xiàn)ireFox,Chrome 等瀏覽 Ext 項(xiàng)目都很流暢，所以應(yīng)該是瀏覽器對(duì) js 解析不同造成的。9 .版權(quán)問(wèn)題，Ext 運(yùn)用在商業(yè)項(xiàng)目中是收費(fèi)的。Flex自己也是在學(xué)習(xí)中，不敢妄言，以后深入應(yīng)用后再做補(bǔ)充1 .Adobe 平臺(tái)的，基于 ActionScript 實(shí)現(xiàn)，用在哪都行，但偏重于內(nèi)網(wǎng)管理系統(tǒng)，用在門戶網(wǎng)站就

7、相當(dāng)于在線玩 Flash 游戲，loading.2 .與 Ext 不同，它有健壯的可視化開(kāi)發(fā)工具 FlashBuilder,可以同 C#一樣進(jìn)行拖拽布局，生成一種 xml,也便于維護(hù)。3 .編譯后生成 swf 文件直接嵌入 html 即可，提高安全性，瀏覽日同 flash,需要 flashplayer。4 .與 Ext 相同，也是屬于一個(gè)整體，有豐富的控件庫(kù)。5 .這條純屬個(gè)人觀點(diǎn)， HTML5 不支持插入對(duì)象， 也就意味著不能插入 swf 文件， 難道 Flex 就完蛋了？雖然HTML5不支持Flash是客觀事實(shí)， 但HTML5的統(tǒng)一為時(shí)尚遠(yuǎn)， 各大瀏覽器對(duì)HTML5的支持， Adobe是否

8、會(huì)有對(duì)策，這些會(huì)怎么樣現(xiàn)在都不好說(shuō)，HTML5 與 HTML4并行應(yīng)該會(huì)有很長(zhǎng)一段時(shí)間，至少 Flex 在現(xiàn)在是一個(gè)名列前茅的好產(chǎn)品，所以我選擇了它。SilverLight微軟平臺(tái)的，主要是應(yīng)用在微軟系列的語(yǔ)言中，包括 CS 與 BS 架構(gòu)。同樣，除了 jQuery,A 也不適合與以上等框架集成，因?yàn)?A 是事件驅(qū)動(dòng)，這些框架都是為消息驅(qū)動(dòng)而生的，勉強(qiáng)應(yīng)用只會(huì)事倍功半，喪失.net 本身的優(yōu)勢(shì)。js 面向?qū)ο缶幊涛乙恢痹谔?，其?shí)并不難理解，關(guān)于這點(diǎn)應(yīng)該學(xué)習(xí)下，很有必要。它涉及到代碼復(fù)用、功能擴(kuò)展、對(duì)象繼承、閉包、優(yōu)化等很多問(wèn)題，能省去不少編碼，便于維護(hù)，還能不改變框架源代碼而實(shí)現(xiàn)不同的功能。我

9、也從應(yīng)用系統(tǒng)的開(kāi)發(fā)角度說(shuō)說(shuō) Flex 相關(guān)的優(yōu)缺點(diǎn).缺點(diǎn)：和以往的技術(shù)相比，F(xiàn)lex 沒(méi)有 JSP 這個(gè)層次，以往 JSP 的做用是生成動(dòng)態(tài)的 HTML。因?yàn)?Flex 沒(méi)有類似的和 JSP 相同作用的技術(shù)。 所以 Flex 是純靜態(tài)的， 是和 HTML 一樣的靜態(tài)。 這種靜態(tài)直接限制了 Flex中 ComboBox 不能直接擁有動(dòng)態(tài)白不完全確定的 Options.,而是Flex 顯示到客戶瀏覽器上之后，再進(jìn)行二次請(qǐng)求 ComboBox 的項(xiàng)。優(yōu)點(diǎn)：因?yàn)?Flex 是靜態(tài)的，他和靜態(tài) HTML,IMG 一樣，客戶對(duì)他的訪問(wèn)過(guò)程對(duì) WEB 服務(wù)器沒(méi)有什么壓力。Flex 把這種壓力分解到各各客戶的

10、機(jī)器上了。缺點(diǎn)：客戶機(jī)器上的壓力加大的，客戶能不能受得了。缺點(diǎn)：因?yàn)槠浔旧淼捏w積較大，所以對(duì)網(wǎng)絡(luò)流亮要求高一些，還有一種特殊的場(chǎng)景：頁(yè)面的上的字段個(gè)數(shù)不一定，就是說(shuō)有哪些字段是動(dòng)態(tài)的，如果用JSP 的話，我可以在 JSP 中寫一個(gè) For 語(yǔ)句，循環(huán)產(chǎn)生 input（文本框）和 input 組件的相關(guān)屬性與值。但在 Flex 下，你只能等 Flex 到客戶瀏覽器之后，再發(fā)一個(gè)請(qǐng)求問(wèn)服務(wù)器，頁(yè)面有幾個(gè)組件？這幾個(gè)組件的相關(guān)屬性是怎么樣的??？服務(wù)器把這些信息響應(yīng)回瀏覽器上的Flex,Flex運(yùn)用ActionScript腳本動(dòng)態(tài)的去建立文本框組件。但在這個(gè)過(guò)程中，動(dòng)態(tài)組件的相關(guān)屬性的描述信息，通過(guò)網(wǎng)

11、絡(luò)傳送到客戶的機(jī)器之中了。浪費(fèi)了網(wǎng)絡(luò)流量。優(yōu)點(diǎn)：客戶的體驗(yàn)非常好。前臺(tái)開(kāi)發(fā)過(guò)程中代碼自然、流暢、簡(jiǎn)潔。在客戶端跨瀏覽器跨系統(tǒng)平臺(tái)。可以很方便的開(kāi)發(fā)自己所需的個(gè)性化組件較 HTML 相比，在代碼保護(hù)方面有一定的優(yōu)勢(shì)。訪問(wèn)者不容易看到 Flex 的代碼。有效的保護(hù)的知識(shí)產(chǎn)權(quán)。因?yàn)檫@條優(yōu)點(diǎn)，所以不能像以前那樣，直接從瀏覽器上看 HTML 原碼進(jìn)行調(diào)試了。一個(gè)大的問(wèn)題，他對(duì)反射支持的不好，與 J2EE 的集成開(kāi)發(fā)環(huán)境還不是特別的成熟，完善。第一，F(xiàn)lex 沒(méi)有 JSP 的層次，F(xiàn)lex 的通信基本上都是異步的，而你所說(shuō)的層次還停留在傳統(tǒng)的交互方式上，這是 Flex 的一個(gè)優(yōu)點(diǎn)，并非缺點(diǎn)。第二，F(xiàn)lex

12、 分解壓力到各各客戶的機(jī)器上，如果程序設(shè)計(jì)合理，適當(dāng)增加客戶機(jī)的壓力，從而很有效地減輕了服務(wù)器的負(fù)載，這種情況下，用戶表示鴨梨不大，情緒很蛋定。所以這也是 Flex 的優(yōu)點(diǎn)，并非缺點(diǎn)。第三，特殊的場(chǎng)景，JSP 是在服務(wù)器端生成 HTML 的代碼（html 組件）再返回到客戶端顯示，F(xiàn)lex 是請(qǐng)求服務(wù)器得到組件的相關(guān)屬性（這個(gè)數(shù)據(jù)量要比請(qǐng)求 JSP 小的多），然后再根據(jù)得到的數(shù)據(jù)現(xiàn)實(shí)組件。所以不存在浪費(fèi)了網(wǎng)絡(luò)流量”這樣一說(shuō)。第四，與 J2EE 的集成開(kāi)發(fā)環(huán)境還不是特別的成熟，完善這個(gè)只是相對(duì)，目前來(lái)說(shuō)已經(jīng)相對(duì)成熟，完善了，Eclipse+MyEclipse+Flexbuilder（插件版本）組合的 IDE 可以整合 j2ee+flex 一體式工程，debug 也比較方便。例外，通信方面結(jié)合 LCDS/DBS/DGS 使用 RemoteObject 進(jìn)行數(shù)據(jù)訪問(wèn)。 Remote是基于 AMF 協(xié)議