Angular和jQuery的區別

前端元件化開發是目前主流的開發方式，不管是 Angular、React 還是 Vue.js 都如此，你可以猛擊《Angular與React、Vue.js的對比》了解更多內容。

相比較而言，Angular 不管是其開發功能，還是程式設計思想，在所有前端框架中都是首屈一指的，特別適合企業級應用的開發。

我從 2014 年開始關注 Angular 的技術發展，並用 Angular 1.x 開發實際的企業級應用。那時，Angular 還只是實現資料雙向系結的 JS 小框架（所以被叫作 AngularJS）。如今，Angular 已經是 7.0 版本，形成了從開發到部署、從 PC 端到行動端完整流程全覆蓋的開放平台。

Angular 的產生與當前的前端開發方式的巨變有著必然聯絡。

Angular 與 jQuery 的不同

傳統的 Web 前端開發主要以 jQuery 為核心技術棧。jQuery 主要用來操作 DOM（Document Object Model，文件物件模型），其最大的作用就是消除各瀏覽器之間的差異，簡化和豐富 DOM 的 API，比如，DOM 文件的轉換、事件處理、動畫和AJAX互動等。

Angular 的優勢

Angular 是一個完整的框架，試圖解決現代 Web 應用開發各個方面的問題。

Angular 有著諸多特性，核心功能包括 MVC 模式、模組化、自動化雙向資料系結、語意化標籤、服務、依賴注入等。而這些概念即便對於後端開發人員來說也不陌生。比如，Java 開發人員肯定知道 MVC 模式、模組化、服務、依賴注入等。

最重要的是，使用 Angular 可通過一種完全不同的方法來構建使用者介面，其中以宣告方式指定檢視的模型驅動的變化；而 jQuery 常常需要編寫以 DOM 為中心的程式碼，隨著專案的增長（無論是在規模還是在互動性方面），將會變得越來越難控制。所以，Angular 更加適合現代的大型企業級應用的開發。

舉例說明 Angular 和 jQuery 的不同

下面通過一個簡單的例子來比較 Angular 與 jQuery 的不同。

假設我們需要實現如下的選單列表：

<ul class="menus">
    <li><a href="#/sm1">Submenu 1</a></li>
    <li><a href="#/sm2">Submenu 2</a></li>
    <li><a href="#/sm3">Submenu 3</a></li>
</ul>

使用 jQuery，我們會這樣實現。首先寫 HTML 程式碼：

<ul class="menus">
</ul>

然後寫 jQuery 程式碼：

$(".menus").each( function(menu){
    $(".menus").append('<li><a href="' + menu.url + '">' + menu.name + '</a></li>');
})

可以看到，在上述遍歷過程中需要操作 DOM 元素。其實，在 JavaScript 裡面寫 HTML 程式碼是一件困難的事，因為 HTML 中包含尖括號、屬性、雙引號、單引號、方法等，在 JavaScript 中需要對這些特殊符號進行跳脫，程式碼將會變得冗長、易出錯，且難以識別。

下面是一個極端的例子，程式碼極難閱讀和理解。

var str = '<a href="#" name="link5" class="menu1" id="link1" onmouseover="MM_showMenu(window.mm_menu_0604091621_0, -10, 20, null,'link5');' + 'sell.style.display='none ';se12.style.display='none';se13.style.display='none';' + 'onmouseout="MM_startTimeout();">Free Services</a>';

document.write(str);

如果使用 Angular，則整段程式碼將會變得非常簡潔，且利於理解：

<ul class="menus">
    <li *ngFor="let menu of menus">
        <a href="{{menu.url}}">{{menu.name}}</a>
    </li>
</ul>