通過原生js實現數據的雙向綁定
- 2021 年 7 月 15 日
- 筆記
- javascript, 前端
通過js實現數據的雙向綁定 ：
Object.defineProperty了解
語法：
Object.defineProperty(obj, prop, descriptor)
obj 要定義屬性的對象。
prop 要定義或修改的屬性的名稱
descriptor 要定義或修改的屬性描述符
obj和prop很好理解 比如我們定義一個變量為
const o = {
name:'xbhog'
}
其中obj指的就是o,prop指的就是o.name 下面我們主要看看descriptor
descriptor 目標對象屬性的一些特徵（是一個對象）
descriptor 下有6個參數
參數1：
value:屬性值
參數2：
writable：對象屬性值是否可以被修改 true允許 false不允許
參數3：
configurable:對象屬性是否可以被刪除 true允許 false不允許
參數4：
enumerable:對象屬性是否可被枚舉
參數5：
get():是個函數，當訪問該屬性的時候，函數自動調用，函數返回值就是該屬性的值
參數6：
set():是個函數，當修改該屬性的時候，函數自動調用，函數有且只有一個參數，賦值的新值
注意：描述符里的value屬性 writable屬性 與 get屬性 set屬性是互斥的關係，只能存在一個
了解了前置知識，我們來實現Vue中的v-model的雙向綁定。
先看實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過js實現數據的雙向綁定</title>
</head>
<body>
<input type="text"/><br>
<h1>你好：<span>更新數據</span></h1>
<!-- 通過js實現數據的雙向綁定 -->
<script>
// 方法返迴文檔中與指定選擇器或選擇器組匹配的第一個 HTMLElement對象
var ipt =document.querySelector('input');
var p = document.querySelector('span');
var data = {name:""};
/*
oninput 事件在用戶輸入時觸發。
該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。
*/
ipt.oninput = function(){
// 將ipt.value中的值傳給data.name的value
data.name = ipt.value;
}
//劫持ipt.value
Object.defineProperty(data,"name",{
// 數據訂閱
get(){
return ipt.value; //當訪問的時候會調用get方法
},
// 數據劫持
//name:value
set(value) {
p.innerHTML = value;
ipt.value = value;
}
})
</script>
</body>
</html>
首先我們通過document.querySelector獲取input以及span標籤的Html對象，在定義一個data對象，屬性name先為空。
使用事件監聽oninput來監聽用戶輸入(該事件在 <input> 或 <textarea> 元素的值發生改變時觸發)。
將ipt.value中的值傳給data.name的value；
data.name = ipt.value;
利用Object.defineProperty劫持用戶輸入的數據。
- get 屬性：是個函數，當訪問該屬性的時候，函數自動調用，函數返回值就是該屬性的值
- set 屬性：是個函數，當修改該屬性的時候，函數自動調用，函數有且只有一個參數，賦值的新值
Object.defineProperty(data,"name",{
// 數據訂閱
get(){
return ipt.value; //當訪問data.name時候會調用get方法，調用ipt.value獲取當前value的值
},
// 數據劫持
set(value) { //設置數據的時候會自動調用set方法
p.innerHTML = value;
ipt.value = value;
}
看效果比較明顯：
set方法：
get方法：
最後實現效果：
如果你看到這裡或者正好對你有所幫助，希望能點個關注或者推薦，感謝；
有錯誤的地方，歡迎在評論指出，作者看到會進行修改。
