背景：之前写前后端不分离的项目，都是通过ThinkTemplate（thinkphp）和Thymeleaf、FreeMarker（Java）去实现的，但是有些数据需要动态去体现使用过ajax去手动操作dom通常有点麻烦，偶然间知道这个js模板还是蛮感兴趣，功能强大。
文章目录
前言
小弟之前愚蠢的想法就是ajax请求的话都是一个一个去添加，每一块内容先拼接好一整块，然后再循环输出。（这里指ajax请求的情况下，其他情况下不分离模板直接for很快的）
直到今天，遇到了handlebars.js
handlebars.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,'请求成功');
}
这里是测试数据故意弄成这样子
这种数据格式也是经常见吧，不像常规的很好认的那种
效果
点击获取数据后就会渲染。
分析
你得到数据之后，他是这样的
//这个js
var 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
版权归原作者 小于晏 所有， 如有侵权，请联系我们删除。
版权归原作者 小于晏 所有， 如有侵权，请联系我们删除。