Object.defineproperty實現數據和視圖的聯動

Object.defineproperty語法

在一個對象上定義新的屬性

var o = {}; // 創建一個新對象
// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});
// 對象o擁有了屬性a，值為37

// Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});
o.b = 38;

數據和視圖聯動

給對象o定義新的屬性b，並且定義屬性b的get和set方法，當o.b的時候會調用b屬性的get方法，給b屬性賦值的時候，會調用set方法，這就是修改數據的時候，視圖會自動更新的關鍵

前端獲取數據后，需要根據數據操作dom，視圖變化后，需要修改不少代碼，有沒有方法將數據和dom操作隔離，看一個例子

顯示用戶信息的html模版

<div>
    <p>你好，<span id='nickName'></span></p>
    <div id="introduce"></div>
</div>　　　　　　

 

//視圖控制器
var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
    get: function(){
        return document.getElementById('nickName').innerHTML;
    },
    set: function(nick){
        document.getElementById('nickName').innerHTML = nick;
    }
});
Object.defineProperty(userInfo, "introduce", {
    get: function(){
        return document.getElementById('introduce').innerHTML;
    },
    set: function(introduce){
        document.getElementById('introduce').innerHTML = introduce;
    }
})

 

//數據
//todo 獲取用戶信息的代碼
....

userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx，我來自雲南，..."

 

設置userInfo的nickName屬性時會調用set方法，更新dom節點的html

移動端兼容性

Feature	Firefox Mobile (Gecko)	Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.0 (2)	(Yes)	?	11.50	(Yes)

參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty