HTML 模板引擎之Handlebars.js

最新推荐文章于 2024-03-25 09:34:52 发布

GarenWang

最新推荐文章于 2024-03-25 09:34:52 发布

阅读量529

点赞数

分类专栏：前端 JavaScript 文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/weixin_37695006/article/details/88426189

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

模板原理

模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码

ZWPF0M5W_CR_NEUY6H46__W

介绍

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

使用与安装

1. 下载Handlebars

通过Handlebars官网下载: http://handlebarsjs.com./installation.html
通过npm下载: npm install --save handlebars
通过bower下载: bower install --save handlebars
通过Github下载: https://github.com/daaain/Handlebars.git
通过CDN引入:https://cdnjs.com/libraries/handlebars.js

2. 引入Handlebars

通过<script>标签引入即可,和引入jQuery库类似:

<script src="./js/handlebars-1.0.0.beta.6.js"></script>

3. 创建模板

步骤一: 通过一个<script>将需要的模板包裹起来
步骤二: 在<script>标签中填入type和id
- type类型可以是除text/javascript以外的任何MIME类型,但推荐使用type="text/template",更加语义化
- id是在后面进行编译的时候所使用,让其编译的代码找到该模板.
步骤三: 在<script>标签中插入我们需要的html代码,根据后台给我们的接口文档,修改其需要动态获取的内容

<script type="text/template" id="myTemplate">
    <div class="demo">
        <h1>{{name}}</h1>
        <p>{{content}}</p>
    </div>
</script>

4. 在JS代码中编译模板

//用jQuery获取模板
var tpl   =  $("#myTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//匹配json内容
var html = template(data);
//输入模板
$('#box').html(html);

以上述代码为例进行解释:

步骤一: 获取模板的内容放入到tpl中,这里$("#myTemplate")中填入的内容为你在上一步创建模板中所用的id.
- 提醒: 这里我使用的jQuery的选择器获取,当然,你可以使用原生javascript的DOM选择器获取,例如:docuemnt.getElementById('myTemplate')和document.querySelector('#myTemplate')
步骤二: 使用Handlebars.compile()方法进行预编译,该方法传入的参数即为获取到的模板
步骤三: 使用template()方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板.
步骤四: 将编译好的字符串插入到你所希望插入到的html文档中的位置,这里使用的是jQuery给我们提供的html()方法.同样,你也可以使用原生的innerHTML

案例演示

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.js"></script>
</head>

<body>
	<div id="box"></div>
</body>
<script type="text/template" id="myTemplate">
	{{#each result}} 
	<div class="demo">
		<h1>{{name}}</h1>
		<p>{{content}}</p>
	</div>
	{{/each}}
</script>
<script>
	//用jQuery获取模板
	var tpl = $("#myTemplate").html();
	//预编译模板
	var template = Handlebars.compile(tpl);
	//匹配json内容
	var data = {
		result: [
			{
				name: "wanggang",
				content: "XXXXXXX"
			},
			{
				name: "wanggang",
				content: "XXXXXXX"
			},
			{
				name: "wanggang",
				content: "XXXXXXX"
			}
		]
	}
	var html = template(data);
	//输入模板
	$('#box').html(html);
</script>

</html>

参考文献：

https://www.jianshu.com/p/2ad73da601fc

http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

https://www.cnblogs.com/dojo-lzz/p/5518474.html

GarenWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 模板引擎之Handlebars.js

模板原理模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码介绍Handlebars是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板...
复制链接

扫一扫

专栏目录