设计网站初期，整体架构可以选择使用前台模板后台返回 json 格式数据的形式，前端使用 javascript 进行解析并且填充，这样做的好处非常明显，使用 json 格式的数据，前端页面与数据的粘度变小，可以方便更换页面样式，同时，这样做可以方便移植平台，比如说以后 WEB 端应用要改成客户端应用，则后台代码部分几乎不需要修改。
使用 json 格式的数据填充 HTML 的基本实现可以描述为：1、控制后台返回 json 格式数据；2、设置前端自定义匹配和替换规则；3、使用 javascript 对 json 数据解析并且填充页面。
控制后台返回 json 格式数据
这里以 thinkphp 5.x 版本的 PHP 框架为例，只需要将 return $this->fecth(); 换成 return json($data); 即可，其中变量 $data 为实际要返回的数据，这里需要注意的是，为了方便前台处理，建议对数据进行命名分类处理，例如如下代码：
如上程序获得的数据格式如下：
public function view2($start = 1, $length = 10) {
$say = new Say;
$list = $say - > limit($start, $length) - > select();
$count = $say - > count();
$data['data'] = $list;
$data['count'] = $count;
return json($data);
}{"data":[{"sayid":9,"sayname":"123","sayto":"345","saytime":"1970-01-01","sayip":null,"sayimg":null,"saycontent":"112344"}],"count":1}
设置前端自定义匹配和替换规则
要想将 json 数据填充入 HTML 中，就如种树一般，一个坑一棵树，而且规定大坑种大树，小坑种小树，所以，需要设置替换规则。可以选择使用特殊字符将替换的关键词括起来，方便 javascript 处理，比如使用两个 $ 符号括起来。
<html>
<head></head>
<body>
<div class="main">
<script type="text/template" id="tpl_main">
<div class="box">
<div class="sy_content">
<div class="toer">$to$</div>
<div class="mid">$content$</div>
<div class="sayer">$sayer$</div>
<div class="time">$time$</div>
</div>
</div>
</script>
</div>
</body>
</html>代码中，主要模板部分使用 script 标签套起来，且 type 标签设置为 “text/template”是为了与正常的 js 代码区分，其实只要能够方便 javascript 取到元素怎么做都可以，根据自己的需要决定。
填充数据
这里使用 jquery 库来处理。基本步骤是，请求到数据后，首先取 script 标签套的关键模板，然后循环 json 数据，并且将 json 中的数据逐条逐个填补模板中的“坑”，填充的方法是使用了 replace()，并且将循环的结果串起来，最后输出到页面上。
<html>
<head>
<script>
$(function() {
$.get('__ROOT__/getdate.php', function(data) {
var template = '';
template = $('.main script').html();
var newtpl = '';
var tpl = '';
$.each(data.data, function(index, val) {
tpl = template.replace(/\$to\$/g,val.sayto).replace(/\$content\$/g,val.saycontent).replace(/\$sayer\$/g,val.sayname).replace(/\$time\$/g,val.saytime);
newtpl = newtpl+tpl;
});
$('.main').html(newtpl);
});
});
</script>
</head>
<body></body>
</html>代码中 replace() 函数中第一个参数使用的正则匹配，以斜杠开始，以斜杠结束，中间的 $ 符号由于属于敏感字符，各在前面加上了反斜杠转义。
后续的开发，如果需要编写模板，只需要约定了替换关键词和符号，以及模板的位置id，就可以了。
以上代码参考 The__Flash 的相关教程，谨此表示感谢。
感谢你的赏识与认可
支付宝
微信支付
使用手机访问这篇文章
本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源
- 上一篇： 2018，元旦，河南，我们！
- 下一篇： YunOS手机系统删除搜索栏和桌面头条的方法
4 条评论
发布评论
鲁公网安备37021302001198
那时间会不会变长？= =万一被恶意请求啥的？
网速慢的效果就是先出来一个空的页面，然后出数据，毕竟模板跟数据两条路来的。被恶意请求的话，就算不是json返回也可能被恶意请求。
看了你上上篇博客 我又开始玩迷你世界了感觉有个终身的游戏挺好的
迷你世界跟我的世界是一个类型的游戏吧