Angular2初诞生

[wwjzxycjczf]

为什么要做Angular 2.0呢？为什么一步跨到2.0，并且作了这么多不兼容变更？在2.0中有很多较大的变更，它们真的合理吗？接下来让我们了解下Angular2的动机。

性能

当Angular刚创建的时候，它并不是给开发人员用，它更倾向于给需要快速创建持久化HTML表单的设计人员用。随着时间推移，它作了改变以适应各种场景，开发人员也用它建造更多、更复杂的应用程序。Angular1一直努力增量化地改进设计，允许它适应现代Web应用程序需求的变更。然而，在所能做到的改进上，是有很大局限的，根源在于原始设计中的一些潜规则。很多这种限制，导致了当前的绑定与模板基础架构的性能问题。

模板解析

如插值表达式指令{{}}，指令中所有代码段都是Angular语句，Angular无法发现这些语句，除非解析整个DOM。如果新视图有不同，每次更新都花费一段较长时间来创建和销毁DOM元素，np-repeat指令都会整体创建和销毁DOM元素，时间开销很大。

脏值检测

脏值检测的原理是：我们所有的对数据的赋值都是在某些特性场景下触发的，比如：
UI交互事件
从服务器端获取数据
定时器
在每次操作之后，Angular对数据保留一份复制，然后下一次再有事件发生的时候，把新老数据进行比对，就可以判定哪些数据产生了变更，从而可以更新关联页面。
Angular1里面，对指令都添加了监视器，比如：
按下按钮操作
1、浏览器接收到一个事件
2、angular循环遍历每个监视器看是否发生变化（$digest）
3、如果某个监视器报告发生变化，angular更新数据，并再一次执行循环遍历看看有没有变化
4、如果未检测到变化，更新新值到对于的DOM上，如果还不稳定，就再循环遍历。
循环的上限是10次（超过10次后抛出异常，防止无限循环）。
这样，至少进行了两次循环检测，性能也受到很大影响。

Web变化

web发生巨大变化，其中一个很大变化是提出Web组件，web组件是指：
1、自定义元素，允许通过自定义标签来扩展HTML
2、HMTL Imports，允许对各种资源打包（HTML，CSS，JS等等）
3、模板元素，允许在一个文档中包含insert HMTL
4、Shadow DOM，允许对DOM和CSS的封装
通过组合这四种，web开发人员可以创建声明式组件（自定义元素），并且是完全封装的（Shadow DOM），这些组件可以描述他们自己的视图（模板元素），并且能很容易打包发布给其他开发人员（HTML Imports）。当这些规范在所有主流浏览器都可用的时候，我们就可能会看到开发人员做很多努力来创建可复用的组件，以解决常见问题。在Chrome和其他浏览器这些标准已有实现。
但是现在很多数据绑定框架都尚未准备好应对这些变化。包括Angular1，包含一个数据绑定系统，它构建在一小部分已知的HTML元素和常用事件、行为的基础上。为了能让Angular开发人员享有Web Components，则很需要一个全新的数据绑定实现。

移动端

虽然Angular可以被用于创建移动应用，但它的理念并非为它们设计，包括所有的东西，从性能问题，到路由能力的缺失，不能缓存预编译视图，甚至是过于普通的触摸支持。有些需要根本的变更来修复。

易用性

如图，Angular学习曲线陡峭，不是太容易学。回头看看这个库最初的设计意图吧。比如，最开始是没有自定义指令的，它们都是硬编码的，然后，就有了一个用于添加指令的API。最开始是没有控制器的，然后……你懂的。这种绑死的特性，很多成为了现在的核心理念，导致了API的不优雅。如果Angular真想变的易学易用，那么，从一开始，它就必须对自己的核心特性有清晰的认识。对一个框架而言，如果把指令和控制器当作初始设计的一部分，肯定要比后面逐步拼凑起来要好几个数量级。

综上，angular1存在性能需要优化、没法跟Web Components协作、在移动端上一塌糊涂易用性差等问题，需要作一些变更了。如果不开始解决这些问题，Angular很可能很快被淘汰。为此推出了Angular2，它本质上是为了现代Web而对Angular的重新构建。

来源:xufei/blog#8