javascript观察者模式写评论，添加评论，删除评论及显示评论条数

最新推荐文章于 2023-02-19 21:11:11 发布

cdcdhj

最新推荐文章于 2023-02-19 21:11:11 发布

阅读量221

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/119846963

版权

javascript学习日记专栏收录该内容

139 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div >
			<ul><li>信息<span id="msg_num"></span>条</li></ul>
			<ul id="msg"></ul>
		</div>
		<textarea rows='10' cols="40" id="user_input"></textarea> 
		<input type="submit" id="user_submit" name="user_submit" value="提交">
		<script language="javascript">
		var Observer=(function(){
			var _message={};
			return {
				regist:function(type,fn){
					if(typeof _message[type]==='undefined'){
						_message[type]=[fn];
					}else{
						_message[type].push(fn);
					}
				},
				fire:function(type,args){
					if(!_message[type])
					return;
					var events={
						type:type,
						args:args||{}
					},i=0,len=_message[type].length;
					for(;i<len;i++){
						_message[type][i].call(this,events);
					}
				},
				remove:function(type,fn){
					if(_message[type] instanceof Array){
						var i=_message[type].length-1;
						for(;i>=0;i--){
							_message[type][i]===fn && _message[type].splice(i,1);
						}
					}
				}
			}
		})();
		function $(id){
			return document.getElementById(id);
		}
		(function(){
			function addMsgItem(e){
				var text=e.args.text,
				ul=$('msg'),
				li=document.createElement('li'),
				span=document.createElement('span');
				li.innerHTML=text;
				span.innerHTML='<input type="button" value="删除">';
				span.onclick=function(){
					ul.removeChild(li);
					Observer.fire('removeCommentMessage',{
						num:-1
					});
				};
				li.appendChild(span);
				ul.appendChild(li);
			}
			Observer.regist('addCommentMessage',addMsgItem);
		})();
		(function(){
			$('msg_num').innerHTML=0;//这里要先设置初始值，显示才会正常
			function changeMsgNum(e){
				var num=parseInt(e.args.num);
				$('msg_num').innerHTML=parseInt($('msg_num').innerHTML)+num;
			}
			Observer.regist('addCommentMessage',changeMsgNum);
			Observer.regist('removeCommentMessage',changeMsgNum);
		})();
		(function(){
			$('user_submit').onclick=function(){
				var text=$('user_input');
				if(text.value===''){
					return;
				}
				Observer.fire('addCommentMessage',{
					text:text.value,
					num:1
				});
				text.value='';
			};
		})();
		</script>
	</body>
</html>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript观察者模式写评论，添加评论，删除评论及显示评论条数

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div > <ul><li>信息<span id="msg_num"></span>条</li></ul> <ul id="m
复制链接

扫一扫

专栏目录