Angular說:這個鍋我不背

亞里士朱德發表於2016-05-30

楔子

最近月影大神翻譯的一篇文章很火——《別責怪框架:我使用 AngularJS 和 ReactJS 的經驗》,標題看似客觀,不過先揚後抑,借黑Angular之際狠讚了一下React。

看完之後也讓我有感而發。寫這篇文章的目的,並不是想反作者之道,褒Angular貶React,只是希望讀者拋開個人情緒,對兩者(或者Angular?)有一個更客觀地認識。

ReactJS與Angular

還記得一年前剛接觸Angular的時候感覺既驚喜又恐懼。驚喜的是雙向繫結、指令…這些功能太炫酷了,恐懼的是感覺是在重新學習一門新的語言,如果說小米重新定義了手機的話,那麼Angular應該是重新定義了javascript。

它的模組功能以及依賴注入很像AMD規範的requirejs,它的檢視資料繫結更像是DOM操作升級版,它的路由功能又與backbone有異曲同工之妙,內建的$q$http服務很好的解決了非同步通訊問題,不和jquery衝突的同時內建了類似jquery風格的原生DOM操作方式…最難能可貴的是,它還提供了單元測試和端到端的解決方案。

而對ReactJS我還只停留在hello world的層次,曾經在知乎上看到有人評價react的時候說是因為Angular的指令系統太難學,所以搞了一套這個玩意,不知真假。參考官網宣傳及各種文章對react的吹捧,覺得優點應該有3個吧:

元件化

Angular的指令完全能實現元件化,支援巢狀和資料繫結,它的依賴注入使得引用也非常方便。

虛擬DOM提升效能

PC端上就現代瀏覽器核心的渲染效能而言,用Angular沒出現過什麼效能問題。

移動端在操作比較多的DOM時,低端機上會出現卡頓。不過還是有優化方案的,而且Angular本身也是不提倡頻繁、大量的操作DOM,比如HTML遊戲。

React Native

我看好React的原因很大程度在於它,這種跨平臺能力還是很有價值的。這一點也是可以秒殺Angular的,不過目前還不瞭解是否有成熟的大型應用~

解決方案

對於文中所提問題,我以自己對Angular的粗淺瞭解,花了幾分鐘,試著解答了一下~

1.改變 URL 的時候不重新載入 controller 或者渲染基礎模板。

如果認真看了官方文件關於$location服務的介紹之後,要解決這個問題並不難。通過$location服務在hash值中新增url引數,這個引數不在路由中配置就不會重新整理controller和檢視,同時,又可以通過$location服務來獲取它。具體方法我已寫在了issue上。

2.想要從一個準備傳送給伺服器的 JSON 中移除一些空白欄位時,發現 UI 中對應的資料也被一併移除了 —— 丫的雙向繫結 ╮(╯▽╰)╭。

雙向繫結應該是利大於弊的(雖然髒檢測機制經常遭人詬病),基本上不再需要手動操作DOM。簡化了邏輯,少了很多重複程式碼,同時也減少了檢視與資料層忘記同步帶來的錯誤。

這個問題當然也非常好解決,前提是如果你讀過官方文件關於表示式的表述。那就是用用雙冒號::可以實現單次繫結,之後運算元據就不會再與檢視同步了,或者直接建立一個只含需要屬性的新物件更簡單,方法很多~

3.當想要使用 ngShow 和 ngHide 來顯示一個 HTML 塊同時隱藏另一個 HTML 塊時,在一瞬間,兩者同時顯示了。

ng-cloak和loading頁,隨便選一個即可。

寫在最後

很多人都有一種畏難的心理,放棄學習Angular,或者向之前文章作者那樣趕鴨子上架地被迫學習,從而變得痛恨,(就像你沒有使用過VIM就無法理解為什麼它被稱作編輯器之神,不知道它是如何依靠“模式”來實現無滑鼠操作游標,不知道它的巨集之強大…)這其實是一種損失。因為Angular確實是一個優秀的框架,它的優秀不僅僅在於前面我說的那些優點。它不單單是強大的開發框架,更像是飽含了作者設計思想和理念的藝術品(當你閱讀完官網開篇介紹的最後一部分:Angular的禪道之時愈發會有此感)。

最後引用羅胖說過的一句話做為文章的結尾。

“我創業之後越來越少負面地區評價一個人和一件事,是因為我清楚地知道,一旦我做出這樣一個結論,以我的知識和邏輯能力,我馬上會編造一套理由,在自己內心裡來論證自己這個判斷。而因此的結果就是我從此喪失了對這個人這個事代表的所有現象的好奇心和求知慾,也就是說,我認知的大門就關上了。”

打賞支援我寫出更多好文章,謝謝!

打賞作者

打賞支援我寫出更多好文章,謝謝!

任選一種支付方式

Angular說:這個鍋我不背 Angular說:這個鍋我不背

相關文章