快捷導(dǎo)航

javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法

更新時(shí)間：2020年04月03日 11:06:35 作者：張磊

這篇文章主要介紹了javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

defineProperty

Object提供的方法，用于給對(duì)象添加自定義屬性具體用法如下：

const obj = { _value: 1 };

Object.defineProperty(obj, 'value', {
  get: function() {
    console.log('get方法執(zhí)行');
    return this._value;
  },
  set: function(a) {
    console.log('set方法執(zhí)行');
    this._value = a;
  }
})
obj.value = 3;
console.log(obj.value);
console.log(obj._value);

在node中執(zhí)行結(jié)果如下：

下面來分析一下代碼
首先定一個(gè)對(duì)象，并對(duì)對(duì)象添加一個(gè)自定義屬性value,同時(shí)添加了getter,setter兩個(gè)函數(shù)用來分別控制value屬性的修改和獲取，
當(dāng)執(zhí)行obj.value = 3;時(shí)，會(huì)自動(dòng)調(diào)屬性的setter方法，將value的修改同步到_value屬性上,當(dāng)執(zhí)行obj.value語句獲取屬性值時(shí)，會(huì)自動(dòng)調(diào)用getter方法獲取方法的返回值；

總結(jié) （參考MDN）
該方法接收三個(gè)參數(shù)
obj:要添加屬性的對(duì)象
prop: 要定義的屬性
descriptor：要定義或者修改的屬性描述符
其中描述符包含以下幾種

1.configurable：布爾值，控制屬性是否能改變(除了value,writable)及刪除
2.enumerable: 布爾值，控制屬性是否可枚舉，即通過for in循環(huán)或者Object.keys訪問
3.value：屬性值，可以時(shí)任何有效JavaScript值
4.writable 布爾值，屬性可否通過賦值修改
5.get:屬性getter函數(shù)，執(zhí)行時(shí)傳入this,this值取決于調(diào)用者
6.set:屬性setter函數(shù)，賦值時(shí)執(zhí)行，并傳入this

雙向綁定

由此可以設(shè)計(jì)一下數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)現(xiàn)：
在數(shù)據(jù)對(duì)象內(nèi)定義屬性，通過對(duì)dom綁定事件監(jiān)聽dom內(nèi)值的變化，并賦值給數(shù)據(jù)對(duì)象，數(shù)據(jù)對(duì)象的改動(dòng)會(huì)調(diào)用自身的setter方法，在方法內(nèi)在動(dòng)態(tài)修改dom內(nèi)容。

代碼如下：

<!-- 簡(jiǎn)單數(shù)據(jù)雙向綁定實(shí)現(xiàn) -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="root">
      <button id='btn'>請(qǐng)求數(shù)據(jù)</button>
    </div>
  </body>
  <script>
    const root = document.getElementById('root');
    const btn = document.getElementById('btn');
    const input = document.createElement('input');
    const model = document.createElement('p');
    const dataModel = {
      _value:0,
    }
    Object.defineProperty(dataModel, 'value', {
      configurable: true,
      set:function(value){
        this._value = value;
        input.value = value;
        model.innerHTML = `<span>數(shù)據(jù)模型：</sapn> ${value}`;
      },
      get:function(){
        return this._value;
      }
    })

    btn.addEventListener('click', () => {
      const range = Math.floor(Math.random(0, 1) * 100);
      dataModel.value = range;
    })

    input.addEventListener('input',(ev) => {
      dataModel.value = ev.target.value;
    })

    const initPage = () => {
      dataModel.value = 100;
    }
    initPage();
    root.append(input);
    root.append(model);
  </script>
</html>

描述有點(diǎn)亂，看實(shí)現(xiàn)代碼更清晰一點(diǎn)，有問題歡迎指正

到此這篇關(guān)于javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法的文章就介紹到這了,更多相關(guān)javascript defineProperty雙向綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: