数据驱动视图简单实现

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

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

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

Vue.js数据驱动的组件,为现代化的 Web 界面而生

官网地址: http://cn.vuejs.org/ 1.Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是...

模拟Vue之数据驱动

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

easyui combobox实现搜索下拉补全功能

最近公司对后台进行改版,使用的是easyui+thinkphp来实现,之前也没接触过easyui,结果一用感觉特恶心,一个是官方文档并不完善,另外一个则是这种动态生成html的前端框架在需要对html...
  • tracy_n
  • tracy_n
  • 2017年06月28日 19:19
  • 647

easyUI下拉框表格扩展(实现搜索功能)[easyUI+java]

下拉框表格扩展搜索功能,表格实现分页

vue.js实现数据驱动视图原理

vuejs实现数据驱动视图原理什么是数据驱动?数据驱动是vuejs最大的特点。在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。比如说我们...
  • alokka
  • alokka
  • 2017年10月25日 17:21
  • 100

Android数据驱动视图更新

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

Flex4 Spark组件数据驱动简单示例

此处通过一个示例来使用List、DropDownList、ButtonBar三个数据驱动组件。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:数据驱动视图简单实现
举报原因:
原因补充:

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