数据驱动视图简单实现

前端框架日新月异，Angularjs的MVVM模式风靡全球，React的MV模式也被大家捧得火热。我不知道有多少人在使用Vue.js，这也不重要，框架对于前端从业人员而言绝对是提升效率的利器，各种框架/各种库帮我们解决了大量的繁琐工作/兼容性工作。

最近在一个移动端项目中想去使用Vue.js，那必然会跟跟当下其他比较火热的框架进行一个比较，具体的比较过程大家也可以从 是否能完成需求/库文件的大小/社区活跃度/稳定性/性能/团队技术特点 等等方面去观测，这里不再去赘述。

今天的题目是“数据驱动视图简单实现”，我们知道Angularjs号称数据双向绑定，也就是说数据模型中数据发生改变时相应的视图也会跟随发生改变，而Vuejs也是如此，并且称自己不用像Angularjs那样做数据脏检查。那我们先看看数据脏检查是什么意思

脏检查 即一种不关心你如何以及何时改变的数据， 只关心在特定的检查阶段数据是否改变的数据监听技术.

那既然Vuejs不使用这种轮巡式的检测方式，它使用的是什么方式呢？没错，就是事件触发式。它不会去劳心费力地做一些无用功，当数据发生变化时，直接给Vuejs打个电话，让它去看看是否需要进行下一步处理即可。

为了更好地去理解这种机制，我们取了一个很唬人的标题，当然唬人不是骗人，下面我们就来简单实现一个demo，当数据变动时去自动更新视图。

首先，我们在页面上放置一个简单的视图

<h1>你好：<span id="target">世界</span></h1>

接下来，我们来设置数据模型并且将数据模型跟视图进行驱动绑定

document.addEventListener('DOMContentLoaded',function () { 
    //视图
    var view = document.getElementById('target');

    //数据
    var data = {
        name : '世界'
    };

    //视图和数据进行关联
    Object.defineProperty(data,'name',{
        get : function () { 
            return view.innerHTML;
        },
        set : function (val) { 
            view.innerHTML = val;
        }
    });

    //修改测试
    var timer = setTimeout(function () { 
        //数据发生改变
        data.name = 'chaoluo';
    },3000);
});

这里使用Object.defineProperty来对指定数据对象值变动进行监听，并且在对象值变化时实时去执行相应视图的更新，当然这里是没有任何优化且仅仅是用于简单演示所用，你可以在数据值被设置时先检测新的值是否改变，如值未改变则视图可以保持原样。

再来看看该方法的支持性 http://kangax.github.io/compat-table/es5/#test-Object.defineProperty 总体而言在移动端支持性还是很不错的。

本文简单介绍了如何通过Object.defineProperty进行数据与视图的绑定，也是告诉自己当我们在使用一些框架时要更加清晰地去了解它的实现原理和适用场景，不要只停留在会用的层面。小菜的日常，望共勉。