最新文章
关注我
在线咨询
x
有什么可以帮到你
点击咨询
tmodJS——前端模板预编译技术，前端模板引擎 tmodjs模板语法，js 遍历接口数据
- 分类：WEB前端
- 时间：2018-03-22
- 共1103人围观
简介我们在使用tp中如果是Ajax异步加载页面，拼接HTML真的是很头疼的一件事情，如果学了这个以后，你还傻傻地拼接HTML字符串，那就落伍了。
虽然我们PHP框架自带各种模板引擎，如框架自带的或smarty，但是始终是后端模板引擎。例如我们在使用tp中如果是Ajax异步加载页面，拼接HTML真的是很头疼的一件事情，如果学了这个以后，你还傻傻地拼接HTML字符串，那就落伍了。
一、概念
TmodJS（原名 atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板，从而让前端模板实现工程化管理，最终保证前端模板在复杂单页 web 应用下的可维护性。同时预编译输出的代码经过多层优化，能够在最大程度节省客户端资源消耗。
二、语法
require(['编译后产生的js文件(不包含后缀名)'], function (template) {
document.getElementById('id').innerHTML = template('模板入口', data);
});
三、经典案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/setFontsize.js"></script>
<title>积分商城</title>
<style type="text/css">
body,html {
height: 100%;
}
body {
overflow: hidden;
}
.btn-mar {
margin: 0.92rem 0;
}
.content {
bottom: 50px;
}
</style>
</head>
<body>
<div class="page">
<div class="content">
<div class="banner"><img src="img/banner.png"/></div>
<ul class="change-wrap">
<li>
<a href="#">
<h2>300</h2>
<p>积分兑换区</p>
</a>
</li>
<li>
<a href="#">
<h2>500</h2>
<p>积分兑换区</p>
</a>
</li>
<li>
<a href="#">
<h2>800</h2>
<p>积分兑换区</p>
</a>
</li>
<li>
<a href="#">
<h2>1000</h2>
<p>积分兑换区</p>
</a>
</li>
</ul>
<h2 style="padding-left: 0.4rem; line-height: 0.9rem; background-color: #fff;" class="c-6">热门兑换</h2>
<ul class="list-style-2" id="list">
<script id='goods-list' type='text/html'>
<%each list as item%>
<li>
<a href="#">
<div class="img"><img src="<%item.img%>" alt=""></div>
<div class="text">
<p class="f-n over_1"><%item.title%></p>
<div class="bot">
<p class="fl"><%item.integral%> <span>积分</span></p>
<img class="fr addCart" src="img/add_cart.png" />
</div>
</div>
</a>
</li>
<%/each%>
</script>
</ul>
<section class="tc"><p class="scroll-bot">已经到底了</p></section>
</div>
<footer class="footer">
<a href="#" class="item active">
<div class="img"><img src="img/footer_c_1.png" /></div>
<!-- 未选中 -->
<!--<img src="img/footer_c_1.png" />-->
首页
</a>
<a href="#" class="item">
<div class="img"><img src="img/footer_n_2.png" /></div>
<!-- 未选中 -->
<!--<img src="img/footer_c_2.png" />-->
分类
</a>
<a href="#" class="item">
<div class="img"><img src="img/footer_n_3.png" /></div>
<!-- 未选中 -->
<!--<img src="img/footer_c_3.png" />-->
购物袋
</a>
<a href="#" class="item">
<div class="img"><img src="img/footer_n_4.png" /></div>
<!-- 未选中 -->
<!--<img src="img/footer_c_4.png" />-->
会员
</a>
</footer>
</div>
</body>
</html>
<script language="javascript" src="/js/require.js"></script>
<script language="javascript" src="/js/config.js"></script>
<script type="text/javascript">
require(['jquery','tpl','core'],function(jquery,tpl,core){
var url="http://web.whm.com/api.php";
core.json(url, {}, function (json) {
var result = json.result;
$('#list').html( tpl('goods-list', result) );
});
});
</script>
四、案例效果图
