监听 javascript 对象的变化

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了监听 javascript 对象的变化相关的知识,希望对你有一定的参考价值。

        这一章话题的由来,还要从一些学员的作业说起。写这篇文章主要是想让大家能从不同的角度分析问题,学习的过程中多看,多练,多想,多查,多用心。在特别多的学习网站中大部分的学习资料基本都是循规蹈矩的,例如慕课网的 javascript 入门教程中,很多讲师都讲了一些实例,而这些例子中的代码风格如出一辙,没什么新意,而且这些教程占了很大一部分比例。在这里,给大家提供另外一种思路 ------ 监听,具体代码的实现大家自己实现。也欢迎大家评论区写出不同想法。

先给出监听的概念:监听一个对象的某个属性是否发生变化,在该属性变化时立即触发制定的回调函数。

实例:购物车,想必大家肯定都接触过,那它的功能如何去实现呢?

以某宝购物车截图为例:

技术分享

 

一、功能概述

  1. 选中商品 -- 总数,总价发生变化

  2. 增加单类商品数量 -- 总数, 总价,单类商品总价 发生变化

  3. 删除 单类商品 -- 总数总价发生变化

二、数据模型

    单个商品数据模型{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);
}
}

 

























以上是关于监听 javascript 对象的变化的主要内容,如果未能解决你的问题,请参考以下文章

监听 JavaScript 中的变量变化

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

关于小程序使用watch监听数据变化的方法

Javascript----input事件实现动态监听textarea内容变化

动态数据绑定之监听对象变化