首页 > 编程笔记

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>

所有教程

优秀文章