js设计模式-----观察者模式

来源：互联网发布：订酒店哪个软件好知乎编辑：程序博客网时间：2024/05/29 18:01
varshoeObj={};//定义发布者
shoeObj.list=[];//定义缓存列表，存放回调函数
//增加监订阅者
shoeObj.listen=function(fn){
shoeObj.list.push(fn);//订阅消息放到缓存列表
}
//发布消息
shoeObj.trigger=function(){
for(vari=0,fn;fn=this.list[i];i++){
fn.apply(this,arguments);
}
}
//小红订阅
shoeObj.listen(function(color,size){
console.log('颜色是'+color);
console.log('尺码是'+size)
});
//小花订阅
shoeObj.listen(function(color,size){
console.log('颜色是'+color);
console.log('尺码是'+size)
});
shoeObj.trigger("红色",40);
shoeObj.trigger("黑色",42);

-------------------------------------------------------------------------------------
varshoeObj={};//定义发布者
shoeObj.list=[];//定义缓存列表，存放回调函数
//增加监订阅者
shoeObj.listen=function(key,fn){
if(!this.list[key]){//如果没有创建此类消息，给该类消息创建一个缓存列表
this.list[key]=[];
}
this.list[key].push(fn);// 订阅消息添加到缓存列表
}
//发布消息
shoeObj.trigger=function(){
varkey = Array.prototype.shift.call(arguments);// 取出消息类型名称
varfns = this.list[key];// 取出该消息对应的回调函数的集合
if(!fns||fns.length===0){
return ;
}
for(vari=0,fn;fn=fns[i];i++){
fn.apply(this,arguments);// arguments 是发布消息时附送的参数
}
}
// 小红订阅如下消息
shoeObj.listen('red',function(size){
console.log("尺码是："+size);
});

// 小花订阅如下消息
shoeObj.listen('block',function(size){
console.log("再次打印尺码是："+size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);
-------------------------------------------------------------------------------
//代码进行封装
var event={
list:[],
listen:function(key,fn){
if(!this.list[key]){
this.list[key]=[];
}
this.list[key].push(fn);
},
trigger:function(){
var key =Array.prototype.shift.call(arguments);
var fns =this.list[key];
if(!fns||fns.length===0){
return
}
for(vari = 0,fn;fn = fns[i++];) {
fn.apply(this,arguments);
}
}
}
var initEvent=function(obj){
for(vari in event){
obj[i]=event[i];
}
}
var shoeObj={};
initEvent(shoeObj);
//小红订阅
shoeObj.listen('red',function(size){
console.log("尺码是："+size);
});

// 小花订阅如下消息
shoeObj.listen('block',function(size){
console.log("再次打印尺码是："+size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);
---------------------------------------------------------------------
取消监听
event.remove=function(key,fn){
var fns =this.list[key];
if(!fns){
return false;
}
// 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
if(!fn) {
fn && (fns.length =0);
}else {
for(vari = fns.length -1; i >= 0; i--) {
var _fn =fns[i];
if(_fn ===fn) {
fns.splice(i,1);// 删除订阅者的回调函数
}
}

}
var shoeObj={};
initEvent(shoeObj);
// 小红订阅如下消息
shoeObj.listen('red',fn1 =function(size){
console.log("尺码是："+size);
});

// 小花订阅如下消息
shoeObj.listen('red',fn2 =function(size){
console.log("再次打印尺码是："+size);
};
shoeObj.remove("red",fn1);
shoeObj.trigger("red",fn2);

-------------------------------------------------------------------
全局---订阅发布代码封装
var Event = (function(){
var list = {},
listen,
trigger,
remove;
listen = function(key,fn){
if(!list[key]) {
list[key] = [];
}
list[key].push(fn);
};
trigger = function(){
var key =Array.prototype.shift.call(arguments),
fns = list[key];
if(!fns ||fns.length ===0) {
return false;
}
for(vari = 0, fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
};
remove = function(key,fn){
var fns =list[key];
if(!fns) {
return false;
}
if(!fn) {
fns && (fns.length =0);
}else {
for(vari = fns.length -1; i >= 0; i--){
var _fn =fns[i];
if(_fn ===fn) {
fns.splice(i,1);
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
// 测试代码如下：
Event.listen("color",function(size) {
console.log("尺码为:"+size);// 打印出尺码为42
});
Event.trigger("color",42);
-------------------------
ajax：

$.ajax(“http://127.0.0.1/index.php”,function(data){
Obj.trigger(‘success’,data);// 发布请求成功后的消息
});
// 下面我们来订阅此消息，比如我现在订阅渲染数据这个消息；
Obj.listen(“success”,function(data){
renderData(data);
});
// 订阅动画这个消息
Obj.listen(“success”,function(data){
doAnimate(data);
});


全局--发布订阅对象代码封装
阅读全文
0 0