下面的代码就是要实现的功能是 用户填写完评论 点击提交 按钮 留言就会增加到留言板尾部上 留言的数量也会加1
反之 删除一条评论 留言数量 减去 1
看了之前的上篇 就应该知道了 发布留言和删除留言功能是用户主动去触发的 所以是 观察者 发布消息 相当于上篇讲的卫星角色
评论的追加和用户消息的递减 都是被动处罚的 所以他们相当于中转站 是一个 订阅者身份 去注册消息
<div id="msg_num">0</div>
<ul id="msg">
</ul>
<textarea rows="" cols="" id="user_input">
</textarea>
<button id="user_submit">提交</button>
var Observer=(function(){
var __messages={}//储存消息的容器
return {
// 注册消息
regist:function(type,fn){
if(typeof __messages[type]=="undefined"){
__messages[type]=[fn];
}else{
__messages[type].push(fn);
}
return this; //返回当前对象 可以链式操作
},
// 发布消息
fire:function(type,args){
if(!__messages[type])
return;
var events={
type,
args:args||{}
},
i=0,
len=__messages[type].length;
for(;i<len;i++){
__messages[type][i].call(this,events);
}
},
//移除消息
remove:function(type){
if(__messages[type] instanceof Array){
var i=__messages[type].length-1;
}
for(;i>=0;i--){
__messages[type][i]==fn&&__messages[type].splice[i,1];
}
}
}
})();
// 测试 模型
Observer.regist('test',function(e){
console.log(e.type,e.args.msg);
})
Observer.fire('test',{msg:'传递参数'})
function $(id){
return document.getElementById(id);
}
// 工程师A
(function(){
function addMsgItem(e){
var text=e.args.text,
ul=$('msg'),
li=document.createElement('li'),
span=document.createElement('span');
li.innerHTML=text;
span.innerHTML='删除';//添加删除功能
span.οnclick=function(){
ul.removeChild(li);
Observer.fire('removeCommentMessage',{
num:-1
})
}
// 添加删除按钮
li.appendChild(span);
// 添加留言节点
ul.appendChild(li);
}
// 注册追加评论信息
Observer.regist('addCommentMessage',addMsgItem);
})();
//工程师B
(function(){
//更改用户数量
function changeMsgNum(e){
var num=e.args.num;
//增加用户消息数目 并写入页面中
$('msg_num').innerHTML=parseInt($('msg_num').innerHTML)+num;
}
// 注册添加评论信息
Observer
.regist('addCommentMessage',changeMsgNum)
.regist('removeCommentMessage',changeMsgNum);
})();
//最后工程师C
(function(){
//用户点击提交按钮
$('user_submit').οnclick=function(){
//获取用户输入框信息
var text=$('user_input');
if(text.value==='')
return;
//发布一条评论
Observer.fire('addCommentMessage',{
text:text.value,
num:1
});
text.value=''
}
})()
