jQuery VS AngularJS 你更鐘愛哪個?

2016-01-09    分類:WEB開發、程式設計開發、首頁精華5人評論發表於2016-01-09

本文由碼農網 – 小峰原創翻譯,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃

在這一次的Web開發教程中,我會盡力解答有關於jQuery和AngularJS的兩個非常常見的問題,即jQuery和AngularJS之間的區別是什麼?也就是說jQuery VS AngularJS?

今天我不會僅僅只是解釋兩者的差異和列舉兩種技術的功能特點,我還會盡量解答一些相關的問題和概念。例如:

  • 什麼時候使用jQuery/AngularJS?
  • 怎樣避免在jQuery樣式中使用AngularJS 的常見錯誤?
  • 從開發人員的角度作程式碼比較
  • 我們能否和AngularJS一起,或在AngularJS的內部使用jQuery?

jQuery

jQuery是一個輕量級的,功能豐富的JavaScript庫,它可以幫助web開發人員通過使用JavaScript來簡化客戶端指令碼對web應用程式的使用。它可以廣泛地簡化在網站上使用JavaScript,既輕巧又快速。

因此,使用jQuery,我們可以:

  • 方便操縱網頁內容
  • 應用樣式使UI更具吸引力
  • 簡單的DOM遍歷
  • 效果和動畫
  • 讓執行AJAX呼叫和執行公用程式變得更簡單
  • 等等

正如前面提到的,jQuery是一個JavaScript庫,所以我們可以在應用程式中部分/全部地使用這個庫來實現它提供的單個或多個功能(如上所列)。例如,我們可以在應用程式中只使用jQuery庫生成一定的效果和動畫,可以只執行基於AJAX的呼叫,也可以使用以上列出的所有功能。就像一個外掛一樣。

AngularJS

AngularJS是出自於搜尋引擎巨頭谷歌的一個產品,並且是一個基於MVC的開源框架(被認為是最好的和唯一的下一代架構)。AngularJS是構建高度豐富的客戶端web應用程式的強大工具。

作為一個框架,它決定了我們必須遵循一些規則和結構化的方法。這不只是一個JavaScript庫,也是一個完美設計的框架(框架工具以一種真正互聯的方式一起工作)。

在功能方面,jQuery VS AngularJS的話,AngularJS能提供更多的功能:

  • 雙向資料繫結
  • REST友好
  • 基於MVC的模式
  • 深層連結
  • 模板
  • 表單驗證
  • 依賴注入
  • 本地化
  • 完整的測試環境
  • 伺服器通訊

注:想要獲得有關MVC的更多詳細資訊,請點選這裡

什麼時候使用jQuery或AngularJS?

在大多數情況下,我們無法在應用程式開發中理解這些技術的真正價值。AngularJS最適合於開發web應用程式,因為它工作在HTML程式碼和JSON資料上,有助於開發互動性和強大的應用程式,但如果是一個簡單的網站,那麼就會導致一個載入速度慢和相當不穩定的網站。

雖然jQuery是一個快速,功能豐富的語言,有一個可圈可點的JavaScript庫,和一個很棒的能夠建立功能豐富的網站的工具。它還有內建的功能,如HTML文件遍歷,事件處理,操作,動畫和Ajax支援,以及其他能讓開發核心網站變得更容易和更簡單的功能。因此在使用這些高度直觀又強大的語言之前,有必要構建一個開發高階web應用程式或網站開發的完善的方法。

不要在jQuery樣式中使用AngularJS

jQuery有大量的外掛存在,因此更方便開發人員在網站上插入這些外掛,讓它們乖乖辦事。另一方面,AngularJS因為其完全不同的結構,使得它很難找到也很難建立一個簡單地放置在網站上就能運作良好的外掛。不過,AngularJS有jqLite,jqLit具備了jQuery的功能,可以用於開發不同的外掛,以滿足每個網站的需要,避開開發或修補舊外掛的程式碼然後嵌入到網站上。

程式碼比較

從開發人員的角度程式碼的比較結果如下:

我們能否和AngularJS一起,或在AngularJS的內部使用jQuery?

在某些情況下,我們可能需要AngularJS應用程式使用jQuery庫。現在,AngularJS可以在應用程式中使用jQuery,當應用程式自展的時候。否則,Angular將使用自帶的jQuery的子集工具,也就是我們在上面提到的jqLite。

最後的思考

在比較AngularJS VS jQuery的同時,我們應該要理解的是,兩者既不能完全取代對方,也不是相互競爭的關係。jQuery最適合DOM操作,而AngularJS適合於web應用程式的開發。所以,如果你想開發強大的應用程式,那麼選擇AngularJS,如果想增加更多的功能,並在網站上執行DOM操作的話,那麼使用jQuery。

譯文連結:http://www.codeceo.com/article/jquery-vs-angularjs.html
英文原文:7 JQuery Best Practices
翻譯作者:碼農網 – 小峰
轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章