监听 javascript 对象的变化
广播: 关注微信公众号“jQuery每日经典”,有更多资料。微信小程序 -- 前端技术API手册 也在公众号首次发布。有需要的联系公众号中QQ。
这一章话题的由来,还要从一些学员的作业说起。写这篇文章主要是想让大家能从不同的角度分析问题,学习的过程中多看,多练,多想,多查,多用心。在特别多的学习网站中大部分的学习资料基本都是循规蹈矩的,例如慕课网的 javascript 入门教程中,很多讲师都讲了一些实例,而这些例子中的代码风格如出一辙,没什么新意,而且这些教程占了很大一部分比例。在这里,给大家提供另外一种思路 ------ 监听,具体代码的实现大家自己实现。也欢迎大家评论区写出不同想法。
先给出监听的概念:监听一个对象的某个属性是否发生变化,在该属性变化时立即触发制定的回调函数。
实例:购物车,想必大家肯定都接触过,那它的功能如何去实现呢?
以某宝购物车截图为例:
一、功能概述
-
选中商品 -- 总数,总价发生变化
-
增加单类商品数量 -- 总数, 总价,单类商品总价 发生变化
-
删除 单类商品 -- 总数总价发生变化
二、数据模型
单个商品数据模型{ischeck:是否选中, single:12, count, 2, total:24}
总商品数据模型{items:商品列表, totalCount:总数, totalPrice:总价}
三、常用逻辑
1. 点击复选框(选中单类商品),修改总数 和 总价
代码格式如下:
var singleItem = document.getElementById("复选框"); singleItem.点击事件 = function(){}
if(this选中){
总数=总数+this.count; 总价=总价+this.total; } else {
总数=总数-this.count; 总价=总价-this.total; }
} |
四、监听模式
监听模式的另一个表达方式是观察者模式,其实并没有什么高级的。购物车这个功能用监听模式可以描述为:当修改什么的时候,什么发生变化。
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);
}
}
posted on 2017-01-11 13:13 ThomasCui 阅读(4697) 评论(0) 编辑 收藏 举报