jsはデーターバインディングを実現する
1661 ワード
コードを作成する前に、まずデータバインディングについて知っておく必要がある知識を知りに来ました. getterとsetterは、javaScriptのオブジェクトが健値ペアのセットであることを知っています.ES 5では一つまたは二つの方法を使って代替できます.この二つの方法はgetterとsetterです.これらの2つの方法で定義される属性は「メモリ属性」と呼ばれ、データ属性とは違って1つの値しかない.下のコードを見てください. Object.defineProperty()Object.defineProperty(obj,prop,descriptor)メソッドは、オブジェクトに直接新しい属性を定義したり、オブジェクトの既存属性を修正したりして、このオブジェクトに戻ります. 属性を定義するオブジェクト 定義または変更する属性の名前 は、属性に関する定義または修正された属性記述子の説明を、descriptorを参照してください.私たちのデータ双方向バインディングの実現はObject.definePropertyから完全に来ています.
const obj = {
name:' '，
}；
obj.name ；//
obj.name = ‘ ’；
const obj = {
get name(){.....}，
set name(){.....}，
}；
const obj = {
_name:' ',
get name(){
return this._name；
}，
set name(value){
this._name = value;
}，
}；
obj.name //
obj.name ='' ’；
obj.name // ’
-----------------------------
const obj = {};
Object.defineProperty(obj, 'name', {
get() {
return document.getElementsByTagName('input')[0].value;
},
set(value) {
document.getElementsByTagName('input')[0].value = value;
},
configurable: true
});
document.getElementsByTagName('input')[0].onchange = function () {
console.log('obj', obj.name);
}