javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法
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é)果如下：
下面來(lái)分析一下代碼首先定一個(gè)對(duì)象，并對(duì)對(duì)象添加一個(gè)自定義屬性value,同時(shí)添加了getter,setter兩個(gè)函數(shù)用來(lái)分別控制value屬性的修改和獲取，當(dāng)執(zhí)行obj.value = 3;時(shí)，會(huì)自動(dòng)調(diào)屬性的setter方法，將value的修改同步到_value屬性上,當(dāng)執(zhí)行obj.value語(yǔ)句獲取屬性值時(shí)，會(huì)自動(dòng)調(diào)用getter方法獲取方法的返回值；
總結(jié) （參考MDN）該方法接收三個(gè)參數(shù)obj:要添加屬性的對(duì)象prop: 要定義的屬性descriptor：要定義或者修改的屬性描述符其中描述符包含以下幾種
1.configurable：布爾值，控制屬性是否能改變(除了value,writable)及刪除2.enumerable: 布爾值，控制屬性是否可枚舉，即通過(guò)for in循環(huán)或者Object.keys訪問(wèn)3.value：屬性值，可以時(shí)任何有效JavaScript值4.writable 布爾值，屬性可否通過(guò)賦值修改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)定義屬性，通過(guò)對(duì)dom綁定事件監(jiān)聽(tīng)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)，有問(wèn)題歡迎指正
到此這篇關(guān)于javascript用defineProperty實(shí)現(xiàn)簡(jiǎn)單的雙向綁定方法的文章就介紹到這了,更多相關(guān)javascript defineProperty雙向綁定內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法2. 在vue中獲取wangeditor的html和text的操作3. Python用K-means聚類算法進(jìn)行客戶分群的實(shí)現(xiàn)4. python mysql 字段與關(guān)鍵字沖突的解決方式5. python編寫(xiě)五子棋游戲6. Java xml數(shù)據(jù)格式返回實(shí)現(xiàn)操作7. 解決Android Studio Design界面不顯示layout控件的問(wèn)題8. vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決9. Java源碼解析之接口List10. python讀取中文路徑時(shí)出錯(cuò)(2種解決方案)
網(wǎng)公網(wǎng)安備