<!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設計模式與開發事件》，于是翻到相關章節進行學習。以...
- 這個模式看了很長時間，卡在什么地方呢？在我看來，其他的模式為了簡化編程的復雜性，都是鼓勵函數或者對象間解耦和的，但...
