监听 javascript 对象的变化

Posted 2020-08-27

        这一章话题的由来，还要从一些学员的作业说起。写这篇文章主要是想让大家能从不同的角度分析问题，学习的过程中多看，多练，多想，多查，多用心。在特别多的学习网站中大部分的学习资料基本都是循规蹈矩的，例如慕课网的 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);
  }
}