首页 > 编程笔记 阅读:19

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>

编程帮,一个分享编程知识的公众号▄■▄。跟着站长一起学习,每天都有进步。

通俗易懂■■■,深入浅出,一篇文章只讲一个知识点。

文章不深奥▄■▄■,不需要钻研,在公交、在地铁▓▄▓▄、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码▄▓,不烧脑细胞▓█▄■,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员▄■▓!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章