摆脱DOM操作，从TodoMVC看angularJS

取代jQuery？

我很久之前便听说了angularJS的大名，之前的leader也经常感叹angularJS的设计如何如何精妙，可叹一直没有机会深入了解，国庆长假因为没钱出游，倒是可以对他做一个了解......

根据之前的经验，就现有的前端项目，如果最初没有良好的设计，做到一定阶段一定会变得难以维护，就算最初有设计，变化无常的PM也会让你的项目BUG丛生。

一个页面的复杂程度不断的增加，依赖模块也会变得混乱，而其中最为头疼的就是页面级随心所欲的DOM操作了！

MVC类的框架可以很好的解决以上问题，而号称MVVM的angularJS在处理这种情况似乎更有话语权，所以我们今天便来好好研究其一番。

angular适合做具有复杂数据交互的前端应用，他旨在让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上，这里摆脱繁琐的DOM操作是个非常关键的愿景，也是很多人不太理解，甚至会将jQuery这种库与Backbone或者angularJS这种框架做对比的原因。

jQuery是非常优秀的DOM操作工具库，在DOM操作上，基本没有库能超越他了
但Backbone&angularJS这种MVC是框架提供的是完整的解决方案，甚至会依赖jQuery&zepto，他们是两个东西，不能互相比较，所以完全没有angularJS要取代jQuery的可能，而当DOM操作过于杂乱一定是你的项目出了问题。

这里举个jQuery不依赖MVC骨架的例子，我们的订单填写页，需要在商品数量变化后导致金额变化，并且没有选商品时，支付按钮不可点击：

angular.module('todomvc')
.directive('todoFocus', function todoFocus($timeout) {
'use strict';

return function (scope, elem, attrs) {
scope.$watch(attrs.todoFocus, function (newVal) {
if (newVal) {
$timeout(function () {
elem[0].focus();
}, 0, false);
}
});
};
});

View Code
可以看到model直接绑定到了该文本框上，所以addTodo方法可以直接根据$scope获取文本框的属性，完了调用单例store提供的静态方法存储数据，saving参数可以暂时将文本框变成不可编辑状态，而后todo数据更新，会自动引发View变化，于是流程结束！！！

我们如果将$scope放到全局上对其数据造成变化：

window.sss = $scope;
//控制台中造成变化
sss.todos.pop()

每次返回操作视图时候，该变化会马上反应到View上，于是我发现了以下不同：

① 因为所有与业务相关的数据全部做了双向绑定，我根本没有必要由dom获取数据了，我自然而然的到$scope中获取数据，不知道为什么，这个特性让我有点愉悦！

② 我要做的事情其实就是约定好数据对象，然后将该对象放到要用到的所有视图上即可，每次内存中数据变化Dom会同步更新

于是通过以上两点，我似乎得到了一个惊人的结论：

似乎我一旦配置好ng-model后，我要做的事情仅仅是操作$scope上的数据！！！

因为，前端要做的事情只不过是正确的展示服务器端的数据，每次DOM事件造成的改变也往往是数据引起的，如果我们能做到数据变化自动更新到DOM变化的话，那么DOM操作的必要似乎没有了，而angular干的事情正是如此！！！

思考

到此为止，TodoMVC的代码我虽然没有完全看懂，但是他带给我的震撼是全方位的，之前使用MVC类框架可以规范数据到DOM的操作，很大程度上解除DOM和JavaScript的耦合关系，而angular似乎完全抛开了业务数据导致的DOM变化操作！！！

我们现在团队有一mis后台系统，我在考虑是否要把它接过来，使用angular+bootstrap重构，可能别有一番风味吧！

最后，今天初步调研了一下angularJS，就已经感受到他的魅力了，后面时间需要将之用于实践，并且对其设计思想作深入研究！！！