上一篇文章中，我們一起了解了vue.js的數據驅動視圖的機制，也使用Object.defineProperty制作了一個簡單的實現demo，在跟舉總（Topcss）聊完以后，腦袋中靈光一閃，想到了ES6的代理，沒錯，就是代理。
Angularjs使用輪巡來檢查數據，vue.js使用消息機制，我們可以設想如下場景：
小明的朋友給他寄了一份包裹，現在小明要領包裹。
Angularjs告訴小明，你要每隔一個小時去物流配送點那里看一下，看到包裹了就領回家；vue.js告訴小明，你就在家看電視吧，包裹到了快遞員給你打電話，你去取一下。那我們今天要聊聊代理的方法，就是小明直接給快遞員打電話，讓包裹到了直接送到家就行了。
跟上一篇一樣，我們來看看簡單實現的代碼
首先，我們在頁面上放置一個簡單的視圖
<h1>你好:<span id="target">世界</span></h1>
接下來，我們來設置數據模型并且將數據模型跟視圖進行驅動綁定
"use strict";
document.addEventListener('DOMContentLoaded',function () {
//數據
var data = {
name : '前端C羅'
};
//視圖容器
var el = document.getElementById('target');
//對數據進行代理
function bind(el,data) {
var p = new Proxy(data,{
get : function (targt , key ,receiver) {
//el.innerHTML = targt[key];
return Reflect.get(targt , key ,receiver);
},
set : function (targt , key ,receiver) {
//判斷數據是否發生變化
el.innerHTML = targt[key];
return Reflect.set(targt , key ,receiver);
}
});
return p;
}
//綁定
data = bind(el,data);
setTimeout(function () {
//數據發生變化
data.name = '前端迷途者';
},1000);
});
在上面的代碼中，我們對數據data進行了代理包裝，并且返回代理對象，所有對數據對象data的操作就會被代理捕獲，并且交由代理來處理數據的變化，那么當我們在數據變化的時候要求代理去更新相應的視圖即可達到數據驅動視圖的目標。同時，代理還可以對數據進行更多的控制，比如對某些數據進行寫保護，不允許外部對數據的某些屬性進行寫的操作等。
隨著js本身的發展，我們能夠完成越來越多更復雜的機制（在效率更高的情景下），但是受限于瀏覽器的支持，一些很強大的功能暫時只能在有限的平臺上使用，但是我相信美好的東西必將得到普及。
小菜的日常，望共勉。
