1.什么是观察者模式
一个元素发生变化,这个元素的观察者执行一些事件。
2.例子
这里就把点击事件做成观察者模式,先注册事件在观察者的对象列表里,一旦触发事件,就回执行事件函数。
<body>
<div id="box">123123123</div>
<script>
(function () {
var observer = {};
//要监听的对象列表,例子
/*
* 'dom':document.getElementById('box'),
'type':'click',
'fn': function () {
console.log(1111222222221);
}
*
* */
observer.list = [];
//监听函数
observer.listen = function (obj) {
this.list.push(obj);
};
//发布监听
observer.publish = function () {
var that = this;
for(var i=0;i<this.list.length;i++)
{
this.list[i]['dom'].addEventListener(this.list[i]['type'],(function(i){
return function(){
that.list[i]['fn']();
}
})(i))
}
}
//监听一个点击事件
observer.listen({
'dom':document.getElementById('box'),
'type':'click',
'fn': function () {
console.log(1111222222221);
}
});
//发布
observer.publish();
}())
</script>
</body>