数据驱动视图简单实现
来源:互联网 发布:淘宝企业店铺升级入口 编辑:程序博客网 时间:2024/05/16 14:16
数据驱动视图简单实现
前端框架日新月异,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进行数据与视图的绑定,也是告诉自己当我们在使用一些框架时要更加清晰地去了解它的实现原理和适用场景,不要只停留在会用的层面。小菜的日常,望共勉。
- 数据驱动视图简单实现
- vuejs实现数据驱动视图原理
- vue.js实现数据驱动视图原理
- Android数据驱动视图更新
- DataView数据视图实现数据过滤,排序
- 推荐给初学者:通过ODBC?JDBC和SQL专用JDBC驱动实现简单的数据?
- IOS视图切换实现简单动画
- 实现一个简单的滚动视图
- UIScrollView实现的简单视图切换
- 超简单的滑动视图实现
- ArcEngine 实现数据视图和布局视图同步
- mvp 简单的案例, mvp实现登录及注册 分为moudle数据层 activity视图v层 Presenter逻辑层
- 动态列名数据视图实现
- Flex4 Spark组件数据驱动简单示例
- DataView数据视图实现数据过滤,排序(代码调试通过)
- LED驱动的简单实现(fl2440)
- 简单Linux驱动Helloworld的实现
- 使用ioremap实现的简单驱动
- View生命周期
- Spring 3.x/4.x系列改动日志spring 3.0 3.1 3.2 4.0 4.1 4.2
- C#数据类型
- android 处理双击事件监听
- 类的逆向分析
- 数据驱动视图简单实现
- Flume之监控
- 常用的正则表达式大全
- Monkey log详细分析说明
- 第3课时《osg模型控制》
- 函数柯里化
- Android
- 学习GitHub(五): 远程仓库和本地仓库
- fatal error LNK1168: cannot open Debug/opreat.exe for writing