javascript用defineProperty實現簡單的雙向綁定方法
defineProperty
Object提供的方法，用于給對象添加自定義屬性具體用法如下：
const obj = { _value: 1 };Object.defineProperty(obj, ’value’, { get: function() { console.log(’get方法執行’); return this._value; }, set: function(a) { console.log(’set方法執行’); this._value = a; }})obj.value = 3;console.log(obj.value);console.log(obj._value);
在node中執行結果如下：
下面來分析一下代碼首先定一個對象，并對對象添加一個自定義屬性value,同時添加了getter,setter兩個函數用來分別控制value屬性的修改和獲取，當執行obj.value = 3;時，會自動調屬性的setter方法，將value的修改同步到_value屬性上,當執行obj.value語句獲取屬性值時，會自動調用getter方法獲取方法的返回值；
總結 （參考MDN）該方法接收三個參數obj:要添加屬性的對象prop: 要定義的屬性descriptor：要定義或者修改的屬性描述符其中描述符包含以下幾種
1.configurable：布爾值，控制屬性是否能改變(除了value,writable)及刪除2.enumerable: 布爾值，控制屬性是否可枚舉，即通過for in循環或者Object.keys訪問3.value：屬性值，可以時任何有效JavaScript值4.writable 布爾值，屬性可否通過賦值修改5.get:屬性getter函數，執行時傳入this,this值取決于調用者6.set:屬性setter函數，賦值時執行，并傳入this
雙向綁定
由此可以設計一下數據雙向綁定的簡單實現：在數據對象內定義屬性，通過對dom綁定事件監聽dom內值的變化，并賦值給數據對象，數據對象的改動會調用自身的setter方法，在方法內在動態修改dom內容。
代碼如下：
<!-- 簡單數據雙向綁定實現 --><!DOCTYPE html><html> <head> <meta charset='utf-8'> </head> <body> <div id='root'> <button id=’btn’>請求數據</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>數據模型：</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>
描述有點亂，看實現代碼更清晰一點，有問題歡迎指正
到此這篇關于javascript用defineProperty實現簡單的雙向綁定方法的文章就介紹到這了,更多相關javascript defineProperty雙向綁定內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. python 制作python包,封裝成可用模塊教程2. 解決Django響應JsonResponse返回json格式數據報錯問題3. asp.net core服務限制堆內存大小的操作方法4. Python爬取12306車次信息代碼詳解5. Python文字截圖識別OCR工具實例解析6. python實現處理mysql結果輸出方式7. 通過vue如何設置header8. 解決python腳本中error: unrecognized arguments: True錯誤9. Python 實現將某一列設置為str類型10. Python使用paramiko連接遠程服務器執行Shell命令的實現
網公網安備