AngularJS 有些人覺得難學理由之一,是因為它跟大多數網站所使用的 jQuery 設計思維差很多。
而且 AngularJS 又有內建 jqLite (jQuery 的精簡版),
造成一開始用 AngularJS 設計網站的時候會被 jQuery 的想法牽著走,然後又覺得被 AngularJS 的框架束縛住。
就會覺得 AngularJS 很複雜。
我對 jQuery 跟 AngularJS 整理出的一些想法
1. jQuery vs AngularJS
jQuery 是操作畫面 DOM 的工具函式庫;AngularJS 是軟體框架。
jQuery 的思維來說,開發一個網站的步驟是
AngularJS 思維是
jQuery:
pros: HTML 精簡,不會把邏輯放在 HTML 上
cons: 當網站架構變大時,JavaScript files 最後會很肥,很難維護。
AngularJS:
pros: 依照資源做事,只要分享的資料相同。 HTML 可以簡單的的複製、修改邏輯或維護。
cons: HTML 雜亂,會有大量的邏輯放在 HTML 上。
總之 AngularJS 是從架構這個思維出發。
所以 一開始起步做網頁的時候建立上會比較慢。(因須設計架構)。
可是當未來需要修改 spec 跟維護網站時,會覺得當初的思考架構是值得的。
jQuery 則相反, 非常方便操作 DOM 達到立即需要的效果,可是當要修改 spec 或未來維護的時候就會默默的嘆氣。
綜合以上, 我的建議是
做小型網站時,可以使用 jQuery。(資訊簡單,不會有大量的使用者互動)
製作中大型網站可以使用 AngularJS。(或其他 framework)
2. 從 jQuery 到 AngularJS
StackOverFlow 有一篇關於 "如何從 jQuery 思維轉變到 AngularJS 思維” 的文章。
寫的不錯,本來想要幫整理一下精簡本。可是再寫文章的過程中發現已經有中文版了!
這裡就不多說了,大家點選下面看看吧~~
原文: how do I think in angularjs if have a jquery background
中文翻譯: StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维模式?
3. 須不須要在額外 include jQuery library?
AngularJS 官網說, 當你先 include jQuery library 後, angular.element 裡的 methods 會自動增加 jQuery element 的 method)。
假如沒有載入,就維持原本的 AngularJS jqLite 提供的 methods. (angular.element 列表)
一年前的我:
為了方便性,還是 include jQuery libary 好了。
這樣甚麼都可以用,反正現在 minify 後的檔案又不大。 (oh yeah)
一年後的我:
其實...好像真的用不到 jQuery 的 methods。
需求 AngularJS jqLite 其實都可以做到,只是需要換個角度好好想想。
網路上已經有很多用 AngularJS jqLite 完成的 jQuery methods 應用。
打個比方, 如何用 AngularJS 實做 jQuery.sibilings()
所以當發現 "天阿!! 我需要某個 jQuery methods” 時,先冷靜想想或查查資料。
大部分其實都可以使用 AngularJS jqLite 完成需求的。