数据驱动视图简单实现

原创 2016年05月30日 11:38:12

数据驱动视图简单实现

前端框架日新月异,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进行数据与视图的绑定,也是告诉自己当我们在使用一些框架时要更加清晰地去了解它的实现原理和适用场景,不要只停留在会用的层面。小菜的日常,望共勉。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

excel数据驱动接口测试框架

接口测试自动化框架搭建                                        ...

Excel数据驱动框架实战

Excel数据驱动框架搭建的详细过程

自动化测试里的数据驱动和关键字驱动思路的理解

以前初次接触自动化测试时,对数据驱动和关键字驱动不甚理解,觉得有点故弄玄须,不就是参数和函数嘛!其实其也有着对自动化测试的独特视角的解读。

基于React实现项目中状态型变量的数据驱动可视化

经历了一段时间无代码的日子后,最近几天又开始着手于写代码了。上午出去看了超俪的《恶棍天使》,虽然说也笑了很多,但是还是觉得很多地方纯粹就是为了笑而制造笑点,电影本可以传递友情啊亲情啊什么的,但是最后却...

模拟Vue之数据驱动

一、前言 在随笔“模拟Vue之数据驱动1”结尾处,我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗? 如下:   倘若user中的name、age属性...

Vue.js-数据驱动的组件化

近年来前段开发趋势 旧浏览器逐渐淘汰移动端需求增加用户体验要求更高架构从传统的后台MVC向REST API+前端MV*迁移 前端MV*框架 针对具有复杂交互逻辑的前端应用提供基础的架构抽象通过aj...

Android数据驱动视图更新

Android的开发过程中,会使用到一些可编辑视图,或者一些随着数据发生改变,需要自动更新视图的功能等等。此类视图大都需要数据同步,以此来更新视图的展现。再加上数据类型的繁杂,所以不太适合在每个类中添...

UIScrollView实现的简单视图切换

前言: 在iOS应用中,一些广告或者图片经常需要切换浏览,下面的例子简单实现,使用的时候可以自己进行扩展,把三个视图进行改变,或者增加视图数量。 实现: 在ViewController中...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)