之前工作时对于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变成私有,但是目前还没想到什么好方法。先就这样吧。
网友评论