最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
tmodJS——前端模板预编译技术,前端模板引擎 tmodjs模板语法,js 遍历接口数据
- 分类:WEB前端
- 时间:2018-03-22
- 共2397人围观
简介我们在使用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>