js模板引擎入门（附有项目实例）

最新推荐文章于 2025-05-18 22:31:02 发布

原创最新推荐文章于 2025-05-18 22:31:02 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

js 插件同时被 2 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了模板引擎在前端开发中的重要性，特别是在处理大量数据时的效率提升，并以Handlebars为例详细介绍了其在项目中的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，谈谈我自己对模板引擎的理解。

存在既是道理，模板引擎的诞生应该也有其原因与发展过程，模板引擎产生的大背景应该有两个主力因素。

一，数据：“信息经济”、“大数据“ 时代的带来，数据越来越多，数据总的来说都是存储在一张张表中的（数据库存储信息的方式），也可以说是一条条记录，每个记录又是一个个的键值对组成，在数据之上的业务逻辑处理则是对数据的商业与业务应用，而前端则是商业与业务实现的入口，是呈现在用户面前的第一感官刺激，是与用户进行交互并进行数据采集、存储、显示的端口。这就存在这样的一个情况，当在页面上展示信息的时候，会从数据库中抽取出匹配的记录，再对返回的数据进行处理，最终拼装成一个个html片段再交由”端“环境进行处理、展示，这个过程中就会存在不断重复的操作，比如，页面上要显示一个班级的人的基本信息，每个人的基本信息对数据库来说都是一条记录，这条记录主要属性是学生的学号、性别、电话、联系方式。一次性从数据库中取出所有的记录（假设有50个学生），返回到”端“的数据就有50条记录，前端在进行数据处理的时候就要循环五十次，拼接出50个html碎片，再进行组装、渲染、显示等但是其实每个html片段需要的信息是相同的属性（学号、性别、电话、联系方式），这时我们就会考虑有没有这么一个东西，在特定格式的html文档中，我把业务相关的数据给它，它自己就可以在数据显示在特定的区域中去，js模板就是在这样的背景产生并不断应用、壮大。

二，用户体验与性能优化：一般的web开发要使用和后台开发程序配合的模板引擎，但随着用户体验的更高追求，页面无刷新或部分刷新的ajax被广泛应用后，js发送ajax请求回来的数据格越来越多，这些数据返回后一般都使用简洁的json格式，节约流量和提高效率，但json并不能直接在页面展示，而要通过js再转换拼装成html代码，将json这类的数据转换成html代码输出的这个过程要怎么优化呢？这就和第一条中后面所问的一样了。

我自己在项目中应用的js模板引擎是handlebars，基于此，js模板引擎应用大概有如下过程：

1，引入模板引擎，这和引入外部js文件一样

2，创建模板

3，编辑模板

4，封装要处理的数据

附上自己做的一个功能页面的代码作为参考：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content=""/>
    <link rel="stylesheet" href="css/commom.css" />
    <link rel="stylesheet" href="css/sharepage.css" />
    <title>每人计主页分享</title>    
</head>
<body>
	<script type="text/javascript" src="js/jquery.js"></script>	
	<script type="text/javascript" src="js/handlebars.js"></script>
	<script id="shareConten" type="text/x-handlebars-template">
	<header>
		<div class="default_nav">		    
			<a href="#" class="logo"></a>
	    	<span>
	    	 每人计
	    	<br />客流统计神器，旺店必备
	    	</span>
	    	<a  class="down_app_btn" href="{{downloadurl}}" target="">免费下载</a>		    
    	</div>   
	</header>
	<div class="main">
		<div class="share_persion">
			<img src="{{#with imageList}}{{persionLogo}}{{/with}}" class="persionLogo">
			<div class="persion_dec">				
				<span class="persion_dec_title">
					{{#with titleList}}
						{{persionName}}
					{{/with}}
				</span>
				<br />
				<span class="persion_dec_shop">
					{{#with titleList}}
						{{shopName}}
					{{/with}}
				</span>
			</div>
			
		</div>
		<div class="share_origin">			
			<span class="origin_company">来自<b>每人计</b></span>
			<span class="origin_date">
				{{shareDate}}
			</span>
		</div>
		<hr />
		<div class="share_content">			
			<span class="share_dec">
					{{#with titleList}}
						{{shareDes}}
					{{/with}}
			</span>
			<img src="{{#with imageList}}{{shareImage}}{{/with}}" class="share_pic"/>
		</div>
		
	</div>
	</script>
	<script type="text/javascript">
		var myTemplate = Handlebars.compile($("#shareConten").html());
		var data = {			
			titleList:{persionName:"1234567",shopName:"8888888",shareDes:"123"},
			imageList:{shareImage:"img/sharepage.jpg",persionLogo:"img/mypoto.png"},
			shareDate:"2014-4-05",
			downloadurl:"http://www.baidu.com"
		}		
	
		$("body").html(myTemplate(data));
	</script>
</body>
</html>