背景：之前写前后端不分离的项目，都是通过ThinkTemplate（thinkphp）和Thymeleaf、FreeMarker（Java）去实现的，但是有些数据需要动态去体现使用过ajax去手动操作dom通常有点麻烦，偶然间知道这个js模板还是蛮感兴趣，功能强大。
文章目录
前言
小弟之前愚蠢的想法就是ajax请求的话都是一个一个去添加，每一块内容先拼接好一整块，然后再循环输出。（这里指ajax请求的情况下，其他情况下不分离模板直接for很快的）
直到今天，遇到了handlebars.jshandlebars.js可以在提前设置好的模板内渲染出内容，功能强大下面演示
提示：以下是本篇文章正文内容，下面案例可供参考
一、Handlebars.js是什么？
Handlebars.js是一个Javascript客户端的模板引擎（它也能用于服务器端）。它是一个Javascript库，就像你在页面中包含其他.js文件一样。有了它，在你的HTML页面内添加模板，模板会被你通过Handlebars.js函数传递的数据中的值解析或者插值。
二、使用步骤（each-基本循环使用方法）
1.设置模板
代码如下：
html：
<body><script id="template" type="text/x-handlebars-template"><ul>{{#each items}}<li>{{this.name}} - {{this.value}}</li>{{/each}}</ul></script><div id="result"></div><a href="javascript:;" onclick="ceshi()">测试</a><a href="javascript:;" onclick="xuanran()">渲染</a></body>
template就是我们设置好的模板，相当于你设置好了一个商品展示卡（我上面的图）
2.Ajax获取数据
代码如下：
Javascript：
<script>function ceshi(){$.ajax({type: "GET",url: "",success: function(e) {console.log(e)},error: function() {console.log('失败')}})};function xuanran(){$.ajax({url: '',method: 'GET',success: function(data) {var source = $('#template').html();var template = Handlebars.compile(source);var html = template({ items: data.data });console.log(html);$('#result').html(html);}});};</script>
这里是利用Ajax去请求后端获取数据。
这里可以看出，数据是从这边传进去的：
template({ items: data.data });
3.后端提供数据
public function test(){$a = [['name' => '名字','value' => '小明'],['name' => '年龄','value' => '18'],['name' => '性别','value' => '男'],['name' => '身高','value' => '181'],['name' => '体重','value' => '70kg'],];if(false === $this->request->isAjax()){return view();}return api($a,200,'请求成功');}
这里是测试数据故意弄成这样子
这种数据格式也是经常见吧，不像常规的很好认的那种
效果
点击获取数据后就会渲染。
分析
你得到数据之后，他是这样的
//这个jsvar html = template({ items: data.data });//说明你已经拿到这样的数据了"data": [{"name": "名字","value": "小明"},{"name": "年龄","value": "18"},{"name": "性别","value": "男"},{"name": "身高","value": "181"},{"name": "体重","value": "70kg"}]//然后这边#each表示进入{{#each items}}//说明到达每一块{"name": "名字","value": "小明"}//这里你就只能用{{this.name}} - {{this.value}}//这种模板还是很可以
三、进阶
这样我们就可以做更复杂的操作了
each-基本循环使用方法
前端：
<body><h1>each-基本循环使用方法</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody id="tableList"></tbody></table><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each student}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td></tr>{{/each}}</script></body>
<!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function () {$.ajax({url:'student',method:'GET',success:function(data){var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data.data));}});});</script>
后端：
public function test1(){if(false === $this->request->isAjax()){return view();}}public function student(){$student = [['name' => "张三",'sex' => "男",'age' => 28],['name' => "李四",'sex' => "女",'age' => 30],['name' => "妞妞",'sex' => "女",'age' => 32]];return api(['student'=>$student],200,'请求成功');}
应该很好分析这个是干嘛的
with-进入到某个属性(进入到某个上下文环境)
分析：
首先来构造一个复杂的json（工作中经常遇到的，给前端小姐姐上点压力）
先给大家看看前端的页面加载出来是没有数据的
等到数据出来时，他才开始渲染出来：（其实这一直是我想要的，用vue或者其他也能达到这种效果，但是还是喜欢有些杂糅在一起的）
代码如下：
前端：
<body><h1>with-进入到某个属性(进入到某个上下文环境)</h1><!--基础html框架--><table><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>兴趣爱好</th></tr></thead><tbody id="tableList"></tbody></table><!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句--><!--id可以用来唯一确定一个模版,type是模版固定的写法--><script id="table-template" type="text/x-handlebars-template">{{#each this}}<tr><td>{{name}}</td><td>{{sex}}</td><td>{{age}}</td><td>{{#with favorite}}{{#each this}}<p>{{name}}</p>{{/each}}{{/with}}</td></tr>{{/each}}</script></body>
<!--进行数据处理、html构造--><script type="text/javascript">$(document).ready(function() {$.ajax({url:'test2api',method:'GET',success:function(data){//$("#table-template").html()是jquery的语法。。。var myTemplate = Handlebars.compile($("#table-template").html());//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。$('#tableList').html(myTemplate(data.data.student));}});});</script>
后端：
public function test2(){if(false === $this->request->isAjax()){return view();}}public function test2api(){$student = [['name' => "张三丰",'sex' => "男",'age' => 28,'favorite' =>[['name' => "唱歌"],['name' => "篮球"]]],['name' => "李妮妮",'sex' => "女",'age' => 30,'favorite' =>[['name' => "上网"],['name' => "足球"]]],['name' => "王妞妞",'sex' => "女",'age' => 18,'favorite' =>[['name' => "电影"],['name' => "旅游"]]]];return api(['student'=>$student],200,'请求成功');}
这个老哥写的好，可以参考他的，我也是参考他的：JavaScript页面模版引擎handlebars.js学习及使用_handlebars.js for-CSDN博客
对了我这tp8写的返回json的函数是这个：
function api($data, $code = 200, $msg = 'Success'){$result = ['code' => $code,'message' => $msg,'data' => $data,];return json($result);}
放在公共函数那边
总结
Ajax渲染页面的很早就想用找不到方便的，奈何本身就懒得写dom（我很菜），找到这个可以做很多事。
有的时候咱页面又不想被扒下来，就可以用这种方式
1.在Ajax请求的时候加个加个参数：域名还是其他加密起来，传过去参数（域名）不对，就得不到数据了，跨域也给它开上。
var domain = document.domain;$.ajax({url: '/xxxxx?domain='+domain,method: 'GET',success: function(data) {var source = $('#template').html();var template = Handlebars.compile(source);var html = template({ items: data.data });console.log(html);$('#result').html(html);}});
2.把F12禁用掉，不要让他看到咱返回的数据结构。
标签：
前端
本文转载自: https://blog.csdn.net/m0_55735473/article/details/142489690
版权归原作者 小于晏 所有， 如有侵权，请联系我们删除。
版权归原作者 小于晏 所有， 如有侵权，请联系我们删除。