利用object.defineProperty實現數據與視圖綁定

時間 2019-11-21

標籤利用 object.defineproperty object defineproperty 實現數據視圖綁定简体版

原文原文鏈接

　　現在比較火的mvvm框架，例如vue就是利用es5的defineProperty來實現數據與視圖綁定的，下面我來介紹一下defineProperty的用法。html

 var people= {}
    Object.defineProperty(people,"name",{
      value: 'lin'
    })
    console.log(people.name);//lin

能夠看到defineProperty的基本用法就是給一個對象添加一個新屬性。上面的代碼就是給people對象添加了一個屬性name，值爲lin。vue

參數

第一個參數:目標對象框架

第二個參數:須要定義的屬性或方法的名字。dom

第三個參數:目標屬性所擁有的特性。mvvm

第三個參數能夠設置如下屬性。es5

value:屬性的值spa

configurable:總開關，一旦爲false，不能再設置，value，writable，configurable。code

writable:若是爲false，屬性的值就不能被重寫,只能爲只讀了htm

enumerable:是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。對象

get:當屬性(例如第一個例子的name屬性)值被讀的時候會觸發該方法。

set:當屬性(例如第一個例子的name屬性)被設置新值時會觸發該方法，這就是數據驅動視圖的關鍵

注意：不能設置get 和 set的同時設置writable或value，不然會報錯。

下面是一個簡單的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<textarea></textarea>
<script>
    let obj = {};

    Object.defineProperty(obj, "key", {
        get: function () {
            return document.querySelector('textarea').innerHTML;  //當取obj.key屬性時，執行該方法，返回的是dom節點的值(這裏爲textarea的值)
        },
        set: function (info) {
            document.querySelector('textarea').innerHTML = info;  //當設置obj.key屬性時，執行該方法，對應修改dom節點的值(這裏爲textarea的值)

} }); 

obj.key = "嘻嘻嘻"; //這個賦值操做會觸發set方法 
</script>
</body> 
</html>

效果以下：

能夠看到，我給obj的key屬性賦了新值「嘻嘻嘻」以後，dom中的textarea內容也變成了了「嘻嘻嘻」。

相關標籤/搜索

object.defineproperty

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。