Angular的变化

AngularJS 2.0正式版本推出以后,AngularJS 1.x统称为沿用以前的称法,AngularJS 2.x及以上版本统称为Angular。AngularJS官网继续沿用以前的地址,Angular则使用了新地址:https://angular.io/。

AngularJS有哪些主要特性呢?MVC、双向数据绑定、指令。可能给我们最印象最深的是双向数据绑定,不过这也是它的诟病,脏值检测机制会导致性能调优困难。而且使用AngularJS还要消化一大堆概念:Module、Scope、Controller、Injector、Service、Factory、Provider、Filter,初学者没几个不吐槽的吧?好消息是,Angular对这些概念进行了简化,同时以Compoent为核心,和React、Vue.js一样,Compoent才是现代Web开发方向。相比AngularJS,Angular具体有哪些重要变化呢?

一、Angular删掉了$scope的概念

在AngularJS里面,$scope是一个相当强大又相当可怕的东西,由于在很多需要回调的场景之下,脏值检测机制无法感知到$scope上发生的变化,因此经常需要开发者自己手动调用 $apply() 方法。典型的场景有:事件回调、setTimeout回调、Ajax 回调等等。Angular响应社区的强烈呼吁,删除(或者说隐藏)了$scope的概念,开发者不再需要感知到它的存在。另外,Angular在底层引入了zone.js,所以即使在各种回调函数中修改数据模型也不需要手动调用 $apply() 方法了。

二、删掉了ng-controller指令

这就意味着Controller不再是一个独立的组件,它合并到Component内部。Component/Directive中也有Controller,而且套装性更好,为什么要多维护一个指令呢?这是一个非常大的演进,因为从大量的实战经验来看,在复杂的业务逻辑中复用Controller几乎是不可能的。

三、大幅度改进了脏值检测机制

众所周知,“双向数据绑定”之所以能运行,是因为Angular底层有“脏值检测”这么一个神奇的机制。而实际上AngularJS里面的脏值检测机制的运行效率非常差,这就是为什么大家一直在抱怨绑定的对象不能太多、太深的原因。Angular大幅度改进了这一机制,不仅引入了单向绑定,还增加了各种检测策略,例如:只检测一次、利用JIT动态生成脏值检测代码等等。毫无疑问,有了这些工具之后,数据绑定效率不再是问题。

四、嵌套路由

AngularJS自带的路由机制不支持嵌套使用功能很阳春,这就导致开发者在日常的开发过程中不得不依赖于第三方的ui-router库。Angular没有这个问题了,因为 Angular的路由是基于Component的,天然支持嵌套。

五、依赖注入机制演进

Angular中的依赖注入写法与Java中的注解(Annotation)非常类似,如果你熟悉Spring注解的用法,那么使用Angular的依赖注入几乎没有学习成本。当然概念上是有区别的,Angular(ES6提案)中叫Decorator(装饰器),更加贴近 Python 里面的Decorator的概念。

六、框架整体上基于TypeScript开发

这是最大的一个变更,有很多人担忧这样是否会带来比较大的学习成本,实际的情况并非如此。因为TypeScript的语法与ActionScript或者C#非常类似,因此对于从Flash或后端转过来的开发者来说,学习这门语言几乎是没有难度的。还有一个重要的方面需要大家注意:TypeScript是Microsoft开发的一门语言,Google + Microsoft这样的组合会产生多么强大的推动力,大家可以想象。Google和Microsoft本身都是重要的浏览器厂商,Chrome和 IE加起来的市场份额占据了一大半的市场份额,未来如果两款浏览器内建TypeScript引擎,很显然TypeScript和Angular的前景将会一片光明。这一优势是大量的同类技术框架根本无法企及的,因此大家在做技术选型的过程中需要综合考虑这些情况作出理性的决策。

值得一提到的是,AngularJS和Angular两个版本的都有Material控件库,该UI控件库都实现了Material Design所提出来的设计风格,Material Design是Google提出来的一种UI设计原则,终极的目标是:用一套UI设计规范来兼容各种各样的设备,例如桌面、平板、大屏幕的电视、车载系统、甚至 watch,从而保证用户体验的一致性。

发表评论

电子邮件地址不会被公开。 必填项已用*标注