ife 2017 -vue部分 任務(wù)一 數(shù)據(jù)綁定

任務(wù)詳情:

實現(xiàn)這樣的一個 Observer,要求如下:

傳入?yún)?shù)只考慮對象,不考慮數(shù)組。
new Observer返回一個對象,其 data 屬性要能夠訪問到傳遞進(jìn)去的對象。
通過 data 訪問屬性和設(shè)置屬性的時候,均能打印出右側(cè)對應(yīng)的信息。

參考資料:https://github.com/youngwind/blog/issues/84,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

代碼如下:

var Observer = function(dataObj) {
    this.data = dataObj;
    this.walk(dataObj);
};

//遍歷要觀察的對象屬性

 Observer.prototype.walk = function (object) {

var value;

for (var key in object) {
    if (object.hasOwnProperty(key)) {
        value = object[key];
        //判斷屬性的value類型,如果仍然是object,就調(diào)用遞歸算法
        if (typeof value ==="object") {
            new Observer(value);
        };

        //將值傳給convert函數(shù)
        this.convert(key,value);
    }
  }
}

Observer.prototype.convert = function (key,value) {
  Object.defineProperty(this.data,key,{
      enumerable: true,
      configurable: true,
      get:function() {
          console.log('正在訪問'+key+'屬性');
          return value;
      },
      set:function(newValue){
          console.log('正在設(shè)置'+key+'屬性');
          console.log('屬性值為'+ newValue);
          if(newValue === value){
              return;
          }
        value = newValue
      }
  });
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容