AngularJS框架速写

2022-10-23 15:12:06

最近在把玩AngularJS框架，之前也看过流行的Backbone，不过AngularJS给人的感觉完全不同，它走的是一条高帅富之路。

按照官方的说法，AngularJS是一套依赖注入的MVC开发套件。JavaScript本身不具备实现传统的“依赖注入”的条件，我觉得即便是实现传统的MVC模式，也很难做到优雅大方，因为作为View层的HTML DOM，不具备原生扩展性，浏览器的渲染器也没有提供底层的方法让我们可以将界面元素和业务逻辑关联起来，必须依靠代码去实现，AngularJS巧妙地解决了这些问题，而且姿势相当漂亮。

在我看来，AngularJS的设计思想和Flash平台上的Robotlegs有很多相似之处，将大量重复性的编码工作隐藏在框架中，让开发者只需要关注程序的业务逻辑和结构，自然地，开发效率得到了质的飞跃。

下面是文档中的一个简单例子：

<!doctype html>

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>

  </head>

  <body>

    <input ng-model="name">

    <p>Hello {{name}}!</p>

  </body>

</html>

短短几行代码（其实完全是HTML代码），实现了一个简单的捕获文本输入的功能。如果使用原生JavaScript或者jQuery工具库，首先要侦听input的事件，然后修改p节点的文本。这类代码毫无技术性可言，都是些重复的编码工作，现在，AngularJS把我们从琐碎的coding工作中解决出来了。

Flex开发者看了上面的例子，是不是觉得很眼熟？大家伙马上想到了MXML代码中的数据绑定。上面的例子中，使用双大括号围起来的写法，和MXML中的单大括号写法何其相似！！还必须指出的是，AngularJS实现的是双向数据绑定，即如果用代码修改了Model中的name属性，界面上也会同步更新。同志们，仅这个特性就能让我们在有限的编程生涯中少写多少行代码？？

数据绑定是AngularJS的两大法宝之一，另外一个是依赖注入。为了实现依赖注入，AngularJS扩展了HTML DOM语法，添加了所谓的"directive"，其实就是自定义的HTML标记，比如上面代码中的ng-model属性。类似的还有不少，比如ng-app, ng-controller, ng-repeat, ng-click, ng-init, ng-class, ng-show, ng-hide...。为了解析这些自定义的标记，在DOM加载完毕后，AngularJS会遍历DOM树，根据定义的directive列表，对这些标记进行解析，如果有需要，会修改DOM节点，以及建立Controller, Model, 建立数据绑定等等。

除了内置的directive, AngularJS允许我们自定义directive。由于HTML代码中本身并没有包括任何的业务逻辑，只是将DOM节点和Controller, Model绑定在一起，这使得我们可以方便地编写自定义组件，从而提高代码的重用度。

和其他的开发框架相比，AngularJS稍显复杂，毕竟使用代码去扩展HTML语法，这听起来就是一个大工程。不过，对于使用者来说，完全可以不用太过理会其中复杂的实现，只需要关注应用本身的功能，这正是使用AngularJS的目的所在。

码农公寓

相关文章