美文网首页
观察者模式

观察者模式

作者: 超超超喜欢大河 | 来源:发表于2020-03-07 08:14 被阅读0次

之前工作时对于ajax的调用一直不满,工作中总是有问题出现,当时借用了观察者模式处理,但是一年过去了,现在忘得七七八八,今天全部手动重写一遍,加深印象。

// 观察者模式设计
//具体实现的场景,ajax获取数据实现实时更新
//实现的功能,ajax通过publish()函数发布消息,证明数据已经获取。需要数据的地方通过subscribe()函数订阅,在
//消息发布时进行一系列动作
//pub发送字符串,sub接受字符串和函数


//消息中心
var news_name = [];
var news_fun = [];
function publish(event_name) {
    if(news_name.indexOf(event_name)==-1){
        //    不存在
        return
    }else {
        //运行提前放在new_fun的函数
        var index = news_name.indexOf(event_name);
        news_fun[index]();
        return
    }
}

function subscribe(event_name,fun) {
    //判断传参是否符合规范,不合规范直接返回
    if(typeof event_name != "string" || typeof fun != "function"){
        console.log("参数输入错误")
        return
    }
    if(news_name.indexOf(event_name)==-1){
    //    不存在时,将事件名称和事件函数分别Push进消息中心
        news_name.push(event_name);
        news_fun.push(fun);
        return
    }else {
        return
    }
}

//测试函数
function b() {
   console.log("被调用了");
}

subscribe("b",b);
publish("b");
console.log("实验完毕");

这是最基本的调用,没有数据的传输,只有单纯的发布订阅。
下面将模式封装起来,依然是原生js实现

var observe = {
    __new_name: [],
    __new_fun: [],
    //为了让消息中心不被外界访问,这里需要用闭包实现隔离
    __news: function (event_type, event_name, message_or_fun) {
        var index = this.__new_name.indexOf(event_name);
        switch (event_type) {
            case "search":
                if (index == -1) {
                    return false
                } else {
                    return true
                }
                break;
            case "run":
                this.__new_fun[index](message_or_fun);
                break;
            case "subscribe":
                this.__new_name.push(event_name);
                this.__new_fun.push(message_or_fun);
                break;
            case "unsubscribe":
                if (index == -1) {
                    console.log("退订失败,无内容可退订")
                } else {
                    this.__new_name.splice(index, 1);
                    this.__new_fun.splice(index, 1);
                }
                break
        }

    },
    publish: function (event_name, message) {
        //如果消息名称不存在
        if (this.__news("search", event_name) == false) {
            return
        } else {
            this.__news("run", event_name, message);
            return
        }
    },
    subscribe: function (event_name, fun) {
        this.__news("subscribe", event_name, fun);
        return
    },
    //退订
    unsubscribe: function (event_name) {
        this.__news("unsubscribe", event_name);
        return
    }
};
function a() {
    console.log("a调用成功");
    return
}
function b(message){
    console.log("b+"+message);
    return
}
observe.subscribe("a",a);
observe.subscribe("b",b);
observe.publish("a");
observe.publish("b","发布消息b");
console.log(observe.__new_name);
console.log(observe.__new_fun);
observe.unsubscribe("a");
console.log("_________________________________");
console.log(observe.__new_name);
console.log(observe.__new_fun);

简单的函数就可以让ajax调用变得方便,非常nice。
现在不满足的地方在于我想把__news_name和__news_fun变成私有,但是目前还没想到什么好方法。先就这样吧。

相关文章

  • 11.9设计模式-观察者模式-详解

    设计模式-观察者模式 观察者模式详解 观察者模式在android中的实际运用 1.观察者模式详解 2.观察者模式在...

  • RxJava基础—观察者模式

    设计模式-观察者模式 观察者模式:观察者模式(有时又被称为发布(publish )-订阅(Subscribe)模式...

  • 前端面试考点之手写系列

    1、观察者模式 观察者模式(基于发布订阅模式) 有观察者,也有被观察者。 观察者需要放到被观察者列表中,被观察者的...

  • RxJava 原理篇

    一、框架思想 观察者模式观察者自下而上注入被观察者被观察者自上而下发射事件观察者模式 装饰器模式自上而下,被观察者...

  • 观察者模式

    观察者模式概念 观察者模式是对象的行为模式,又叫作发布-订阅(publish/subscrible)模式。 观察者...

  • 设计模式-观察者模式

    观察者模式介绍 观察者模式定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为...

  • 观察者模式

    观察者模式 观察者模式的定义 观察者模式(Observer Pattern)也叫做发布订阅模式(Publish/s...

  • iOS设计模式之观察者模式

    观察者模式 1、什么是观察者模式 观察者模式有时又被称为发布(publish)-订阅(Subscribe)模式、模...

  • 观察者模式和发布订阅模式区别

    观察者模式 所谓观察者模式,其实就是为了实现松耦合(loosely coupled)。 在观察者模式中,观察者需要...

  • RxJava(二)

    一、观察者模式 1.1、传统的观察者模式 1.2、RxJava 的观察者模式 区别传统的观察者模式是一个 Obse...

网友评论

      本文标题:观察者模式

      本文链接:https://www.haomeiwen.com/subject/lepfdhtx.html