用原生JS模擬雙向繫結

雙向繫結

這裡的雙向繫結分兩步實現，一是從js的變數繫結到dom（也就是顯示的html檔案），二是從dom繫結到js的變數。

對一般的object，可以使用getter和setter實現該效果。(對於array，可以修改原型實現，這裡的實現是參考如何監聽 js 中變數的變化?)，這裡用到的時object.defineproperty

let scope = ;

//快取
let watchers = {};
//繫結變數
function
watch
(scope),
set: function
(value) 
});});
}watch(scope);
scope.num = 2; // set:2
console.log(scope.num); // get：2

document.addeventlistener('domcharacterdatamodified',element,false);

function
element
(e)        }
}

dom可監聽的不同事件型別：

domattributenamechanged

domattrmodified

domcharacterdatamodified

domcontentloaded

domelementnamechanged

domnodeinserted

domnodeinsertedintodocument

domnoderemoved

domnoderemovedfromdocument

domsubtreemodified

//實際資料

let scope = ;
//快取
let watchers = {};
//繫結從dom到js
document.addeventlistener('domcharacterdatamodified', element,false);
//繫結：從js到dom
watch(scope);
scope.num = 2; // set:2
console.log(scope.num); // get：2
//繫結變數
function
watch
(scope),
set: function
(value) 
});});
}//dom的修改觸發js變數的修改
function
element
(e)            }
}

相應的html

ng-bind="num">
h1>
id="text"/>
body>
//上面的js**
script>
//通過輸入框修改變數
document.getelementbyid('text').oninput = function
(e)    
script>
html>

原生JS模擬Vue雙向資料繫結

童鞋們都應該知道vue2.x很重要的特性 資料雙向繫結 虛擬dom 所以在面試的時候就經常有面試官問小白同學說資料雙向繫結原理是什麼，虛擬dom是什麼，給我實現乙個唄。所以給大家展示乙個最簡的雙向繫結的案例，也參考了網上一些資料。至於虛擬dom的實現後面再說吧，網上資料也很多很全因為畢竟react都...

原生JS實現雙向繫結

現在框架都可以實現雙向繫結，vue中實現雙向繫結的原理是利用object.defineproperty 定義訪問器屬性要使用object.defineproperty，接收三個引數 屬性所在的物件，屬性的名字，乙個描述符物件。doctype html en utf 8 title title hea...

原生js實現資料雙向繫結

最近接觸了vue，在談到 vue等等的 mvvm 框架之前，先了解什麼是資料雙向繫結以及如何利用原生 js實現資料雙向繫結 單向資料繫結 指先把模板寫好，然後把模板和資料 資料可能來自後台 整合到一起形成html 然後把這段 html 插入到文件流裡 缺點 一旦html 生成就沒有辦法改變，如果有新...