文章分类

最新文章

关注我

    我的微信

友情链接

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

tmodJS——前端模板预编译技术，前端模板引擎 tmodjs模板语法，js 遍历接口数据

简介我们在使用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>


四、案例效果图


tmodJS——前端模板预编译技术，前端模板引擎 tmodjs模板语法，js 遍历接口数据



五、完整代码下载


上一篇：js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照

下一篇：jQuery 点点滴滴小记