小編給大家分享一下angularjs中臟檢查的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出單縣免費做網(wǎng)站回饋大家。

angularjs實現(xiàn)了雙向綁定，與vue的defineProperty不同，它的原理在于它的臟檢查機(jī)制，以下做了一些總結(jié)；

angular.js介紹

• AngularJs是mvvm框架，它的組件是vm組件，scope是vm組件的數(shù)據(jù)集合

• AngularJs通過directive來聲明vm的行為，它實現(xiàn)為一個watcher，監(jiān)聽scope的屬性的變化，把最新的屬性更新UI

• AngularJs的雙向綁定：如：一個是將$scope屬性值綁定到HTML結(jié)構(gòu)中，當(dāng)$scope屬性值發(fā)生變化的時候界面也發(fā)生變化；另一個是，當(dāng)用戶在界面上進(jìn)行操作，例如點擊、輸入、選擇時，自動觸發(fā)$scope屬性的變化（界面也可能跟著變）

• 監(jiān)聽scope的屬性變更：臟檢查(dirty check )

臟檢查

• angular根本不監(jiān)聽數(shù)據(jù)的變動，而是在恰當(dāng)?shù)臅r機(jī)($watch)從$rootScope開始遍歷所有$scope，

• 檢查它們上面的屬性值是否有變化，如果有變化，就用一個變量dirty記錄為true，再次進(jìn)行遍歷($digest)，

• 如此往復(fù)，直到某一個遍歷完成時，這些$scope的屬性值都沒有變化時，結(jié)束遍歷。

• 由于使用了一個dirty變量作為記錄，因此被稱為臟檢查機(jī)制。

簡而言之： 當(dāng)作用域創(chuàng)建時，angular會去解析模板，將綁定值和事件調(diào)用找出來并用$watch綁定；

$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)
// string: 驗證值或者function執(zhí)行后return的string
// listener： 如果驗證值不同，則執(zhí)行該監(jiān)聽函數(shù)
// objectEquality：執(zhí)行深檢查

• 完成綁定后，就會自動檢測這些屬性的變化，執(zhí)行$watch, 那么對應(yīng)的信息被綁定到angular內(nèi)部的一個$$watchers中，

• 它是一個隊列（數(shù)組），而當(dāng)$digest被觸發(fā)時，angular就會去遍歷這個數(shù)組，

• 并且用一個dirty變量記錄$$watchers里面記錄的那些$scope屬性是否有變化

接下來的流程:

• 判斷dirty是否為true，如果為false，則不進(jìn)行$digest遞歸。（dirty默認(rèn)為true）

• 遍歷$$watchers，取出對應(yīng)的屬性值的老值和新值根據(jù)objectEquality進(jìn)行新老值的對比。

• 如果兩個值不同，則繼續(xù)往下執(zhí)行。如果兩個值相同，則設(shè)置dirty為false。

• 檢查完所有的watcher之后，如果dirty還為true, 設(shè)置dirty為true用新值代替老值;

• 這樣，在下一輪遞歸的時候，老值就是這一輪的新值再次調(diào)用$digest(簡單說就是執(zhí)行兩次遞歸遍歷檢查新舊值變化)

• 將變化后的$scope重新渲染到界面

$apply觸發(fā)$digest

• 一般不調(diào)用$digest, 調(diào)用$apply，它內(nèi)部會觸發(fā)$digest遞歸遍歷

• angular的內(nèi)部指令封裝了$apply，比如ng-click，所以一般不用手動調(diào)用apply

手動調(diào)用apply

• 部分時候需要手動觸發(fā)

function($timeout) {
  // 當(dāng)我們通過on('click')的方式觸發(fā)某些更新的時候，可以這樣做
  $timeout(() => { // 內(nèi)置語法糖 $http, $timeout已經(jīng)包含了apply
    $scope.name = 'lily'
  })
  // 也可以這樣做
  $element.on('click', () => {
    $scope.name = 'david'
    $scope.$apply()
  })
}

注意：在遞歸過程中，絕對不能手動調(diào)用$apply，比如在ng-click的函數(shù)中，比如在$watch的回調(diào)函數(shù)中。

最后，實現(xiàn)一個簡易臟檢查機(jī)制

  
  
  
  


  button {
    height: 60px;
    width: 100px;
  }

  p {
    margin-left: 20px;
  }



  

    增加
    減少
    數(shù)量：0
  
  

以上是“angularjs中臟檢查的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！