理解AngularJS——从WPF说起

学习新技术对于一个刚入门的程序员来说，约等于买一本XXX从入门到精通；对于一个有一些开发经验的程序员来说，则是到该技术的官网上查阅API文档，从Get Started一步步做起，等大体了解它的常规使用后，可能回去研究它的内部机制等等。最近我也开始厌倦了这种从Get Started开始的方式，在我看来，很多程序员并没有真正理解譬如语言只是工具，思想最重要这样老生常谈的话题，包括我也一样。我想大部分人对于语言只是工具这句话的理解只在于if for这样的语句上，所以这次学习AngularJS的历程，我不想仅仅从官方文档开始，而是真正地去理解它的世界观，因为从整体性学习来解释，联系与拓展知识模型，才是理解一门知识最重要的一环。

当然，学习仍然从官网开始，通过对官网文档的初步阅读，得出AngularJS的以下几个特点：

1. AngularJS是框架，不是类库（如Jquery）
2. AngularJS是一个MVVM思想的框架
3. AngularJS主要用于构建CRUD相关web应用，也就是常规展示或业务网站，并不适用于游戏或是图像相关的web应用

第一点和第三点都较易于理解，第二点这里需要扩展一下。MVVM是WPF独有的技术，它是 Model-View-View Model 的简称。

首先我们要弄清这样一个关系，与表现层相关有四种类型的代码，它们自下而上排列起来分别是：数据模型，业务逻辑，界面逻辑以及界面显示。处理这几种代码关系的最著名莫过于MVC框架思想了，其中，Model负责与数据存储及核心业务逻辑，View负责显示数据，而Controller负责处理用户交互并且和Model打交道。我个人认为，这其实Controller接管了界面逻辑和界面显示两部分代码，本来处理用户与界面交互是MVC设计之初Controller应该做的事情，而现在很多项目的结构将Controller的职责向上扩大到了界面，向下延伸到了业务逻辑，这种现象在一些JS项目中尤为常见，这种设计，对于中小型项目来说，是从单纯的Jquery面条式开发到规范的团队开发方向上迈了一大步。但是，还远远不够，这样的设计在业务迅速膨胀起来时，会出现代码冗余较多，拖慢加载速度的现象，并且在项目中期需要重构时，大量重复的代码的改修是一件很boring的事，这也是在设计时间不够充裕的情况下，不采用已有框架时的一点小问题。

而MVVM的出现，就在一定程度上降低了UI层与逻辑层和存储层之间的耦合。程序=算法+数据结构，JS也不例外。在一般的JS项目中，算法一般分布在这几处：

1. 网络连接（如AJAX，websocket）
2. 传输数据处理（如AJAX回调方法）
3. 业务逻辑 
4. 界面逻辑（如DOM操作，事件处理）
5. 错误处理

在实际开发中，1、2和5都是较为稳定的，我们采用成熟的类库或是自己编写基础代码都是比较快捷容易的事情，而真正占用我们80%开发时间的则是界面逻辑和业务逻辑。而在这80%开发时间中，大部分时间其实则是在处理界面逻辑（由于javascript在现今浏览器中还不够安全，javascript很少用来处理复杂重要的业务逻辑）。说白了，javascript程序员就是在做数据绑定，我们不断地把Model层的数据加工然后通过DOM操作显示在页面上，然后把用户的输入信息加工后传递给网络那边的服务器。而真正的属于javascript该做的一些业务逻辑却一点也没经过推敲。什么才是javascript的业务逻辑呢，在我看来，就是与用户体验相关的逻辑，我们最需要反复推敲的东西，不应该是千篇一律的DOM节点查找，绑定解绑事件，处理回调中的回调函数，而是更快的页面加载速度，更友好的动画体验，更贴心的操作提示等等，而这些东西在真正项目的开发中被称之为优化，而在我看来，这正是javascript的意义所在!

AngularJS中的数据绑定与微软的WPF技术中类似，微软的东西就是这样，很多的先进的理念都隐藏在被不懂程序的程序员所笑话的拖控件开发中。Data Binding在WPF中的作用就在于，它在深层次上帮助程序员把思考的重点固定在了逻辑层，让展示层永远处于逻辑层的从属地位。由于数据绑定的出现，使得GUI编程从“UI驱动”变为了“数据驱动”，MVVM中的ViewModel就是连接界面和逻辑层的桥梁，它如同一个强有力的引擎，不断地将数据加工成文字、图表，又将用户的改动送回逻辑层进行持久化。这样，数据层自成体系，独立运转，它所操作的UI是抽象的，这更利于进行不依赖UI自动化测试工具。

这只是我初步接触AngularJS所想到的一些其它知识，不一定是AngularJS的内部机制，但我想这些思想会帮助我更好的理解AngularJS。