<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<script>
// 代码的封装
var event = {
list: [],
listen: function(key, fn) {
if (!this.list[key]) {
this.list[key] = []
}
this.list[key].push(fn)
},
trigger: function() {
var key = [].shift.call(arguments)
var fns = this.list[key]
if (!fns || fns.length === 0) {
return false
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
},
remove: function(key, fn) {
var fns = this.list[key]
if (!fns) {
return false
}
if (!fn) {
fns.length = 0
} else {
for (var i = fns.length - 1; i >= 0; i--) {
var _fn = fns[i]
if (_fn === fn) {
fns.splice(i, 1)
}
}
}
},
}
// 定义一个inieEvent的函数 使得所有的对象 都有发布功能
var initEvent = function(obj) {
for (var i in event) {
obj[i] = event[i]
}
}
// 进行测试
var shopObj = {}
initEvent(shopObj)
// 小红订阅以下消息
shopObj.listen('red', fn1 = function(color, size) {
console.log('小红你要得颜色是' + color)
console.log('小红你要得尺码是' + size)
})
// 小花订阅以下消息
shopObj.listen('flower',fn2 = function(color, size) {
console.log('小花你要得颜色是' + color)
console.log('小花你要得尺码是' + size)
})
shopObj.remove('red',fn1);
shopObj.trigger('red', 'red', 40)
shopObj.trigger('flower', 'black', 43)
</script>
javascript的发布-订阅者模式
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 最近的学习中遇到了观察者模式，刚好之前买了《Javascript设计模式与开发事件》，于是翻到相关章节进行学习。以...
- 这个模式看了很长时间，卡在什么地方呢？在我看来，其他的模式为了简化编程的复杂性，都是鼓励函数或者对象间解耦和的，但...
