AngularJS深入探讨scope,继承结构,事件系统和生命

深入探讨 Scope 作用域

每一个 $scope 都是类 Scope 的一个实例。类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染。

作用域的层次结构

让我们再来看看这个简单的 HelloCtrl 的例子:

var HelloCtrl = function($scope){ $scope.name = 'World'; }

HelloCtrl 看起来就跟普通的 JavaScript 构造函数没什么区别,事实上,除了 $scope 这个参数之外,确实没什么新奇之处。不过,这个参数究竟是从哪里来的呢?

这个新的作用域是由 ng-controller指令使用 Scope.$new() 方法生成的。等一下,这么说来我们必须至少拥有一个 scope 的实例才能创建新的 scope!没错,AngularJS其实有一个 $rootScope(这个是所有其他作用域的父级)。这个 $rootScope 实例是在一个新的应用启动的时候创建的。

ng-controller指令就是 可以创建作用域 指令的其中一个。AngularJS 会在任何它在DOM树中碰到这种 可以创建作用域 指令的时候创建一个新的 Scope类的实例。这些新创建的作用域通过 $parent 属性指向它自身的父作用域。DOM树中会有很多 可以创建作用域 的指令,结果就是,很多作用域被创建了。

作用域的形式类似于父子、树状的关系,并且最根部的就是 $rootScope 实例。就像作用域是被DOM树驱动着创建的一样,作用域树也是在模仿 DOM 的结构。

现在你已经知道了,一些指令会创建新的子级的作用域,你可能会想,为什么会需要这些复杂的东西。要想理解这一点,我们来演示一个例子,其中使用了 ng-repeat 循环指令。

控制器如下:

var WorldCtrl = function ($scope) { $scope.population = 7000; $scope.countries = [ {name: 'France', population: 63.1}, {name: 'United Kingdom', population: 61.8}, ]; };

模版如下:

<ul ng-controller="WorldCtrl"> <li ng-repeat="country in countries"> {{country.name}} has population of {{country.population}} </li> <hr> World's population: {{population}} millions </ul>

这个 ng-repeat 指令可以迭代一个 countries 的集合,并且为集合中的每一项都创建新的DOM 元素。ng-repeat 指令的语法非常容易理解;其中每一项都需要一个新的变量 country,并把它挂到 $scope 上面,以便视图渲染使用。

但这里有一个问题,就是,每一个 country 都需要将一个新的变量挂载到一个 $scope 上去,而我们也不能就简单的覆盖掉前面被挂在上去的值。AngularJS 通过为集合中的每一个元素都创建一个新的作用域来解决这个问题。新创建的这些作用域跟相匹配的DOM树结构非常相像,我们也能通过之前提到的那个牛逼的 Chrome 扩展 Batarang 来可视化的看到这一点。

每一个作用域(以矩形标注边界)维护属于她自己的一段数据模型。给不同的作用域增加同名的变量是完全没有问题的,不会发生命名冲突(不同的DOM元素会指向不同的作用域,并使用相对应的作用域的变量来渲染模板)。这样一来,每个元素又有自己的命名空间,在前面的例子中,每一个<li> 元素都有自己的作用域,而 country 变量就定义在各自的作用域上面。

Scope的层次结构和继承

定义在作用于上的属性对他的子级作用于来说是可见的,试想一下,子级作用域并不需要重复定义同名的属性!这在实践中是非常有用的,因为我们不必一遍又一遍的重复定义本来可以通过作用域链得到的那些属性。

再来看看前面的例子,假设我们想要显示给出的这些国家与世界总人口的百分比。要实现这个功能,我们可以在一个作用域上定义一个 worldsPercentage 的方法,并由 WorldCtrl 来管理,如下所以:

$scope.worldsPercentage = function (countryPopulation) { return (countryPopulation / $scope.population)*100; }

然后被 ng-repeat 创建的每一个作用域实例都来调用这个方法,如下:

<li ng-repeat="country in countries"> {{country.name}} has population of {{country.population}}, {{worldsPercentage(country.population)}} % of the World's population </li>

AngularJS中作用域的继承规则跟 JavaScript 中原型的继承规则是相同的(在需要读取一个属性的时候,会一直向继承树的上方查询,直到找到了这个属性为止)。

贯穿作用域链的继承的风险

这种透过作用域层次关系的继承,在读数据的时候显得非常的直观、易于理解。但是在写数据的时候,就变的有点复杂了。

让我们来看看,如果我们在一个作用域上定义了一个变量,先不管是否在子级作用域上。JavaScript代码如下:

var HelloCtrl = function ($scope) { };

视图的代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzggdf.html