AngularJS的數(shù)據(jù)雙向綁定是怎么實現(xiàn)的
3 回答
烙印99
TA貢獻(xiàn)1829條經(jīng)驗 獲得超13個贊
angular并不存在定時臟檢測。
angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發(fā)進(jìn)入angular的digest流程。
在digest流程里面， 會從rootscope開始遍歷， 檢查所有的watcher。
angular性能優(yōu)化心得
談起angular的臟檢查機(jī)制(dirty-checking), 常見的誤解就是認(rèn)為： ng是定時輪詢?nèi)z查model是否變更。
其實，ng只有在指定事件觸發(fā)后，才進(jìn)入$digest cycle：
DOM事件，譬如用戶輸入文本，點擊按鈕等。(ng-click)
XHR響應(yīng)事件 ($http)
瀏覽器Location變更事件 ($location)
Timer事件($timeout, $interval)
執(zhí)行$digest()或$apply()
揚帆大魚
TA貢獻(xiàn)1799條經(jīng)驗 獲得超9個贊
Angular js (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。它支持整個開發(fā)進(jìn)程，提供web應(yīng)用的架構(gòu)，無需進(jìn)行手工DOM操作。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好。雙向數(shù)據(jù)綁定可能是angularjs最酷最實用的特性,將MVC的原理展現(xiàn)地淋漓盡致.
AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結(jié)構(gòu)成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應(yīng)的NG指令,所有的指令都負(fù)責(zé)針對view(即HTML中的ng-model)來設(shè)置數(shù)據(jù)綁定。因此, NG框架是在DOM加載完成之后, 才開始起作用的.
在html中:
<body ng-app="ngApp">
<div ng-controller="ngCtl">
<label ng-model="myLabel"></label>
<input type="text" ng-model="myInput" />
<button ng-model="myButton" ng-click="btnClicked"></button>
</div>
</body>
在js中:
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
console.log("Label is " + $scope.myLabel);
}
}]);
如上,我們在html中先定義一個angular的app,指定一個angular的controller,則該controller會對應(yīng)于一個作用域(可以用$scope前綴來指定作用域中的屬性和方法等). 則在該ngCtl的作用域內(nèi)的HTML標(biāo)簽, 其值或者操作都可以通過$scope的方式跟js中的屬性和方法進(jìn)行綁定.
- 3 回答
- 0 關(guān)注
- 751 瀏覽
添加回答
舉報
0/150
提交
取消