一、DOM 和 jQuery 编程

大家都知道，前端开发，离不开三个东西：

• HTML
• JavaScript
• CSS

这三样东西分别完成了前端页面的结构，行为以及样式三个要素。所谓的前端开发，从技术的角度去理解，无非是对结构，行为和样式的 CRUD。而如果我们不使用任何 API，纯粹使用 DOM 编程，本质上就是在改变网页的结构，行为及样式。虽然我们后来有了 jQuery，我们做前端开发的本质并没有发生变化，依旧是和 DOM 时代是一样的，不同的是，jQuery 为我们提供了非常方便的 API，可以非常方便的操作 DOM。

DOM 和 jQuery 在本质上对前端开发的抽象角度是一样的，他们都是同样的工具，只不过 jQuery 比 DOM 更加锋利。

二、AngularJS — 不同的角度看世界

程序员的世界里面充满了宗教般的狂热，使用一种语言的鄙视使用另一种语言的，使用一种工具的看不起使用另一种工具的。

但是所有的这些工具，语言，说白了，其实就是在用不同的角度去抽象这个世界罢了。世界本质上是非常复杂的，不同的抽象在不同的场景下，描述这个世界会有着不同的效率。而 AngularJS 之所以在编程的效率上非常高，就是因为它和 DOM 以及 jQuery 在描述前端开发这件事情上，有着完全不同的抽象。

AngularJS 是一个前端的 MVC 框架。我之前也用 jQuery 写过一些前端代码，其实干的大部分的事情，就是点击网页的一个按钮，然后触发一系列的事情，比如加载后台数据，重新装配出一个 HTML，替换到原来的 HTML，给新生成的 HTML 里面的一些元素绑定事件等等的操作。非常容易出错，而且非常耗时。AngularJS 的高效之处就在于它把模型和视图绑定在一起，实现联动，改变模型，DOM 就可以跟着进行改变，甚至绑定 DOM 的事件也可以直接跟着进行改变。这一个理念，大大减少了前端开发的工作量。

三、AngularJS 和 JSP

写过 Java Web 开发的同学在写 AngularJS 的时候，可能会觉得 AngularJS 的在页面上的那些 Directive 和我们在各个模板框架，比如 Velocity 里面看到的都非常相似。是的，因为两者都是 MVC 的 View 的那一部分。有人可能会问既然有了 JSP，Velocity 之类的模板语言，如果我用 Java 做后端，那么 AngularJS 作为一个前端 MVC 框架，其存在的意义是什么？

必须承认，大部分的场景下，AngularJS 能够做到的事情，JSP，Velocity 等模板语言都是可以做到的。但是，Velocity 之类的仅仅是一个模板框架，是 MVC 里面的 View 的这一层，而 AngularJS 并不仅仅包含写在页面上的各种 Directive，还包含写在各个 $scope 中的各种 Model，以及一个 App 下的各个 Controller，换句话说，AngularJS 是一个完整的 MVC 框架。

当然，如果把 Model 和 Controller 都换成 Java 里面的，也是可以的。不过 AngularJS 作为一个前端框架的好处就在于，我甚至可以把一块区域的显示还是不显示定义成一个 Model，然后只要改变这个 Model，我就可以变换这个区域的显示与否，而这用 JSP 之类的模板框架的话，会直接把前端的一些非业务核心相关的显示逻辑挪到了后台，这显然是非常不合适的。

四、效率

其实，在前面，我一直强调的是 AngularJS 的开发效率的，在大部分的情况下 AngularJS 的开发效率都非常高效，但是不排除在某些比较简单的场景下， 直接使用 jQuery 会来得更加高效。

除了开发效率，还有框架本身的执行效率的问题。显然，AngularJS 的执行效率比不上 jQuery，我也问过一些前端的开发，他们不直接在一些大的网站上采用 AngularJS 就是因为其执行效率的问题。不过，在大部分的情况下，执行效率并不是非常关键，除非是非常大的网站。