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>