laytpl : 一款很是輕量的JavaScript模板引擎

時間 2019-11-16

標籤 laytpl 一款很是輕量 javascript 模板引擎欄目 JavaScript 简体版

原文原文鏈接

//假設你獲得了這麼一段數據
var data = {
  title: '前端圈',
  intro: '一羣碼js的騷年，幻想改變世界，卻被世界改變。',
  list: [{name: '賢心', city: '杭州'},  {name: '謝亮', city: '北京'}, {name: '淺淺', city: '杭州'}, {name: 'Dem', city: '北京'}]
};

var tpl = document.getElementById('tpl').innerHTML; //讀取模版
//方式一：異步渲染（推薦）
laytpl(tpl).render(data, function(render){
  document.getElementById('view').innerHTML = render;
});

//方式二：同步渲染：
var render = laytpl(tpl).render(data);
document.getElementById('view').innerHTML = render;

模板就可寫成以下：javascript

<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>{{ d.list[i].name }}</span>
    <span>所在城市：{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>

完整實例：css

//第一步：編寫模版。你可使用一個script標籤存放模板，如：
<script id="demo" type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>姓名：{{ d.list[i].name }}</span>
    <span>城市：{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>
</script>

//第二步：創建視圖。用於呈現渲染結果。
<div id="view"></div>

//第三步：渲染模版
var data = {
  title: '前端攻城師',
  list: [{name: '賢心', city: '杭州'}, {name: '謝亮', city: '北京'}, {name: '淺淺', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
  document.getElementById('view').innerHTML = html;
});

我實際作的一個實現頁面：html

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="" name="keywords">
<meta content="" name="description">
<!-- 全局-css -->
<link type="text/css" rel="stylesheet" href="../tools/css/basecore.css"/>
<link type="text/css" rel="stylesheet" href="../tools/css/style.css"/>
<!-- 全局-js -->
<script type='text/javascript' src='../tools/js/common.js'></script>
<script type="text/html" id="_template"> {{# for(var i = 0, len = d.length; i < len; i++){ }} <li>
    <p class="item-time">{{d[i].addDate}}</p>
    <div class="item-title-row">
          <div class="item-title">{{d[i].noticeTitle}}</div>
          <div class="item-after"><a href="javascript:goToDetail('{{d[i].id}}')">進入詳情<i class="icon icon-right"></i></a></div>
    </div>
    <div class="item-content">
        <div class="item-media list-img"><p><img class="imgthanh" data-original="../../{{d[i].noticePic}}"/></p></div>
        <div class="item-inner">
              <div class="item-title-row moredo3"> {{d[i].noticeContent}} </div>
        </div>
    </div>
    </li>
{{# } }} </script>
<title>重要通知列表</title>
</head>
<body class="bjF8F6F0">
<div class="page-group">
   <div class="page">
    
    <div class="content" id="contentscroll"> 
    <header>
       <div class="top-bar-con">
         <div class="tc top-bar-txt">重要信息</div> 
       </div>
    </header>
    <!-- header_start-->
    
    <!-- header_end   -->
    <!-- center_start -->
    
    <ul class="list-block media-list notice-list" id="noticeList">
    
    </ul>
    <!-- 沒有數據時 -->
    <div class="list_empty" id="emptyDiv" style="display:none;text-align:center">
        <p class="logoimg"><img class="wht4" src="../tools/images/dlogo1.png"/></p>
        <p class="emptycont"><span><font class="tmptytitle">暫無通知消息哦！</font><br></span></p>
    </div>
    <!-- center_end -->
    <div class="list_loading" id="loadAnimate">
         <span class="glyphicon"></span>
    </div> 
    </div>
  </div>    
</div>
<!-- 請在這底下寫js -->
<!-- 全局-js -->
<script type='text/javascript' merge="true" src='../tools/js/core.js'></script>
<script type="text/javascript"> 
var basePath = getRelativeRootPath();
var pNo = 1;
var pSize = 5;
var loadFlag = true;
var allList = new Array();
$(function(){
    initNotice();
    gotoBot();
});

function initNotice(){
    $.encasedAjax(basePath + '/rest/mall/queryNoticeList/'+pNo+'/'+pSize, {},function (data) {
　　　　if(data.noticeList !=null && data.noticeList.length>0){
　　　　　　  var tpl = document.getElementById('_template').innerHTML; //讀取模版
            //方式一：異步渲染（推薦）
 laytpl(tpl).render(data.noticeList, function(render){
　　　　　　　　　$("#noticeList").append(render);　 });//圖片延遲加載
            imgoriginal();
            if(data.noticeList.length == pSize){
                loadFlag = true;
                loadAnimate.innerHTML = '<span>上拉加載更多</span>';
            }else{
                loadFlag = false;
                loadAnimate.innerHTML = '<span>沒有更多了</span>';
            }
        }else{
            loadFlag = false;
            if(pNo==1){
                $("#emptyDiv").show();
                $("#noticeList").html("");
                loadAnimate.innerHTML = '<span></span>';
                return;
            }
            loadAnimate.innerHTML = '<span>沒有更多了</span>';
        }
        
    },{"async":true})
    
}

//分頁
function gotoBot(){
    $("#contentscroll").on("scroll", function() {
        var windowHeight = document.getElementById('contentscroll').clientHeight;
        var scrollHeight = document.getElementById('contentscroll').scrollHeight;
        var scrollTop = document.getElementById('contentscroll').scrollTop + document.body.scrollTop;
        if(scrollTop >= (scrollHeight - windowHeight - 100) && loadFlag) {
            pNo++;
            loadFlag = false;
            loadAnimate.innerHTML = '<span class="glyphicon">正在加載中...</span>';
            initNotice(pNo);            
        }
    });
}

function goToDetail(id){
    location.href="articleDetails.html?id="+id;
    
}
</script>   
</body> 
</html>