怎么用Javascript实现观察者模式

本篇内容主要讲解"怎么用Javascript实现观察者模式"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"怎么用Javascript实现观察者模式"吧!

什么是观察者模式？

• 观察者模式一种设计模式。

• 观察者模式定义了对象间的一种 一对多 的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。

• 简单说明，在观察者模式中，有两个模型，一个观察者(observer)和一个被观察者(Observed)。当被观察者发生改变或变化时，会通知观察者。

场景模拟

• 倘若即将到来双11，想要在双11购买商品的人就是观察者(Observer)

• 想要购买的商品就是被观察者(Observed)

• 为了更加形象，添加一个商家来改变商品的价格，商家也就是发布者(Publish)

• 当双11当天，商家(发布者(Publish))会修改商品（被观察者(Observed)）的价格，然后关注订阅该商品的人（观察者(Observer)）就会收到信息通知。

代码实现

//观察者设计模式//发布者 -->商家var shopObj = {};//商品列表 [key:[]], key为商品名shopObj.list = [];//订阅方法shopObj.listen = function ( key, fn) {// key是商品型号, fn这个函数就是订阅的行为    if (!this.list[key]) {        this.list[key] = [];    }    this.list[key].push(fn);//往商品名为key的商品列表中添加订阅}//发布消息方法shopObj.publish = function (key) {    //var key = arguments[0];//如果不传参数key，这样也可以    var fns = this.list[key];    // for (var i = 0; i < fns.length; i++) {        for(var i = 0 ,fn; fn = fns[i++];){        //执行订阅的函数fn  arguemnts储存的所有实参        // var fn = fns[i++];        fn.apply(this, arguments)    }}//A用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log( "A用户收到：" + brand + model + "手机降价了");})//B用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log("B用户收到：" + brand + model + "手机降价了");})//c用户添加订阅shopObj.listen("小米", function (brand, model) {    console.log("C用户收到：" + brand + model + "手机降价了");})//双11 商家发布消息华为降价的信息shopObj.publish("华为", "p30");shopObj.publish("小米", "Mix4");

重构代码

//观察者设计模式var Eevent = {    //商品列表 [key:[]], key为商品名    list: [],    //订阅方法    listen: function (key, fn) {// key是商品型号, fn这个函数就是订阅的行为        if (!this.list[key]) {            this.list[key] = [];        }        this.list[key].push(fn);    },    //发布消息方法    publish: function (key) {        //var key = arguments[0];//如果不传参数key，这样也可以        var fns = this.list[key];        // for (var i = 0; i < fns.length; i++) {        for (var i = 0, fn; fn = fns[i++];) {            //执行订阅的函数fn  arguemnts储存的所有实参            // var fn = fns[i++];            fn.apply(this, arguments)        }    }}//观察者对象初始化var initEvent = function (obj) {    for (var i in Eevent) {        obj[i] = Eevent[i];    }}//发布者 -->商家var shopObj = {};initEvent(shopObj);//A用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log("A用户收到：" + brand + model + "手机降价了");})//B用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log("B用户收到：" + brand + model + "手机降价了");})//c用户添加订阅shopObj.listen("小米", function (brand, model) {    console.log("C用户收到：" + brand + model + "手机降价了");})//双11 商家发布消息华为降价的信息shopObj.publish("华为", "p30");shopObj.publish("小米", "Mix4");

到此，相信大家对"怎么用Javascript实现观察者模式"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！