關於AngularJs中監聽事件及髒循環的理解

時間 2019-12-10

標籤關於 angularjs 監聽事件循環理解欄目 AngularJS 简体版

原文原文鏈接

可能不少剛入行或者剛學習的前端對於AngularJs中的一些事件或者概念感受不理解或者沒有思路,今天讓咱們一塊兒來剖析一下AngularJs中的一些事件。css

AngularJs中對於的監聽事件會用到一個scope函數$watch,它包含了三個參數,首先咱們在概念上來了解一下：html

$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。前端

$watch(watchExpression, listener, objectEquality);java

每一個參數的說明以下：bootstrap

watchExpression（必須）：監聽的對象，它能夠是一個string，將被計算爲表達式 ,或函數如function(){return $scope.name}。數組

listener:當watchExpression（監聽對象）變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(做用域的引用)app

objectEquality：是否深度監聽，若是設置爲true,它告訴Angular檢查所監控的對象中每個屬性的變化. 若是你但願監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它。框架

我寫了一個小例子，可能會讓你們更好的瞭解監聽模型變化的過程,如下部分是html代碼：ide

<!doctype html>
<html ng-app="exampleApp">
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet">  //導入了本地bootstrap的框架
</head>

<body ng-controller = "simpleCtrl">
<div class="container">
    <div class="well">

        <div class="form-group">
            <input class="form-control" ng-model="name" type="text">
        </div>
    </div>
</div>
</body>

</html>

View Code

而後導入本地的AngularJs框架的文件，javaScript代碼以下：函數

<script src="../angular.min.js"></script>    //導入本地AngularJs文件
    <script>
        angular.module("exampleApp", [])
                .controller("simpleCtrl", function ($scope, $rootScope) {
                    $scope.count = 0;
                    $scope.name = '';
                    $scope.$watch('name', function(){  //監聽數據模型發生的變化
                        console.log($scope.count++);
                    });
                });
    </script>

View Code

代碼運行後的結果爲

當用戶與輸入框中的內容發生交互事件時監聽事件被觸發（不管是增長仍是刪除）,運行結果以下：

接下來爲你們分享下髒循環，Angular會運行一個函數$digest來檢查scope模型中的數據是否發生了變化。在$digest循環中，watchers會被觸發。當一個watcher被觸發時，AngularJS會檢測它所監聽的scope模型，若是監聽對象發生了變化那麼關聯到該watcher的回調函數就會被調用。這種方法叫作髒檢查。

在angular程序初始化時，會將綁定對象的屬性添加爲監聽對象（watcher），也就是說一個$scope對象綁定了N個屬性，就會添加N個watcher。 angular何時去髒檢查呢？angular所定義的方法中都會觸發$digest事件，好比：controller初始化的時候，全部以ng-開頭的指令執行後，都會觸發髒檢查用戶與視圖發生交互行爲之後會觸發髒檢查。

調用$digest方法： $scope.$digest();

可是這裏就又要牽扯到另外一個函數，由於AngularJS並不直接調用$digest()，而是調用$scope.$apply()，$apply方法就是將$digest方法包裝了一層，會調用$rootScope.$digest()。所以，一輪$digest循環在$rootScope開始，隨後會訪問到全部的children scope中的watchers。 $apply()方法接受一個可選參數，能夠是string，string將被看做表達式並計算結果，也能夠是函數。

當接受function做爲參數，會執行該function而且觸發一輪$digest循環。不接受任何參數，觸發一輪$digest循環會，檢查該$scope裏的全部監聽的屬性。若是你在AngularJS上下文以外的任何地方修改了model，那麼你就須要經過手動調用$apply()來通知AngularJS。

這裏有個小例子效果圖以下：

由於這裏設置了延時觸發，因此一段時間事後：

下面是實現代碼部分，html代碼以下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body ng-controller="MesCtrl">
  {{message}}
</body>

</html>

View Code

javaScript代碼以下：

<script src="angular.min.js"></script>
<script>
    angular.module("myApp",[]).controller("MesCtrl", function ($scope) {
        $scope.message = "原來的信息";
        $scope.getMessage = function(){
            setTimeout(function(){
                $scope.$apply(function(){
                    $scope.message = "兩秒鐘以後更新";
                    console.log('message:' +$scope.message);
//                $scope.$apply();   第二種調用方法
                })
            },2000)
        }
        $scope.getMessage();
    });
</script>