angular.js - 试问angularjs的双向绑定是如何实现的？

Question

用过angularjs的人肯定知道他的双向绑定，用起来也是很方便，可是他内部是怎么实现的呢？

视图变化了去更新数据，这个还好理解，也大都知道怎么去模拟一下，但是说到数据变化了去更新视图，关键在于是怎么去判断数据发生了变化。。。

之前想了一下，类似先存储一份oldValue，然后定时去遍历这些，用newValue和oldValue去对比，如果变化了做更新和其他相关的工作。。。

但是觉得这样行吗？自己思索半天觉得也不是很靠谱，希望各位兄弟姐妹不吝教诲！## 标题

Answer 1

Melaksanakan contoh mudah yang serupa dengan pengikatan dua hala

HTML

<input id="app" my-model="text" />

SKRIP

var scope = {};
var input = document.getElementById('app');

Lihat perubahan data kemas kini

Ini sangat mudah, cuma ikat acara semasa menyusun arahan myModel

input.addEventListener('input', function (e) {
    scope.text = e.currentTarget.value;
},false);

Perubahan data UI kemas kini

Terdapat pemerhati dan penghadaman di dalam skop

scope.$$watchers = [];
scope.$$watchers.push({
    key:'text',
    fn: function (value) {
        input.value = value;
    }
});

scope.$digest = function () {
    scope.$$watchers.forEach(function (watcher) {
        watcher.fn(scope.text);
    });
};

Apabila kami menetapkan nilai pada skop dan mencetuskan ringkasan, UI akan dikemas kini secara serentak

scope.text ='zzz';
scope.$digest();

Menetapkan nilai kepada skop secara langsung tidak akan mengemas kini UI hanya apabila ringkasan dicetuskan Dalam kebanyakan kes, Angular secara aktif mencetuskan ringkasan untuk kami, yang memberikan gambaran bahawa kami hanya menambah skop ke skop secara bersahaja. Tidak mengapa, tetapi hasilnya adalah situasi yang saya tidak faham. Contohnya

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.text = 'zzz';
        }, 1000);
    });
    

Menggunakan setTimeout secara langsung, hasilnya ialah UI tidak dikemas kini Kami perlu melakukan pemprosesan berikut

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.text = 'zzz';
            });
        }, 1000);
    });
    

Atau gunakan $masa tamat sudut, yang membantu kami mencetuskan penghadaman

angular.module('myApp', [])
    .controller('MyCtrl', function ($scope,$timeout) {
        $timeout(function () {               
            $scope.text = 'zzz';
        }, 1000);
    });

Answer 2

Mari cari. Terdapat banyak artikel yang boleh membantu anda menjawab soalan anda dahulu dan kemudian bertanya soalan

Answer 3

Pertama sekali, saya ingin menyatakan bahawa saya tidak begitu biasa dengan angularjs yang disebutkan dalam soalan, yang agak di luar topik.
Kalah mati juga mempunyai ciri pengikatan data dua hala yang sama Ia dilaksanakan dalam mod pemerhatian, apabila memberikan nilai menggunakan kaedah yang ditetapkan, ia juga akan memberitahu pemerhati yang berminat dengan objek tersebut digunakan untuk mencapai kesan pengikatan dua hala data.

Answer 4

angular1 ialah cek kotor. . Ini juga membawa masalah prestasi

Answer 5

Bagaimanakah AngularJS melaksanakan mekanisme pengikatan data dua halanya?

Answer 6

可以参考：
http://teropa.info/build-your-own-angular/build_your_own_angularjs_sample.pdf