Awesome Vue.js -- 鎮(zhèn)樓圖

動態(tài)數(shù)據(jù)綁定（一）

• <a >題目</a>
• <a >作業(yè)源碼</a>
• 考察知識點：
  <a >Object.defineProperty(ES5)</a>，
  <a >Object.keys(ES5)</a>，
  <a >Prototype原型對象</a>，
  <a >New 操作符</a>

在看完在線學(xué)習(xí)參考資料后，用了ES5和ES6兩種語法完成作業(yè)。
并且對ES6的Class類語法糖有更深一層的認(rèn)識。

用ES5的語法完成的代碼如下：

// ES5 Syntax
function Observer(obj){
   this.walk(obj)
}

var p = Observer.prototype //函數(shù)Observer的原型對象
p.data = {}  // 定義一個原型對象的屬性data，這個屬性被每個實例共享

// 定義原型對象的方法walk，這個方法會在每個實例對象創(chuàng)建時被調(diào)用
p.walk = function(obj){
    Object.keys(obj).forEach(function(key){
        if(typeof obj[key] === "object"){return p.walk(obj[key])}
         Object.defineProperty(p.data,key,{
            get:function(){ console.log("You are visiting the attribute: "+ key+" - "+obj[key]); return obj[key]  },
            set:function(newValue) { console.log("You are updating the attribute: "+ key+" - "+ newValue); obj[key] = newValue }
        })
    })
}

ES5瀏覽器運行結(jié)果

關(guān)于Object.defineProperty的實踐新知

Object.defineProperty(obj, prop, descriptor)用于直接在一個對象上定義一個新屬性，或者修改一個已經(jīng)存在的屬性， 并返回這個對象。
對象里目前存在的屬性描述符有兩種主要形式：數(shù)據(jù)描述符和存取描述符。數(shù)據(jù)描述符是一個擁有可寫或不可寫值(value)的屬性。存取描述符是由一對 getter-setter 函數(shù)功能來描述的屬性。
描述符必須是兩種形式之一；不能同時是兩者。

用ES6的語法完成的代碼如下：

// ES6 Syntax
Object.prototype.data = {};

class Observer{
   constructor(obj){
     this.walk(obj)
   }

   walk(obj){
    Object.keys(obj).forEach(key => {
        if(typeof obj[key] === "object"){return Observer.prototype.walk(obj[key])}
         Object.defineProperty(data,key,{
            get:() => { console.log("You are visiting the attribute: "+ key+" - "+obj[key]); return obj[key]  },
            set:newValue => { console.log("You are updating the attribute: "+ key+" - "+ newValue); obj[key] = newValue }
        })
    })
   }
}

ES6瀏覽器運行結(jié)果

是否對data對象的聲明方式Object.prototype.data = {};感到奇怪，為什么不直接在Class類里面聲明原型對象屬性，但如果真的這樣做，瀏覽器會報錯。

在Class類里直接定義原型對象屬性會報錯

原因是ES6 Class類里不支持直接定義原型對象的屬性，只支持定義原型對象的方法（參考傳送門：<a >StackOverflow</a>）。
其中兩點比較重要：

The notes in the ES wiki for the proposal in ES6 (maximally minimal classes) note:
There is (intentionally) no direct declarative way to define either prototype data properties (other than methods) class properties, or instance property
Class properties and prototype data properties need be created outside the declaration.

文：ES6中的class沒有直接定義原型對象屬性(除非是用method實現(xiàn))和實例對象屬性的聲明方法。

Maximally minimal classes is still at its very core prototypical inheritance. What you really want to do in your case is share structure and assign members for each instance. This is simply not what classes in ES6 aim for - sharing functionality. So yes, for sharing structure you'd have to stick to the old syntax. Until ES7 at least :) – Benjamin Gruenbaum

文：ES6中的class類是以實現(xiàn)核心典型的原型鏈繼承為目標(biāo)。而你想實現(xiàn)使每個實例對象獲得共享屬性/成員。共享功能 -- 這恰恰就不是ES6-class類的目標(biāo)。因此，如果想要實現(xiàn)屬性/成員變量共享結(jié)構(gòu)，應(yīng)該堅持使用舊的語法。直到ES7 ：）　　– Benjamin Gruenbaum

原創(chuàng)文章

簡書：<a href="http://www.itdecent.cn/u/c0600377679d">HelloCherry</a>
Github: <a >CaiYiLiang</a>
Girhub / vue-demos：

• <a >利用vue.js實現(xiàn)簡易計算器</a>
• <a >實現(xiàn)簡單的單頁面應(yīng)用(vue2.0,vue-router,vue-cliand ajax(jsonp))</a>
• <a >利用vue.js,vuex,vue-router和 Element UI實現(xiàn)購物車場景</a>
  很高興寫的<a >vue demos</a>被收錄到 <a >awesome-vue</a>中，簡直就是一朵小紅花??

如果覺得有一點點幫助，一個??就是鼓勵(?！?⌒)