观察者模式

2020-03-07  本文已影响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变成私有,但是目前还没想到什么好方法。先就这样吧。

上一篇 下一篇

猜你喜欢

热点阅读