一、DEMO背景
基于同一种数据结构基于不同的页面展示（对于不同的页面模板）或者同一区域展示不同数据结构的需求，欲实现页面表达复杂度和数据表达形式多样化的抽象设计，从而减少开发量和前端页面代码的臃肿度。该demo是基于Jquery和bootstrap库来实现特效、解析及加载等效果。
二、源码简介
1. 主页面代码如下,该页面是主体结构部分，包含页面展示代码和解析脚本（多模板多数据加载）
<!DOCTYPE html>@b@<html> @b@ <head>@b@ <meta charset="UTF-8" />@b@ <link href="http://www.xwood.net/test/c262646/bootstrap.min.css" rel="stylesheet">@b@ <link href="http://www.xwood.net/test/c262646/bootstrap-theme.min.css" rel="stylesheet">@b@ </head> @b@ <body> @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="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@ <button class="btn btn-default" type="button" onclick="loadTemplate();">加载</button>@b@ @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@ <!-- Bootstrap core JavaScript @b@================================================== -->@b@ <!-- Placed at the end of the document so the pages load faster -->@b@ <script src="http://www.xwood.net/js/jquery-1.6.2.min.js"></script>@b@ <script src="http://www.xwood.net/test/c262646/bootstrap.min.js"></script>@b@ <script src="http://www.xwood.net/test/c262646/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@</html>2. 数据展示以列表模式和网格模式两种方式说明，其最小单元结构由html页面模板构成，这边有Template01.html、Template02.html..模板单元，Template01.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. 数据结构主要通过加装不同js的json格式来返回，如 数据01 （单一数据）对应example01.json、数据02 （数组数据）对应example02.json、数据03 （混合数据）对应example03.json，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. 通过脚本的loadTemplate将数据模板合成在content的div层进行合成渲染
三、效果演示
��