《AngularJS深度剖析与最佳实践》一2.3 作用域

简介:

本节书摘来自华章出版社《AngularJS深度剖析与最佳实践》一书中的第2章,第2.3节,作者 雪狼 破狼 彭洪伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.3 作用域

如果你曾经用jQuery写过传统的非MVC前端程序,那么在第1章“从实战开始”中看到的这些代码可能会让你感到惊讶—不再有连篇累牍的DOM操作,不再有混合了业务逻辑和视图逻辑的臃肿代码,不再一听到写测试就闪过“不可能”三个字……
“光荣属于MVC!”我们说Angular是个MVW(Model-View-Whatever)风格的框架,而在Angular中扮演Model角色的概念,就是作用域(scope)。
在Angular中,scope通过原型继承的方式被组织成了一棵树,它的根节点就是$rootScope,这是Angular在启动时自动创建的,它通常对应于ng-app指令,并且关联到ng-app所在的节点。
接下来,Angular会解析ng-app包含的HTML,其中的一些指令,如ng-view、ng-if、ng-repeat等也会创建自己的scope,这些scope都是从$rootScope及其子scope创建出来的,它们的嵌套关系也和这些指令的嵌套关系一致。
由于它们使用了原型继承的方式,所以,凡是上级scope拥有的属性,都可以从下级scope中读取,但是当需要对这些继承下来的属性进行写入的时候,问题就来了:写入会导致在下级scope上创建一个同名属性,而不会修改上级scope上的属性。这不是Bug,而是“原型继承”的固有语义,这是用惯了“类继承”的后端程序员需要特别注意的。更详细的分析和解决方式请参见4.9节“使用controller as vm方式”。
这种scope树很好的体现了Model之间的嵌套关系,对业务数据的结构是一个很恰当的抽象。
scope之所以如此重要,是因为它事实上是Angular解耦业务逻辑层和视图层的关键:Controller操作scope,View则展现scope的内容,传统前端程序中大量复杂的DOM操纵逻辑都被转变成对scope的操作。
这种树形结构不但体现在数据的继承关系上,而且体现在消息的冒泡机制上。有DOM基础的同学可以拿它和DOM的消息冒泡机制做类比,在后面的2.11节“消息”中我也会专门对此进行讲解。

相关文章
|
前端开发 JavaScript
《AngularJS深度剖析与最佳实践》推荐序
《AngularJS深度剖析与最佳实践》推荐序
|
设计模式 容器
AngularJS实战之依赖注入与应用实践
AngularJS实战之依赖注入与应用实践
AngularJS实战之依赖注入与应用实践
|
安全 前端开发 测试技术
《AngularJS深度剖析与最佳实践》一导读
现在,软件不但运行在PC上,还要运行在智能手机上,运行在各种Pad上,屏幕分辨率更是多到让研发和测试工程师发怵的地步。
1401 0