javascript命令模式构建图片或标题

最新推荐文章于 2024-04-08 15:57:51 发布

cdcdhj

最新推荐文章于 2024-04-08 15:57:51 发布

阅读量139

点赞数

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

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

版权

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

144 篇文章 0 订阅

订阅专栏

该博客展示了如何使用JavaScript实现动态创建DOM元素，包括创建标题和产品展示。通过定义模板字符串并使用正则表达式进行字符串替换，将数据绑定到HTML结构中。示例中创建了一个标题和一组图片，每张图片附带描述文字，实现了数据驱动的页面内容更新。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="title"></div>
		<div id="img"></div>
		<script language="javascript">
		var viewCommand=(function(){
			var tpl={
				product:[
					'<div>',
					'<img src="{#src#}"/>',
					'<p>{#text#}</p>',
					'</div>'
				].join(''),
				title:[
					'<div class="title">',
					'<div class="main">',
					'<h2>{#title#}</h2>',
					'<p>{#tips#}</p>',
					'</div>',
					'</div>'
				].join('')
			};
			html='';
			function formateString(str,obj){
				return str.replace(/\{#(\w+)#\}/g,function(match,key){
					return obj[key];
				})
			}
			var Action={
				create:function(data,view){
					if(data.length){
						for(var i=0,len=data.length;i<len;i++){
							html+=formateString(tpl[view],data[i]);
						}
					}else{
						html+=formateString(tpl[view],data)
					}
				},
				display:function(container,data,view){
					if(data){
						this.create(data,view);
					}
					document.getElementById(container).innerHTML=html;
					html='';
				}
			}
			return function excute(msg){
				msg.param=Object.prototype.toString.call(msg.param)==="[object Array]"?msg.param:[msg.param];
				Action[msg.command].apply(Action,msg.param);//apply的第1个参数都是this指向对象，第二个参数为数组
			}
			
			
		})();
		var productData=[
			{
				src:'../img/1.jpg',
				text:'绽放的桃花'
			},
			{
				src:'../img/2.jpg',
				text:'阳光下的温馨'
			},
			{
				src:'../img/3.jpg',
				text:'绝色的植物'
			}
		];
		var titleData={
			title:'夏日里的一片温馨',
			tips:'给人家的感受'
		};
		var title=document.getElementById('title');//标题容器
		var img=document.getElementById('img');//图片容器
		//单独构建标题
		viewCommand({
			command:"create",
			param:[
				{
				title:'这是一个标题',
				tips:'这是一个副标题'
			},'title']	
		});
		//也可以成套构建多张图片
		viewCommand({
			command:"display",
			param:['img',
				productData,
				'product'
			]
		})
		</script>
	</body>
</html>