AngularJS 與 JavaScript, 在我看來, 都屬於 2014 年度最佳框架(語言)。
全棧 VS 簡單
有人說, AngularJS 太龐大了, 太復雜了, 根本就是發展方向錯誤. 實則不然, 相反, 我的觀點是, 全棧解決方案遠大於簡單的方案.
既然我對 Rails 很熟悉, 我來舉壹個 Ruby 界的例子: Rails vs Sinatra. 壹個是復雜到 Web 整站解決方案, 既包括了後端, 還包括了前端, 連打包, 壓縮, 布署都幫妳做好了. 而另壹個則是簡單到極致, 幾行代碼就可以寫壹個 Web 服務. 然而, Sinatra 永遠無法打敗 Rails, 只能處於小眾圈子. 因為只要項目壹大, 他們就要重新造壹遍 Rails 的輪子.
這個時候, 大部分人需要的是全棧解決方案, 不是小而美的東西.
那麽, 顯而易見, BackboneJS 與 ReactJS 從這個競爭中出局了.
實際上, AngularJS 像 Rails 壹樣, 它內部的輪子是可自由替換的, 事實上, 全棧的背後也是以簡單作為基礎的.
思想的背後
EmberJS 是 AngularJS 強有力的對手, 有很多支持者, EmberJS 的核心實現也是從 Rails 學到了很多東西.
但為什麽大家依然選擇了 AngularJS, 我以為真正核心的原因只有壹點: 壹個框架的哲學思想.
貌似有點深奧, 實際上很簡單: AngularJS 從壹誕生, 就認定了壹件事: 在 Web 世界裏, 聲明式語法要遠遠好於命令式語法. 從這壹點, 就引出了 AngularJS 的主要特性:
雙向數據綁定
永不操作 DOM
而 EmberJS, 壹開始就是 Rails 在前端的實現, 當然很多概念不適用, 並且有些特性又不夠, 而現在, 也是補了許多該有的特性, 比如正在開發中的 HTMLBars, View 層無法理解 DOM( HandleBars 只能理解字符串 )是壹個硬傷, 這讓 AngularJS 優勢太明顯了: 哲學概念單壹, 便於理解. 而 EmberJS, 更像壹個後端的思想的框架, 有點水土不服.
或者, 應該換個說法: AngularJS 就像官方想做的那樣, 只是想擴展 HTML 語法, 而不得不造了壹些概念. 而 EmberJS 則是為了實現而實現. 如果妳深入使用, 自會明白我的意思.
易於上手
AngularJS 真的太容易上手了, 當妳做過官網上的 Hello World 例子後, 妳就會驚訝: 原來不會 JavaScript 也能寫好 Web2.0.
而 Ember 則壹開始就教妳理解各種概念, controller, action, template, router. 等壹等, 我們需要壹步步向上爬.
但是, 沒有銀彈
隨著前端項目的復雜度上升, jQuery 這種命令式語法已經無法管束整個項目的高質量推進. 但 AngularJS 也不是銀彈.
我們俗話有講: 進入壹個世界, 往往會放棄另外的世界. 這放與 AngularJS 身上非常合適: 正是 AngularJS 想把它的哲學思想做到極致, 才會帶來諸多新的問題:
動態作用域問題
依賴註入問題
digest loop 雙向綁定性能問題
directives 不必要的復雜度
這幾點, 相信妳只要是 AngularJS 深入使用過都會遇到類似問題.
我們看中它的優點, 用它來開發極動感的 AngularJS 前端應用, 也須理解並避開它的缺點.
1. 動態作用域
由於 AngularJS 雙向綁定的需要, 妳必須給數據指派壹個域( scope ), 就像 JavaScript 中的 function, 會將每個不同的域中的數據隔開開來. 但不同的是, JavaScript 或 Java 等擁有完整語言特性的語言, 它們的 scope 的行為是預定義的, 只有有限的幾種. 而 scope 則不然, 妳無法真正理解它, 就無法理解為什麽在 ng-repeat 中修改綁定的值卻對應 controller 中的值是無效的壹樣困惑不解. 但是, 好的是, 當妳真正成為程序員時, 妳就會豁然開朗.
2. 依賴註入問題
這個問題出現的原因也是由於 AngularJS 的哲學導致: 依賴概念要夠簡單. 開發者想了壹個極取巧的方法: 利用參數的名字作為依賴註入的對象. 正是因為 JavaScript 的強大多變, 他們才能做的到.
然而, 新手們總是發現, 坑來了: 為什麽壓縮後代碼就不能用了? 高手們說: 我們專門做了個輪子, 避免妳打包出錯. 新手們: 好牛X...
3. 雙向綁定的性能問題
雙向綁定的目的是大大提高我們開發者的效率, 卻因為當今瀏覽器引擎的"缺陷"( 無法真正理解事件影響範圍 ), 而只能采用最笨拙的思路:
只要有事件觸發, 就全面執行壹次所有的監聽( watcher ), 如果監聽中有新的值出現, 則再次執行所有的監聽, 進行重新計算, 反復最多 10 次.
這裏就不解釋原理了. 簡而易見, 這裏可能有性能問題.
但經過測試, 只要綁定對象不超過 2000 次, 則每壹次 loop 都不會超出 50 ms. 這個時間差對我們人眼是無感知的.
但我認為, 比起這壹點潛在的性能問題( 而且是可以輕松調優的, chrome 下有很好用的插件 ), 我們還是值得去學習應用 AngularJS 的.
4. directives 不必要的復雜度
這個問題是唯壹壹個從設計上欠考慮的模塊了. directives 是壹個好東西, 妳可以用它來封裝各種 HTML 操作, 然後把它們做成組件. 這個特性太酷了.
本來, 壹鼓做氣, 就可以把 ReactJS 比下去, 可是, 由於設計缺失. 我們只能得到壹個半成品:
語法定義非常蛋疼
scope 在其中非常繞, 難於理解
parser, link 等對於普通開發人員暴露的東西太多, 而難於理解. 而問題是, 對於我們普通開發者而言, 這個 directives 特性是我們必修的.
總結
AngularJS 依然擁有不可比擬的優勢, 占據前端開發框架之首也是理所當然. 但 AngularJS 第壹代框架確實不夠大氣, 第二代框架又太超前, 我們也不得不像使用 JavaScript 那樣"坑"的語言那樣來使用 AngularJS 了. 因為, 我們確實找不到更滿意的取代品了.
更為可喜的是, AngularJS 的測試框架設計的極為出色, 這也讓它能夠不斷快速叠代, 也讓我們寫的應用更為健壯.