淺談我對幾個Web前端開發框架的比較
阿新 • • 發佈：2019-01-20
強調一下，這篇日誌主要還是針對想學前端開發的新朋友寫的，不是說我有什麼獨特見解，而是比較客觀的狀態，就各種框架的異同和應用場合，需要注意的地方做簡單描述，不做具體深入分析，有的地方比較抽象，對於抽象之處大家可以到網上或各大高手部落格中深入學習，當然也可以與我繼續探討。
一直以來對Web前端開發興趣頗深，用過一些框架產品。在JavaEye上看到一些剛接觸前端開發朋友的疑問，猶豫這些產品的前景利弊，不知從何入手。想把自己的一點經驗分享給大家，如有不到位之處請一起來糾正。
jQuery
1. 絕對的萬金油，核心js只有50K，佔用頻寬小，入口網站、管理系統，用在哪都可以。
2. jQuery是對js底層dom操作封裝最薄的一個框架，沒有大量的專有物件，多為提供函式進行dom操作。準確的說，它不是偏重於富客戶端的框架，而是側重於對js dom程式設計。下面幾種才是完整的富客戶端的框架。
3. 我認為它最大的三個亮點，一是支援CSS3的大量選擇符，想定位或選擇一個html元素簡直輕而易舉。二是靈活便捷的Ajax請求和回撥操作。三是事件繫結功能，內部封裝了很多事件，想統一為一個頁面上的一些元素新增事件很方便，這也提高了複用性和可維護性，避免了頁面中出現大量的html屬性。合理的編碼可以使html與js, css分離開，便於維護。
4. 此外它也封裝了很多常用的操作，例如節點的新增刪除、常用的動畫效果、邏輯判斷比較等等。避免了直接使用dom api進行繁瑣的操作。
5. 本身提供了可擴充套件的函式，可以自己編寫外掛與核心jQuery物件進行整合使用。這也是常用的手段，只要你理解js面向物件程式設計，熟悉jQuery API，就能寫出很多定製的外掛，複用在各種地方。
6. 至於jQueryUI，與其他框架不一樣的地方在於，它很少用js去生成html，而是把現有的html通過jQueryUI的API加工成想要的效果，關於這點是好是壞，我覺得就是見仁見智的問題了，沒有必要爭論什麼。
7. 新生的jQuery EasyUI不錯。
8. 如果今後的更新都保持現在這種模式，我認為它的前景很樂觀，什麼時候javascript完蛋了才輪到它玩完。
ExtJS
1. 一整套帶有UI的js庫，封裝得很多，很厚，核心js就600多K，這麼大的東西入口網站當然就別想了，裡面的效果當然也不會運用到入口網站，所以它是專門為管理系統而生的。因為區域網不會有頻寬問題。
2. 它與jQuery不同，基本上是純用js來生成html的，頁面裡只需引入各個ExtJS庫和你自己寫的js，不會出現很多html內容，body裡基本沒什麼。所以優化就顯得重要了，不然會嚴重浪費資源。
3. UI就不說了，大家都認可，本來就是為UI而生，它可以做出來桌面級程式的效果。一般來說，一個管理系統的專案如果用Ext，基本就從始至終都是Ext做了，不會像jQuery那樣，哪想要了就加在哪，很隨意。Ext更像一個整體(雖然它也可以拆開用，不過麻煩，不建議)。
4. 提供了對其他js框架的適配，像對jQuery, prototype等。沒實際應用過，就不說了。
5. 理解js面向物件程式設計在ext中很重要，如果你覺得用jQuery時瞭解簡單的dom和css即可，那你在這就吃大虧了，Ext處處離不開物件的概念。
6. Ext的UI開發類似C#，有很多控制元件。不同的是，你要全部自己手寫，所以開發量較大。現在雖然有Ext Designer視覺化工具，但其效果並不很好，生成的程式碼有的往往不是想要的，不易維護，真做起來還是自己寫更方便。
7. 團隊開發時，必須保證做UI的人每人都會Ext，而且深入應用過，因為Ext專案是整體，不適於參雜html替代。
8. Ext專案在IE系列瀏覽器上不可用，相當卡，我想這不是Ext本身的問題，所謂記憶體洩露等問題現在早已解決了，而且不是關鍵所在。我開很多網頁同時用IE8看jQuery.net官網時有時也會卡，試想他們官網肯定做到很好的優化了吧，jQuery既是如此，何況Ext。反觀其他瀏覽器，FireFox, Chrome等瀏覽Ext專案都很流暢，所以應該是瀏覽器對js解析不同造成的。
9. 版權問題，Ext運用在商業專案中是收費的。
Flex [自己也是在學習中，不敢妄言，以後深入應用後再做補充]
1. Adobe平臺的，基於ActionScript實現，用在哪都行，但偏重於內網管理系統，用在入口網站就相當於線上玩Flash遊戲，loading...
2. 與Ext不同，它有健壯的視覺化開發工具Flash Builder，可以同C#一樣進行拖拽佈局，生成一種xml，也便於維護。
3. 編譯後生成swf檔案直接嵌入html即可，提高安全性，瀏覽時同flash，需要flash player。
4. 與Ext相同，也是屬於一個整體，有豐富的控制元件庫。
5. 這條純屬個人觀點，HTML5不支援插入物件，也就意味著不能插入swf檔案，難道Flex就完蛋了？雖然HTML5不支援Flash是客觀事實，但HTML5的統一為時尚遠，各大瀏覽器對HTML5的支援，Adobe是否會有對策，這些會怎麼樣現在都不好說，HTML5與HTML4並行應該會有很長一段時間，至少Flex在現在是一個名列前茅的好產品，所以我選擇了它。
SilverLight
微軟平臺的，主要是應用在微軟系列的語言中，包括CS與BS架構。同樣，除了jQuery，Asp.net也不適合與以上等框架整合，因為Asp.net是事件驅動，這些框架都是為訊息驅動而生的，勉強應用只會事倍功半，喪失.net本身的優勢。
js面向物件程式設計我一直在提，其實並不難理解，關於這點應該學習下，很有必要。它涉及到程式碼複用、功能擴充套件、物件繼承、閉包、優化等很多問題，能省去不少編碼，便於維護，還能不改變框架原始碼而實現不同的功能。
希望能給剛走進前端開發的朋友一點幫助。
一直以來對Web前端開發興趣頗深，用過一些框架產品。在JavaEye上看到一些剛接觸前端開發朋友的疑問，猶豫這些產品的前景利弊，不知從何入手。想把自己的一點經驗分享給大家，如有不到位之處請一起來糾正。
jQuery
1. 絕對的萬金油，核心js只有50K，佔用頻寬小，入口網站、管理系統，用在哪都可以。
2. jQuery是對js底層dom操作封裝最薄的一個框架，沒有大量的專有物件，多為提供函式進行dom操作。準確的說，它不是偏重於富客戶端的框架，而是側重於對js dom程式設計。下面幾種才是完整的富客戶端的框架。
3. 我認為它最大的三個亮點，一是支援CSS3的大量選擇符，想定位或選擇一個html元素簡直輕而易舉。二是靈活便捷的Ajax請求和回撥操作。三是事件繫結功能，內部封裝了很多事件，想統一為一個頁面上的一些元素新增事件很方便，這也提高了複用性和可維護性，避免了頁面中出現大量的html屬性。合理的編碼可以使html與js, css分離開，便於維護。
4. 此外它也封裝了很多常用的操作，例如節點的新增刪除、常用的動畫效果、邏輯判斷比較等等。避免了直接使用dom api進行繁瑣的操作。
5. 本身提供了可擴充套件的函式，可以自己編寫外掛與核心jQuery物件進行整合使用。這也是常用的手段，只要你理解js面向物件程式設計，熟悉jQuery API，就能寫出很多定製的外掛，複用在各種地方。
6. 至於jQueryUI，與其他框架不一樣的地方在於，它很少用js去生成html，而是把現有的html通過jQueryUI的API加工成想要的效果，關於這點是好是壞，我覺得就是見仁見智的問題了，沒有必要爭論什麼。
7. 新生的jQuery EasyUI不錯。
8. 如果今後的更新都保持現在這種模式，我認為它的前景很樂觀，什麼時候javascript完蛋了才輪到它玩完。
ExtJS
1. 一整套帶有UI的js庫，封裝得很多，很厚，核心js就600多K，這麼大的東西入口網站當然就別想了，裡面的效果當然也不會運用到入口網站，所以它是專門為管理系統而生的。因為區域網不會有頻寬問題。
2. 它與jQuery不同，基本上是純用js來生成html的，頁面裡只需引入各個ExtJS庫和你自己寫的js，不會出現很多html內容，body裡基本沒什麼。所以優化就顯得重要了，不然會嚴重浪費資源。
3. UI就不說了，大家都認可，本來就是為UI而生，它可以做出來桌面級程式的效果。一般來說，一個管理系統的專案如果用Ext，基本就從始至終都是Ext做了，不會像jQuery那樣，哪想要了就加在哪，很隨意。Ext更像一個整體(雖然它也可以拆開用，不過麻煩，不建議)。
4. 提供了對其他js框架的適配，像對jQuery, prototype等。沒實際應用過，就不說了。
5. 理解js面向物件程式設計在ext中很重要，如果你覺得用jQuery時瞭解簡單的dom和css即可，那你在這就吃大虧了，Ext處處離不開物件的概念。
6. Ext的UI開發類似C#，有很多控制元件。不同的是，你要全部自己手寫，所以開發量較大。現在雖然有Ext Designer視覺化工具，但其效果並不很好，生成的程式碼有的往往不是想要的，不易維護，真做起來還是自己寫更方便。
7. 團隊開發時，必須保證做UI的人每人都會Ext，而且深入應用過，因為Ext專案是整體，不適於參雜html替代。
8. Ext專案在IE系列瀏覽器上不可用，相當卡，我想這不是Ext本身的問題，所謂記憶體洩露等問題現在早已解決了，而且不是關鍵所在。我開很多網頁同時用IE8看jQuery.net官網時有時也會卡，試想他們官網肯定做到很好的優化了吧，jQuery既是如此，何況Ext。反觀其他瀏覽器，FireFox, Chrome等瀏覽Ext專案都很流暢，所以應該是瀏覽器對js解析不同造成的。
9. 版權問題，Ext運用在商業專案中是收費的。
Flex [自己也是在學習中，不敢妄言，以後深入應用後再做補充]
1. Adobe平臺的，基於ActionScript實現，用在哪都行，但偏重於內網管理系統，用在入口網站就相當於線上玩Flash遊戲，loading...
2. 與Ext不同，它有健壯的視覺化開發工具Flash Builder，可以同C#一樣進行拖拽佈局，生成一種xml，也便於維護。
3. 編譯後生成swf檔案直接嵌入html即可，提高安全性，瀏覽時同flash，需要flash player。
4. 與Ext相同，也是屬於一個整體，有豐富的控制元件庫。
5. 這條純屬個人觀點，HTML5不支援插入物件，也就意味著不能插入swf檔案，難道Flex就完蛋了？雖然HTML5不支援Flash是客觀事實，但HTML5的統一為時尚遠，各大瀏覽器對HTML5的支援，Adobe是否會有對策，這些會怎麼樣現在都不好說，HTML5與HTML4並行應該會有很長一段時間，至少Flex在現在是一個名列前茅的好產品，所以我選擇了它。
SilverLight
微軟平臺的，主要是應用在微軟系列的語言中，包括CS與BS架構。同樣，除了jQuery，Asp.net也不適合與以上等框架整合，因為Asp.net是事件驅動，這些框架都是為訊息驅動而生的，勉強應用只會事倍功半，喪失.net本身的優勢。
js面向物件程式設計我一直在提，其實並不難理解，關於這點應該學習下，很有必要。它涉及到程式碼複用、功能擴充套件、物件繼承、閉包、優化等很多問題，能省去不少編碼，便於維護，還能不改變框架原始碼而實現不同的功能。
希望能給剛走進前端開發的朋友一點幫助。