监听 javascript 对象的变化
2017-01-11 13:13
197 查看
广播: 关注微信公众号“jQuery每日经典”,有更多资料。微信小程序 -- 前端技术API手册 也在公众号首次发布。有需要的联系公众号中QQ。
这一章话题的由来,还要从一些学员的作业说起。写这篇文章主要是想让大家能从不同的角度分析问题,学习的过程中多看,多练,多想,多查,多用心。在特别多的学习网站中大部分的学习资料基本都是循规蹈矩的,例如慕课网的 javascript 入门教程中,很多讲师都讲了一些实例,而这些例子中的代码风格如出一辙,没什么新意,而且这些教程占了很大一部分比例。在这里,给大家提供另外一种思路 ------ 监听,具体代码的实现大家自己实现。也欢迎大家评论区写出不同想法。
先给出监听的概念:监听一个对象的某个属性是否发生变化,在该属性变化时立即触发制定的回调函数。
实例:购物车,想必大家肯定都接触过,那它的功能如何去实现呢?
以某宝购物车截图为例:
一、功能概述
选中商品 -- 总数,总价发生变化
增加单类商品数量 -- 总数, 总价,单类商品总价 发生变化
删除 单类商品 -- 总数总价发生变化
二、数据模型
单个商品数据模型{ischeck:是否选中, single:12, count, 2, total:24}
总商品数据模型{items:商品列表, totalCount:总数, totalPrice:总价}
三、常用逻辑
1. 点击复选框(选中单类商品),修改总数 和 总价
代码格式如下:
监听模式的另一个表达方式是观察者模式,其实并没有什么高级的。购物车这个功能用监听模式可以描述为:当修改什么的时候,什么发生变化。
watch(item, 'isCheck', function(newVal, oldVal, obj){ if(newVal){ all['totalCount'] = all['totalCount'] + obj['count']; all['totalPrice'] = all['totalPrice'] + obj['total']; } else { ... } }); item['isCheck'] = false;
功能其实是一样的,只不过是从“当修改什么的时候,去修改另外的什么”这种思想转变为了“当修改什么的时候,什么发生变化”。
五、相关资料
1. Object.prototype.watch()
网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/watch
例1:
var o = {p:1}; o.watch("p",function (id,oldval,newval) { console.log("o."+id+"由"+oldval+" 变为 "+newval); return newval; }); o.p = 2; o.p = 3;
上面的代码显示结果如下:
o.p 由 1 变为 2 o.p 由 2 变为 3
警告:这个方法是非标准的,仅在Gecko中实现了,并且这方法主要是为了在调试的时候使用。
2. github上也有一些watch.js的项目,
推荐一个:https://github.com/melanke/Watch.JS
具体使用情况和对它的评价网上有不少,大家可以看一下。
3. 自己实现
上面代码中的watch方法其实是我自己手写的,粗陋代码如下:
function watch(obj, prop, callback){ if(prop in obj){ var old = obj[prop]; Object.defineProperty(obj,prop, { enumerable: true, configurable: true, set: function(val) { var o=old;old=val; callback(val,o,obj); }, get:function(){ return old; } }); } else { throw new Error("no such property: " + pro); } }
相关文章推荐
- Rudolph javascript 监听简单对象属性的变化 -- 回调函数的应用
- javascript 监听对象属性的变化
- Servlet事件监听器、监听servletContext域对象创建和销毁、监听三个域对象属性变化
- IPHONE 和 KVC/KVO 监听对象属性变化(例如:获取textView 的text的变化)
- 【javascript-待解决】 监听父容器大小变化
- vue(2) -- vue在watch中监听对象属性的变化
- 使用watch监听路由变化和watch监听对象
- (转)监听对象数据库变化的几点经验(for ce)
- vue2.0监听数组中对象属性的变化
- JavaScript监听input等表单输入框的变化事件oninput
- javascript --- 实时监听输入框值的变化
- JS 对象与数组的变化监听
- 好好学一遍JavaScript 笔记(九)――事件处理函数/监听函数/事件对象
- javascript监听值变化
- JavaScript适时监听输入框值的即时变化
- JavaScript实现MVVM之我就是想监测一个普通对象的变化
- Servlet事件监听器、监听servletContext域对象创建和销毁、监听三个域对象属性变化
- Servlet事件监听器、监听servletContext域对象创建和销毁、监听三个域对象属性变化
- 好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象
- Vue监听数据对象变化源码