手记

从TodoMVC看angularJS

我很久之前便听说了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骨架的例子,我们的订单填写页,需要在商品数量变化后导致金额变化,并且没有选商品时,支付按钮不可点击:

对于一个有些经验的菜鸟来说,可能会这样写代码:

$('#reduceNum').click(function() {
      $('#payBar #num').text($('#curNum').html() - 1);
});

对于一些有一定经验的老鸟来说,可能会这样写代码:

1 events: {
2   'click #reduceNum': reduceNumAction  
3 },
4 
5 reduceNumAction: function() {
6   $('#payBar #num').text($('#curNum').html() - 1);
7 }

第一段代码可能会导致你年底加薪无望,并且在团队中没有话语权;而第二段代码积累到一定量后会让这个项目变得不可维护:

① 支付工具栏初始化状态如何显示,如果数字组件按需做异步加载,这个显示将变得更加负责。

② 哪些操作将导致支付栏变化,你如何组织这些变化的代码,是让他四散到各处,还是集合在一起,集合后导致函数过大怎么办?

③ 新增的导致工具栏变化的操作会不会对原来的操作造成影响,新增的代码放在何处?

④ 如果有地方要使用工具栏处的信息,取的信息会不会是无效的(取的时候可能正在变化),应该通过DOM取还是内存取?

⑤ 如果支付栏DOM结构如果变化,对你的程序影响有多大,如何主流程的影响,比较支付点击后只需要操作数据,不需要关注DOM?

⑥ ......

这个就是仅仅依赖jQuery要面临的问题,并且这种问题是无解的,因为这里的专注点是DOM操作而不是数据,如果将关注点变成了数据,代码就不是这样写的,DOM操作仅仅是过程而不是目的,我们代码的目的,往往是展示数据、获取数据,这点一定要清晰。

所以让我们带着这些问题:angular的优势在何处,他如何改善我们的编程体验,进入今天的学习吧。

初探angularJS

Hello World

学习任何一门语言,Hello world是必不可少的,他是我们迈向精通的唯一路径:


1 <!doctype html>
2 <html ng-app>
3 <head>
4   <script src="angular.js" type="text/javascript"></script>
5 </head>
6 <body>
7   Hello {{'World'}}!
8 </body>
9 </html>

被{{}}包裹的便是angularJS变量,上述程序稍作改变的话:

 1 <!doctype html>
 2 <html ng-app>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body>
 7   <input ng-model="name" type="text" />
 8   Hello {{name}}!
 9 </body>
10 </html>

便会同步显示文本框输入内容,这里通信的基础是model对应着ng-model,只要被ng-app包裹就会受angularJS控制,用angularJS自己的话说:HTML标签增强

作用域

为什么文本框中的变化会体现在外层,这个涉及到了ng-model的双向绑定知识,我们暂时不予理睬,但是外层又是从哪里读取name这个变量的呢?

在angular中,属性会存储在一个@scope(作用域)的对象上,每次我们对文本框的更新皆会通知scopenameangularscope是连接controllers(控制器)与template(视图)的主要胶合器。

上述代码完全不涉及js代码,真实的场景中每个代码段会对controller做依赖,我们这里对代码做一些更改:

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body ng-app="app" ng-controller="MainCtrl">
 7   <h1 ng-click="click()">
 8     Hello {{name}}!
 9   </h1>
10   <script>
11     var app = angular.module('app', []);
12     app.controller('MainCtrl', function ($scope) {
13       $scope.name = 'World';
14       $scope.click = function () {
15         $scope.name = '霹雳布袋戏';
16       };
17     });
18   </script>
19 </body>
20 </html>

这里首先定义了一个application模块,后续会看见,我们每次代码一定会新建一个application,相当于命名空间的意思,后面还可以做依赖用。

接着,我们创建了一个controller模块,这里已经有点MVC的味道了,controller接受$scope属性,这个时候模板上所有子标签对这个控制器中的属性便有了访问权限,这里用到了一些angular指令。

ng-app:告诉html标签已经处于angular的控制了,可以使用angular的特性

ng-controller:一个module下面可以包括多个控制器,每一个标签所属的控制器由该指令指定

上述代码是将控制器中的数据读出来,我们同样也可以将View中的数据读入到控制器:

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body ng-app="app" ng-controller="MainCtrl">
 7   <input type="text" ng-model="message" />
 8   <h1 ng-click="click()">
 9     Hello {{name}}!
10   </h1>
11   <script>
12     var app = angular.module('app', []);
13     app.controller('MainCtrl', function ($scope) {
14       $scope.name = 'World';
15       $scope.click = function () {
16         $scope.name = $scope.message;
17       };
18     });
19   </script>
20 </body>
21 </html>

PS:看到这里,老夫虎躯为之一振,对该特性的实现产生了兴趣,后续值得深入

指令

指令让我们有能力使用angular规定的方式为HTML标签增加新特性,angular内置了很多有用的指令,这里仍然举一个简单的例子说明问题:

复制代码
 1 <!doctype html>
 2 <html>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body ng-app="app">
 7   <ul ng-controller="MainCtrl">
 8     <li ng-repeat="v in arr">{{v}}</li>
 9   </ul>
10   <script>
11     var app = angular.module('app', []);
12     app.controller('MainCtrl', function ($scope) {
13       $scope.arr = ['素还真', '一页书', '叶小钗']
14     });
15   </script>
16 </body>
17 </html>

我们除了使用angular的内置指令外,还可以自定义指令,比如这里的让文本框自动获取焦点的指令:

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body ng-app="app" ng-controller="MainCtrl">
 7   <input type="text" focus  ng-model="user.name" />
 8   <button ng-click="greet()">
 9     Click here!</button>
10   <h3>
11     {{ message }}</h3>
12   <script>
13     var app = angular.module('app', []);
14     app.controller('MainCtrl', function ($scope) {
15       $scope.greet = function () {
16         $scope.message = "Hello, " + $scope.user.name;
17       }
18     });
19     app.directive('focus', function () {
20       return {
21         link: function (scope, element, attrs) {
22           element[0].focus();
23         }
24       };
25     });
26   </script>
27 </body>
28 </html>

指令的使用可以很复杂,后续我们会更加深入,这里再举一个单独使用的例子:

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body ng-app="app">
 7   <hello></hello>
 8   <script>
 9     var app = angular.module('app', []);
10     app.directive('hello', function () {
11       return {
12         restrict: "E",
13         replace: true,
14         template: "<div>显示固定数据,类似自定义标签</div>"
15       }
16     });
17   </script>
18 </body>
19 </html>

指令的定义有很多参数,可以指定该指令作为属性还是作为标签,这个我们后续再深入了解。

过滤器

感觉过滤器是参考的smarty的语法,一般而言是用作显示的增强,angular本身也提供了很多内置过滤器,比如:

1 {{ "aaaa" | uppercase }} // AAAA
2 {{ "BBBB" | lowercase }} // bbbb

感觉比较有用的是日期操作过滤器:

{{ 1427345339072 | date:'yyyy' }} // 2015
{{ 1427345339072 |date:'MM' }} // 03
{{ 1427345339072 | date:'d' }} // 26,一月中第多少天
......

数字格式化:

{{12.13534|number:2}} // 12.14 四舍五入保留两位小数
{{10000000|number}} // 10,000,000

当然,我们可以使用自定义过滤器,比如这里我想对超出某一区间的数字加...

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <script src="angular.js" type="text/javascript"></script>
 5 </head>
 6 <body ng-app="app" ng-controller="MainCtrl">
 7   <input type="text" ng-model="message" />
 8   <h3>
 9     {{ message |myFilter }}</h3>
10   <script>
11     var app = angular.module('app', []);
12     app.controller('MainCtrl', function ($scope) {
13       $scope.message = '';
14     });
15 
16     app.filter('myFilter', function () {
17       return function (input, param) {
18         return input.length < 5 ? input : input.substring(0, 5) + '...'
19       }
20     });
21   </script>
22 </body>
23 </html>
0人推荐
随时随地看视频
慕课网APP