这一章话题的由来，还要从一些学员的作业说起。写这篇文章主要是想让大家能从不同的角度分析问题，学习的过程中多看，多练，多想，多查，多用心。在特别多的学习网站中大部分的学习资料基本都是循规蹈矩的，例如慕课网的 javascript 入门教程中，很多讲师都讲了一些实例，而这些例子中的代码风格如出一辙，没什么新意，而且这些教程占了很大一部分比例。在这里，给大家提供另外一种思路 ------ 监听，具体代码的实现大家自己实现。也欢迎大家评论区写出不同想法。
先给出监听的概念：监听一个对象的某个属性是否发生变化，在该属性变化时立即触发制定的回调函数。
实例：购物车，想必大家肯定都接触过，那它的功能如何去实现呢？
以某宝购物车截图为例：
一、功能概述
- 选中商品 -- 总数，总价发生变化
- 增加单类商品数量 -- 总数， 总价，单类商品总价 发生变化
- 删除 单类商品 -- 总数总价发生变化
二、数据模型
单个商品数据模型{ischeck:是否选中, single:12, count, 2, total:24}
总商品数据模型{items:商品列表, totalCount:总数, totalPrice:总价}
三、常用逻辑
1. 点击复选框（选中单类商品），修改总数 和 总价
代码格式如下：
var singleItem = document.getElementById("复选框");
singleItem.点击事件 = function(){}
总数=总数+this.count; 总价=总价+this.total;
总数=总数-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); }}