首页

通过定义js公共函数实现HTML多模板加载多数据JSON格式场景,从而实现数据DATA和视图VIEW解耦,达到前后端开发分离

标签:mvc,解耦,模板,getScript,bootstrap,javascript,selectedTemplate,web,前后端分离     发布时间:2017-11-22   

一、前言

通过定义前端loadTemplate公共函数,实现对分别的数据格式及展示模板类型的配置化适配兼容,本例代码主要实现了数据的加载getJSON,再通过String.replace替换的方式,将定义的目标格式替换,如下图所示为操作样例。

二、代码说明

1.测试入口HTML页面 代码如下 

<!DOCTYPE html>@b@<html>@b@@b@	<head>@b@		<meta charset="UTF-8" />@b@		<link href="bootstrap.min.css" rel="stylesheet">@b@		<link href="bootstrap-theme.min.css" rel="stylesheet">@b@	</head>@b@@b@	<body>@b@@b@		<br/>@b@		<br/>@b@		<label class="radio-inline">@b@			<input type="radio" name="template" id="template01" value="Template01" checked="checked"> 模板01 (列表模式)@b@		</label>@b@		<label class="radio-inline">@b@			<input type="radio" name="template" id="template02" value="Template02"> 模板02 (网格模式)@b@		</label>@b@		<!--<label class="radio-inline">@b@			<input type="radio" name="template" id="template03" value="Template03"> 模板03 (表格模式)@b@		</label>-->@b@@b@		<br/>@b@		<br/>@b@		<label class="radio-inline">@b@			<input type="radio" name="data" id="data01" value="example01" checked="checked"> 数据01 (单一数据)@b@		</label>@b@		<label class="radio-inline">@b@			<input type="radio" name="data" id="data02" value="example02"> 数据02 (数组数据)@b@		</label>@b@		<label class="radio-inline">@b@			<input type="radio" name="data" id="data03" value="example03"> 数据03 (混合数据)@b@		</label>@b@		@b@		<br/>@b@		<br/>@b@		<button class="btn btn-default" type="button" onclick="loadTemplate();">加载</button>@b@@b@		<br/>@b@		<br/>@b@		<div id="canvas" style="width:850px; height:800px; border: solid 1px #959595; padding: 10px; margin: 10px;"></div>@b@@b@		<div id="content" style="display: none;"></div>@b@@b@	 @b@		<!-- Placed at the end of the document so the pages load faster -->@b@		<script src="jquery.min.js"></script>@b@		<script src="bootstrap.min.js"></script>@b@		<script src="holder.js"></script>@b@		<script>@b@			function loadTemplate(){@b@				var selectedTemplate = $("input[name=template]:radio:checked").val();@b@				var selectedData = $("input[name=data]:radio:checked").val();@b@				$.ajaxSetup({async:false});@b@@b@				//加载HTML模板文件@b@				$('#canvas').load(selectedTemplate + '.html #t_frame');@b@				$('#content').load(selectedTemplate + '.html [name=t_content]');@b@				@b@				//加载相关json数据@b@				$.getJSON(selectedData + ".json", function(data,s,x){@b@					for (var i = 0; i < data["items"].length; i++) {@b@						var content = $("#content").html();@b@						$('#t_frame').append( @b@							content.replace(/{{name}}/g,data["items"][i].name)@b@							.replace(/{{value}}/g,data["items"][i].value)@b@						);@b@					}@b@				});@b@@b@				//加载与html模板相对应的js文件。@b@				$.getScript(selectedTemplate + '.js');@b@				@b@			}@b@		</script>@b@	</body>@b@@b@</html>

2.加载HTML模板文件

<div id="t_frame" class="list-group">@b@</div>@b@<a name="t_content" class="list-group-item" href="#">@b@  <h4 class="list-group-item-heading">{{name}}</h4>@b@  <p class="list-group-item-text">{{value}}</p>@b@</a>

3.获取数据example01.json

{@b@	"items": [@b@		{@b@			"name": "解放J6",@b@			"value": "报价"@b@		}, {@b@			"name": "福田汽车",@b@			"value": "报价"@b@		}, {@b@			"name": "联合卡车",@b@			"value": "报价"@b@		}, {@b@			"name": "大运N8重卡",@b@			"value": "报价"@b@		}@b@	]@b@}

4.目标Templet01模板,具体如下

(function(){@b@@b@  $("#t_frame a:first").addClass('active');	@b@@b@})();

5.效果预览如下

三、相关下载

云盘下载,本地下载

<<热门下载>>