比較Angular/jQueryUI/Extjs:沒有一個框架是萬能的

Angular不能做什麼?對比Angular/jQueryUI/Extjs

 

框架就好比兵器,你得明白你手裡拿的是屠龍刀還是倚天劍,刀法主要是砍,劍法主要是刺。對於那些職業噴子和腦殘粉,小僧送你們兩個字:呵呵;同時祝你幸福,請點右上角。

 

首先要明白Angular不能做什麼,或者Angular沒有提供什麼,然後再來看它能做什麼,來看Angular與其它一些主流框架的對比。

 

 


angular-jqueryui-extjs-no-one-is-omnipotent-framework-01
 

 

對於上面的表格,有人可能要跟我抬槓,咱大jQuery不是有各種插件嗎!不是有各種EasyUI、LigerUI等等一大堆UI嗎!

 

我只想說,你特麼到底有沒有做過大型的開發?各種東西倒騰在一起的組裝貨能比得上品牌機?另外遇到jQuery版本不兼容就夠你喝一壺了吧!說jQueryUI各種亂已經是對它客氣了,實際上是一塌糊塗!

 

提醒某些小白區分好概念,小僧的噴點是jQueryUI,而不是jQuery,jQuery這把小巧玲瓏的瑞士軍刀小僧還是非常喜歡滴!另外,也有 一批基於jQuery的UI套件做得非常優秀,比如KendoUI,但是一分錢一分貨,好東西基本上都是收費的。這麼多年下來了,你應該早就習慣了這條行 規。再說一次,好!東!西!都!是!收!費!的!

 

又有人說,怎麼沒把bootstrap列在裡面對比一下?請問油漆桶和Tank戰車怎麼比?你比給我看看。

 

關於前端UI體系的特別說明

 

對於前端UI系統,特別說明一下。一般來說,前端UI必須包含以下控件和工具(參照了我最熟悉的Extjs):

 

  • Form

    TextField

    NumberField

    PassWord

    ComboBox

    CheckBox

    Radio

    DatePicker/TimePicker(日期和時間控件一般沒有人會自己去寫,太複雜了!

    表單驗證:本地驗證和遠程驗證

  • DataGrid

    複雜表頭、數據格式、行內各種格式、動態編輯、分頁、動態列、滾動(等等)

    完善的數據表格也是一個非常複雜的控件,完全自己開發不容易!

  • Tree

  • Window

    模態/非模態

  • Panel

  • TabPanel

    tab懶加載(內存釋放和瀏覽器兼容性比較繁瑣,做完善不容易!

  • HTMLEditor

    應該沒有哪個瘋子想自己去做一個類似KindEditor那樣在線編輯器吧!什麼?你想做?藥不能停!

  • 小組件

    ToolTip

    Slider

    Pager

    ProgressBar

    Menu

    Label

    Image

    Alert

  • 佈局

    佈局系統是比較複雜的,必須有深厚的CSS基礎,否則搞出來的東西一定有兼容性問題!好吧,我知道有人肯定要說bootstrap了,既然都在說那麼小僧就不說了,自己玩兒去!

  • 其它工具

    Ajax

    模板

    數據格式化

    其它各種控件就不說了,比如幻燈片效果、面包屑,再比如「×款超棒的jQuery××」等等。

 

Angular沒有提供完善的UI,沒有提供CSS樣式套件,也沒有對移動平台進行直接支持。所以,如果你使用Angular,你一定需要其它東西來配合。例如,如果需要UI,你需要使用jQueryUI,或者自己封裝UI組件;如果需要CSS樣式,你可以選擇bootstrap或者LESS;如果需要支持移動平台,還是需要你自己 去開發。

 

好了,看到這裡有人開始嘀咕了,這特麼豈不是什麼都沒有嘛!!!

 

莫急,再來看Angular有什麼。

 

Angular能做什麼?

 

1、自動化的數據雙向綁定;

2、MVC;

3、依賴注入---DI系統;

4、指令系統(可以自定義語義化標籤)---Directive機制;

5、模塊化---Module機制;

6、路由機制---Route機制;

7、服務---Service機制;

8、內嵌表達式---Expression機制;

9、前端代碼單元測試和集成測試的自動化(借助於Yeoman等工具);

10、模板;

11、動態加載;

 

這麼多機制裡面,核心的核心是指令系統,實際上其它所有特性都是建立在指令系統之上的。本質上說,Angular寫了一個JS版的編譯器,一切都構 建在這款編譯器之上。對於使用者來說,可以把解析器看成一個JS虛擬機,有興趣的人可以自己閱讀Angular的Parser(HTML解析器)源碼。

 

HTML解析器機制是其它所有框架所不具備也不敢這樣做的,它是Angular的靈魂。

 

結論

 

很顯然,Angular並沒有打算做一個高大全的所謂【框架】,它的核心價值在於,把一堆後台框架的概念帶到了前端框架中,比如依 賴注入(來自Spring);同時又從其它地方抄了一些概念,比如數據自動雙向綁定(貌似來自Flex)、模板、MVC、動態加載(來自 RequireJS等),等等。當然,這些理念都挺好。基於這些理念和工具,你可以把前端應用組織得非常良好。

 

但是,有一點請特別注意(尤其那些負責技術選型的所謂「架構屍」,請瞪大你的鈦合金狗眼看好下面的內容):對於界面非常複雜的業務 型系統,必須要要有完備的UI支持(Form、DataGrid、Tree、Tab、Window等)。如果你的團隊整體JS水平很爛,或者壓根沒打算自 己去做很多東西,請慎用AngularJS!尤其是那些只有兩三條破槍,連美工都沒有的小公司,您請靠邊兒涼快,這兒沒您什麼事兒。

 

最後的最後

 

沒有一款框架能做所有事情,因為從來就 沒!有!銀!彈!(提醒小白,這個詞出自《人月神話》)

 

對於那種幻想用一種框架(包括付費購買的)就能解決所有問題的小屁孩,扔給他一根棒棒糖吧!

 

 

其它相關內容:

1、OReilly的《AngularJS》已經翻譯完成,即將由電子工業出版社出版

http://damoqiongqiu.iteye.com/blog/1909041

2、《AngularJS》5個實例詳解Directive(指令)機制

http://damoqiongqiu.iteye.com/blog/1917971

3、AngularJS表單基礎

http://damoqiongqiu.iteye.com/blog/1920191

4、AngularJS Form 進階:遠程校驗和自定義輸入項

http://damoqiongqiu.iteye.com/blog/1920993

5、AngularJS:在Windows上安裝Yeoman

http://damoqiongqiu.iteye.com/blog/1885371

6、使用JsTestDriver實現JavaScript單元測試

http://damoqiongqiu.iteye.com/blog/1924415

 

 

 

原文:http://damoqiongqiu.iteye.com/blog/1922004