相比较而言,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>
原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/23449.html