使用js实现observer模式
2007-01-19 10:52
363 查看
在yui中，大量使用customEvent。
何为customEvent，实际就是一个观察者observer。
下面给出这个observer的实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>实现Observer模式.</title>
<script language=JavaScript>...
function Observer() ...{
this.fns = [];
}
Observer.prototype = ...{
subscribe : function(fn) ...{
this.fns.push(fn);
},
unsubscribe : function(fn) ...{
this.fns = this.fns.filter(
function(el) ...{
if ( el !== fn ) ...{
return el;
}
}
);
},
fire : function(o, thisObj) ...{
var scope = thisObj || window;
this.fns.forEach(
function(el) ...{
//相当于：window.fn1(参数) 其中，参数是o.fire('xyz')中的xyz，转移成fn1和fn2执行了.
el.call(scope, o);
}
);
}
};
d017
var o = new Observer;
var fn1 = function(p) ...{
alert("fn1 " + p);
};
var fn2 = function(p) ...{
alert("fn2 " + p);
};
o.subscribe(fn1);
o.subscribe(fn2);
o.fire('xyz');
</script>
</head>
<body>
</body>
</html>
何为customEvent，实际就是一个观察者observer。
下面给出这个observer的实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>实现Observer模式.</title>
<script language=JavaScript>...
function Observer() ...{
this.fns = [];
}
Observer.prototype = ...{
subscribe : function(fn) ...{
this.fns.push(fn);
},
unsubscribe : function(fn) ...{
this.fns = this.fns.filter(
function(el) ...{
if ( el !== fn ) ...{
return el;
}
}
);
},
fire : function(o, thisObj) ...{
var scope = thisObj || window;
this.fns.forEach(
function(el) ...{
//相当于：window.fn1(参数) 其中，参数是o.fire('xyz')中的xyz，转移成fn1和fn2执行了.
el.call(scope, o);
}
);
}
};
d017
var o = new Observer;
var fn1 = function(p) ...{
alert("fn1 " + p);
};
var fn2 = function(p) ...{
alert("fn2 " + p);
};
o.subscribe(fn1);
o.subscribe(fn2);
o.fire('xyz');
</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 不使用委托实现Observer模式
- C#中使用委托和事件实现观察者模式(observer pattern)
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现？ asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
- .Net中使用事件和委托实现Observer模式（一）
- 使用委托和事件实现观察者模式(Observer Pattern)
- 观察者模式(Observer Pattern)（三）：使用java内置的支持实现HeadFirst气象站
- .Net中使用事件和委托实现Observer模式（二）
- 在C++中使用事件回调机制（通过Observer模式、函数指针等实现）
- Node.js中使用事件发射器模式实现事件绑定详解
- Node.js中使用事件发射器模式实现事件绑定详解
- android webView使用js/css实现夜间模式 长按识别图片以及二维码,网页可以上传图片
- 在立即执行函数内组合使用构造函数模式和原型模式创建对象，实现模块化开发（以daterangepicker.js为例）
- 使用java类库中的Observable类和Observer接口实现观察者模式（精简版）
- 使用委托和事件实现观察者模式(Observer Pattern)
- Java 语言使用 Observer/Observable 实现简单的观察者模式
- 使用观察者模式Observer实现对Android网络状态的监听
- Java 语言使用 Observer/Observable 实现简单的观察者模式
- Android使用观察者模式Observer实现网络状态监听
- C#中使用委托和事件实现观察者模式(observer pattern)
- Rx_java（2） 使用java中的类（Observable与Observer）实现观察者模式