1.Angular.js擴(kuò)展瀏覽器的事件循環(huán)

瀏覽器持續(xù)等待例如用戶交互這樣的事件。當(dāng)你在一個(gè)<input>標(biāo)簽里輸入字符之后，這個(gè)事件的回調(diào)函數(shù)在JS解釋器中執(zhí)行了其包含的DOM操作，執(zhí)行完畢后，瀏覽器響應(yīng)地對(duì)DOM做出了變化。Angular拓展了這個(gè)事件循環(huán)，使它有時(shí)候成為angular context 的執(zhí)行環(huán)境。

2.$watch list

$watch 可以檢測(cè)model的變化。每當(dāng)綁定一個(gè)數(shù)據(jù)到view上的時(shí)候，$watch隊(duì)列就會(huì)插入一條對(duì)應(yīng)的$watch。例子如下：

controller.js：

app.controller('MainCtrl', function($scope) {
 $scope.people = [...]; // 假設(shè)長(zhǎng)度為10
});

index.html:

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

其中ng-repeat 生成了一個(gè)1個(gè)$watch，每個(gè)person生成了2個(gè)$watch，總共是（1+2*10），21個(gè)$watch。$watch的生成階段是模板加載完成，也就是linking階段。（angular分為compile和linking階段），Angular會(huì)尋找每個(gè)directive（上面的例子中ng-repeat和{{}}都屬于directive），然后生成每個(gè)$watch。

3.$digest 循環(huán)

當(dāng)瀏覽器接收到angular context相關(guān)的事件時(shí)，$digest循環(huán)就會(huì)被觸發(fā)。它由2個(gè)小循環(huán)組成，1個(gè)處理evalAsync 隊(duì)列，另一個(gè)處理$watch隊(duì)列。$digest進(jìn)行循環(huán)時(shí)，將遍歷$watch隊(duì)列，查看是否有數(shù)據(jù)更新過(guò)，這種遍歷就叫做dirty-checkin（臟檢查），如果臟檢查發(fā)現(xiàn)有$watch更新，將會(huì)觸發(fā)新的臟檢查，直到所有的$watch都沒(méi)有更新。這樣就能保證每個(gè)model都不會(huì)變化。

臟檢查超過(guò)10次后會(huì)拋出異常防止無(wú)限循環(huán)。$digest循環(huán)結(jié)束后DOM會(huì)相應(yīng)地發(fā)生變化。其實(shí)$digest從字面意義理解就像“消化”的過(guò)程一樣，逐漸地把所有營(yíng)養(yǎng)（$watch的變化）都吸收掉。

4.通過(guò)$apply 進(jìn)入 angular context

$apply 決定事件是否進(jìn)入angular context，使用angualr的自帶directive，比如ng-model，更改綁定的數(shù)據(jù)時(shí)，angular會(huì)將事件封裝到$apply中。比如，ng-model="name"的輸入框，輸入字符“w”，事件會(huì)調(diào)用，$apply("name='w';")，完成$scope中的數(shù)據(jù)更新。

調(diào)用第三方庫(kù)時(shí)的數(shù)據(jù)綁定

當(dāng)在angular中調(diào)用jquery，并不能更新jquery綁定的數(shù)據(jù)，因?yàn)閖query沒(méi)有調(diào)用$apply，事件沒(méi)有進(jìn)入angular context，導(dǎo)致$digest沒(méi)有執(zhí)行。例子如下：

app.js

 app.directive('clickable', function() {
  return {
   restrict: "E",
   scope: {
    count1: '=',
    count2: '='
   },
   template: '<ul style="background-color: lightblue"><li>{{count1}}</li><li>{{count2}}</li></ul>',
   link: function(scope, element, attrs) {
    element.bind('click', function() {
     scope.count1++;
     scope.count2++;
    });
   }
  }
});
app.controller('MainCtrl', function($scope) {
 $scope.count1= 0;
 $scope.count2= 0;
});

例子中，每次點(diǎn)擊該元素，預(yù)期count1和count2都會(huì)自增1，但實(shí)際沒(méi)有。其實(shí)$scope（ViewModel）已經(jīng)改變，但是沒(méi)有強(qiáng)制執(zhí)行$digest。修改click事件如下：

element.bind('click', function() {
 scope.$apply(function() {
   scope.foo++;
   scope.bar++;
 });
})

經(jīng)過(guò)調(diào)用$apply實(shí)現(xiàn)了預(yù)期。

5.總結(jié)

angular事件綁定機(jī)制如下圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論