DOM2级观察者模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 400px;
margin: 0 auto;
border: 2px solid #ccc;
}
h1 {
height: 30px;
line-height: 30px;
font-size: 20px;
text-align: center;
}
ul {
height: 320px;
}
ul li {
list-style: none;
height: 20px;
font-size: 16px;
line-height: 20px;
display: flex;
}
ul li span {
flex: 9;
}
ul li i {
flex: 1;
text-align: center;
}
.box .operate {
height: 50px;
display: flex;
}
.box .operate textarea {
flex: 4;
}
.box .operate button {
flex: 1;
}
</style>
</head>
<body>
<div id="box" class="box">
<h1>XXX的留言板消息数量:(<span id="num">0</span>)</h1>
<ul id="list">
<!-- <li><span>人生得意须尽欢</span><i>×</i></li> -->
</ul>
<div class="operate">
<textarea id="message"></textarea>
<button id='btn'>留言</button>
</div>
</div>
<script>
</script>
<script>
var Observer = (function() {
var _O = {}
return {
on: function(name, fn) {
if (_O[name]) {
_O[name].push(fn)
} else {
_O[name] = [fn];
}
},
trigger: function(name, ...args) {
for (var i = 0; i < _O[name].length; i++) {
_O[name][i](...args)
}
}
}
})();
;
(function() {
var num = document.getElementById("num");
Observer.on("publish", function() {
num.innerHTML++;
});
Observer.on('remove', function() {
num.innerHTML--;
});
})();
;
(function() {
var list = document.getElementById("list");
Observer.on("publish", function(msg) {
list.innerHTML += `<li><span>${msg}</span><i>×</i></li>`;
});
list.onclick = function(e) {
if (e.target.tagName.toLowerCase() === "i") {
e.target.parentNode.remove();
Observer.trigger("remove");
}
}
})();
;
(function() {
var message = document.getElementById("message");
var btn = document.getElementById("btn");
btn.onclick = function() {
var value = message.value;
Observer.trigger("publish", value)
}
})();
</script>
</body>
</html>