本文通过一个简单的JavaScript示例，介绍了如何实现Observer模式。该模式允许一个主题对象管理多个观察者对象，当主题的状态发生变化时，所有注册的观察者都会收到通知并进行相应的更新。
在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);
}
);
}
};
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); } ); } }; 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>
扫一扫
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
