数据驱动视图简单实现-新篇

上一篇文章中，我们一起了解了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本身的发展，我们能够完成越来越多更复杂的机制（在效率更高的情景下），但是受限于浏览器的支持，一些很强大的功能暂时只能在有限的平台上使用，但是我相信美好的东西必将得到普及。

小菜的日常，望共勉。