如果你会jQuery该怎么学AngularJS：(上)

在可以熟练使用jQuery进行客户端应用的开发的基础上，想要开始使用Angular.js，在这个过程中有什么必要的模式变化吗？ 如何对客户端web应用进行不同方式的架构和设计？jQuery和Angular.js它们之间最大的区别是什么？ 有什么是不该做的？有什么是应该做的？

关于jQuery和Angular.js之间的详细比较

1. 不要先设计了页面，然后再使用DOM操作改变它的展现

在jQuery中，你一般会设计一个页面，然后再给它动态效果。这是由于jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂生长的。

但是在AngularJS里，必须从头开始就在头脑中思考架构。必须从你想要完成的功能开始，然后设计应用程序，最后来设计视图，而不是“我有这么一个DOM片段，我想让他可以实现XXX效果”。

2. 不要用AngularJS来加强jQuery

不要以这样的思维开始：用jQuery来做X，Y和Z，然后只需要把AngularJS的models和controllers加在这上面，这种做法在刚开始的时候显得超级吸引人。实则AngularJS的新手应该完全不使用jQuery，至少不要在习惯使用“Angular Way”开发之前这么做。

许多开发者使用150或200行代码的jQuery插件创造出复杂的解决方案，然后使用一堆callback函数以及$apply把它粘合到AngularJS里，看起来复杂难懂；但是他们最终还是搞定了！问题是在大多数情况下这些jQuery插件可以使用很少的AngularJS代码重写，而且所有的一切都很简单直接容易理解。

当你选择解决方案时，第一“think in AngularJS”；如果想不出一个解决方案，去社区求助；如果还是没有简单的解决方案，再思考使用jQuery。但是不要让jQuery成为你的拐杖，导致你永远无法真正掌握AngularJS。

3. 总是以架构的角度思考

第一要知道Single-page应用是应用，不是网页。所以你除了像一个客户端开发者般思考外，还需要像一个服务器端开发者一样思考。你必须思考如何把你的应用分割成独立的，可扩展且可测试的组件。

那么要如何做到呢？如何“think in AngularJS”？这里有一些基本原则，对比jQuery。

视图是“Official Record”

在jQuery里，编程改变视图。会将一个下拉菜单定义为一个ul ：

在jQuery里，会在应用逻辑里这样启用这个下拉菜单：

当只关注视图时，这里不会立即明显的体现出任何（业务）功能。对于小型应用，这没什么不妥。但是在规模较大的应用中，事情就会变得难以理解且难以维护。

而在AngularJS里，视图是基于视图的功能。ul声明就会像这样：

这两种方式做了同样的东西，但是在AngularJS的版本里任何人看到这个模版都可以知道将会发生什么事。不论何时一个新成员加入开发团队，他看到这个就会知道有一个叫做dropdownMenu的directive作用在这个标签上；他不需要靠直觉去猜测代码的功能或者去看任何代码。视图本身告知你会发生什么事。这样就清晰多了。

首次接触AngularJS的开发者一般会问这样一个问题：如何找到所有的某类元素然后给它们加上一个directive。这时应该告知他：别这么做。不这么做的缘由是这是一种半jQuery半AngularJS的方式，这么做不好。这里的问题在于开发者尝试在AngularJS的环境里“do jQuery”。这么做总会有一些问题。视图是official record。在一个directive外，绝不要改变DOM。所有的directive都应用在尝试上，意图超级清晰。

记住：不要设计，然后写标签。你需要架构，然后设计。

数据绑定

这是到目前为止最酷的AngularJS特性。这个特性使得前面提到的许多DOM操作都显得不再需要。AngularJS会自动更新视图，所以你不用这么做！在jQuery里，响应事件然后更新内容，就像这样：

对应的视图:除了要思考多个方面，也会遇到前面视图中的问题。但是更重大的是，需要手动引用并更新一个DOM节点。如果想要删除一个log条目，也需要针对DOM编码。那么如何脱离DOM来测试这个逻辑？如果想要改变展现形式怎么办？

这有一点凌乱琐碎。但是在AngularJS里，可以这样来实现：

视图看起来是这个样子的：

但是实则还可以这样来做：

目前如果想使用Bootstrap的alert boxes，而不是一个无序列表，根本不需要改变任何的controller代码！更重大的是，不论log在何处或如何被更新，视图便会随之更新。

数据绑定实则是双向的。所以这些log信息在视图里也可以是可编辑的。只需要这么做：

后面还有哦~请等下次更新

想要了解更多AngularJS干货吗？就在 智能社 直播课堂！

智能社 撰稿，转载请注明来源！