利用object.defineProperty實現數據與視圖綁定
阿新 • • 發佈：2017-09-10
html ble bject type document people 嘻嘻 charset spa
如今比較火的mvvm框架，例如vue就是利用es5的defineProperty來實現數據與視圖綁定的，下面我來介紹一下defineProperty的用法。
var people= {} Object.defineProperty(people,"name",{ value: ‘lin‘ }) console.log(people.name);//lin
可以看到defineProperty的基本用法就是給一個對象添加一個新屬性。上面的代碼就是給people對象添加了一個屬性name，值為lin。
參數
第一個參數:目標對象
第二個參數:需要定義的屬性或方法的名字。
第三個參數:目標屬性所擁有的特性。
第三個參數可以設置以下屬性。
value:屬性的值
configurable:總開關，一旦為false，不能再設置，value，writable，configurable。
writable:如果為false，屬性的值就不能被重寫,只能為只讀了
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實現數據與視圖綁定