template js javascript模板引擎

最新推荐文章于 2020-09-15 17:15:34 发布

十一路客

最新推荐文章于 2020-09-15 17:15:34 发布

阅读量959

点赞数

分类专栏： template javascript 文章标签： javascript template

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

template

1 篇文章 0 订阅

订阅专栏

注意到有两种template

一. 第一种template js：

参考文章：
http://blog.csdn.net/wu6660563/article/details/51780516
https://github.com/yanhaijing/template.js/blob/master/doc/api.md

示例：

源码学习

默认的开始标签和结束标签分别是：

sTag: '<%',//开始标签，可以重写，我项目中使用的是<:
eTag: '%>',//结束标签，我项目中使用的是:>

编写模板

使用一个type=”text/html”的script标签存放模板，或者放到字符串中：

<script id="tpl" type="text/html">
<ul>
    <%for(var i = 0; i < list.length; i++) {%>
    <li><%:=list[i].name%></li>
    <%}%>
</ul>
</script>

渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

输出：

<ul>
    <li>yan</li>
    <li>haijing</li>
</ul>

转义

<script id="tpl" type="text/html">
    <table>
        <caption>for循环输出两次</caption>
        <%var test = '输出自定义变量';%>
        <%for (var i = 0; i < 2; i++) {%>
            <tr><td>&lt;%=html%&gt;默认</td><td><%=html%></td></tr>
            <tr><td>&lt;%:h=html&gt;html转义</td><td><%:h=html%></td></tr>
            <tr><td>&lt;%:=html&gt;不转义</td><td><%:=html%></td></tr>
            <tr><td>&lt;%:u=url&gt;URI转义</td><td><%:u=url%></td></tr>
            <tr><td>var</td><td><%:=test%></td></tr>
            <tr><td>&lt;%=test + 1&gt;表达式</td><td><%=test + 1%></td></tr>
            <%if (true) {%>
                <tr><td>if</td><td>if 语句</td></tr>
            <%}%>
            <tr><td>分割线</td><td>------------------------------</td></tr>
        <%}%>
    </table>
    </script>
    <script src="../template.js"></script>
    <script>
    var html = template(document.getElementById('tpl').innerHTML, {
        url: 'http://yanhaijing.com?name=颜海镜', 
        html: '<div id="test">template.js "</div>'
    });
    console.log(html);
    document.getElementById('wp').innerHTML = html;
    </script>

<script>
    template.config({sTag: '<#', eTag: '#>'});
    var tpl1 = '<div><#:=name#></div>';
    console.log('<##>:', template(tpl1, {name: '更改tag<##>'}));
    template.config({sTag: '{{', eTag: '}}'});
    var tpl1 = '<div>{{:=name}}</div>';
    console.log('{{}}:', template(tpl1, {name: '更改tag{{}}'}));
    template.config({sTag: '<%', eTag: '#>'});
    var tpl1 = '<div><%:=name#></div>';
    console.log('<%#>:', template(tpl1, {name: '不一致也可以哦，更改tag<%#>'})); 
    template.config({sTag: '<%', eTag: '%>', compress: true});
    var tpl1 = '<div>空格会被压缩  空格  空格</div>';
    console.log('compress:', template(tpl1, {}));   
    template.config({sTag: '<%', eTag: '%>', escape: false});
    var tpl1 = '<div>默认输出不进行转义<%=html%></div>';
    console.log('escape:', template(tpl1, {html: '<div>html</div>'}));
    </script>

注册函数

<div id="wp"></div>
<script id="tpl" type="text/html">
    <%=dateFormat(Date.now(), 'yyyy年 MM月 dd日 hh:mm:ss')%>
</script>
<script src="../template.js"></script>
<script>
        template.registerFunction('dateFormat', function (date, format) {
            date = new Date(date);
            var map = {
                "M": date.getMonth() + 1, //月份 
                "d": date.getDate(), //日 
                "h": date.getHours(), //小时 
                "m": date.getMinutes(), //分 
                "s": date.getSeconds(), //秒 
                "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                "S": date.getMilliseconds() //毫秒 
            };
            format = format.replace(/([yMdhmsqS])+/g, function(all, t){
                var v = map[t];
                if(v !== undefined){
                    if(all.length > 1){
                        v = '0' + v;
                        v = v.substr(v.length-2);
                    }
                    return v;
                }
                else if(t === 'y'){
                    return (date.getFullYear() + '').substr(4 - all.length);
                }
                return all;
            });
            return format;
        });
        console.log(template.registerFunction());       console.log(template.registerFunction('dateFormat'));
</script>
<script>
    var html = template(document.getElementById('tpl').innerHTML, {});
    console.log(html);
    document.getElementById('wp').innerHTML = html;
    template.unregisterFunction('dateFormat');
    console.log(template.registerFunction('dateFormat'));
</script>

<div id="wp"></div>
<script id="tpl" type="text/html">
    <%:up='yanhaijing'%>
</script>
<script src="../template.js"></script>
<script>
     template.registerModifier('up', function (str) {
            return str.toUpperCase();
     });
     console.log(template.registerModifier());
     console.log(template.registerModifier('up'));
</script>
<script>
    var html = template(document.getElementById('tpl').innerHTML, {});
    console.log(html);
    document.getElementById('wp').innerHTML = html;
    template.unregisterModifier('up');
    console.log(template.registerModifier('up'));
</script>

二. art-template js

参考文章：
http://blog.csdn.net/pupilxiaoming/article/details/77118855
https://github.com/aui/art-template

这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate

1、特性

（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）（2）、支持运行时调试，可精确定位异常模板所在语句（演示）
（3）、对 NodeJS Express 友好支持（4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
（5）、支持include语句
（6）、可在浏览器端实现按路径加载模板（详情）
（7）、支持预编译，可将模板转换成为非常精简的 js 文件
（8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
（9）、支持所有流行的浏览器

2、语法

（1）、使用
引用简洁语法的引擎版本，例如：
（2）、表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
（3）、输出表达式
对内容编码输出： {{content}}
不编码输出： {{#content}}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
（4）、条件表达式

{{if admin}}
 <p>admin</p>
{{else if code > 0}}
 <p>master</p>
{{else}}
 <p>error!</p>
{{/if}}

（5）、遍历表达式
无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
 <li>{{index}} - {{value.user}}</li>
{{/each}}

亦可以被简写：

{{each list}}
 <li>{{$index}} - {{$value.user}}</li>
{{/each}}

（6）、模板包含表达式
用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据，亦可以指定数据：{{include 'template_name' news_list}}
（7）、辅助方法
使用template.helper(name, callback)注册公用辅助方法：

template.helper('dateFormat', function (date, format) {
 // ..
 return value;
});

模板中使用的方式： {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}
支持传入参数与嵌套使用： {{time | say:'cd' | ubb | link}}

3. 实例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
 {{each list as value i}}
  <li>索引 {{i + 1}} ：{{value}}</li>
 {{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
 title: '基本例子',
 isAdmin: true,
 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../dist/template.js"></script>
</head>

<body>
 <h1>不转义HTML</h1>
 <div id="content"></div>
 <script id="test" type="text/html">
 <p>不转义：{{#value}}</p>
 <p>默认转义： {{value}}</p>
 </script>

 <script>
 var data = {
  value: '<span style="color:#F00">hello world!</span>'
 };
 var html = template('test', data);
 document.getElementById('content').innerHTML = html;
 </script>
</body>
</html>

这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
 {{each list as value i}}
  <li>索引 {{i + 1}} ：{{value}}</li>
 {{/each}}
</ul>
</script>

<script>
var data = {
 title: '嵌入子模板',
 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../dist/template.js"></script>
</head>

<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>

<script>
/**
 * 对日期进行格式化，
 * @param date 要格式化的日期
 * @param format 进行格式化的模式字符串
 *  支持的模式字母有：
 *  y:年,
 *  M:年中的月份(1-12),
 *  d:月份中的天(1-31),
 *  h:小时(0-23),
 *  m:分(0-59),
 *  s:秒(0-59),
 *  S:毫秒(0-999),
 *  q:季度(1-4)
 * @return String
 * @author yanis.wang
 * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
 */
template.helper('dateFormat', function (date, format) {

 if (typeof date === "string") {
  var mts = date.match(/(\/Date(\d+)\/)/);
  if (mts && mts.length >= 3) {
   date = parseInt(mts[2]);
  }
 }
 date = new Date(date);
 if (!date || date.toUTCString() == "Invalid Date") {
  return "";
 }

 var map = {
  "M": date.getMonth() + 1, //月份
  "d": date.getDate(), //日
  "h": date.getHours(), //小时
  "m": date.getMinutes(), //分
  "s": date.getSeconds(), //秒
  "q": Math.floor((date.getMonth() + 3) / 3), //季度
  "S": date.getMilliseconds() //毫秒
 };


 format = format.replace(/([yMdhmsqS])+/g, function(all, t){
  var v = map[t];
  if(v !== undefined){
   if(all.length > 1){
    v = '0' + v;
    v = v.substr(v.length-2);
   }
   return v;
  }
  else if(t === 'y'){
   return (date.getFullYear() + '').substr(4 - all.length);
  }
  return all;
 });
 return format;
});

// --------

var data = {
 time: 1408536771253,
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

其中/Date(1410019200000+0800)/ 格式是json序列化日期后的结果，可通过
JavaScript code

//value是json序列化日期后的东西
eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))

转化为日期
或者

var msec = value.toString().replace(/\/Date\(([-]?\d+)\)\//gi, "$1");
value = new Date(Number.parseInt(msec)).Format("yyyy-MM-dd hh:mm:ss");

转化为日期字符串

JSON格式不直接支持日期和时间。DateTime值值显示为“/Date(700000+0500)/”形式的JSON字符串，其中第一个数字（在提供的示例中为 700000）是 GMT 时区中自 1970 年 1 月 1 日午夜以来按正常时间（非夏令时）经过的毫秒数。该数字可以是负数，以表示之前的时间。示例中包括“+0500”的部分可选，它指示该时间属于Local类型，即它在反序列化时应转换为本地时区。如果没有该部分，则会将时间反序列化为Utc。
参考文章：http://blog.csdn.net/cncdns/article/details/6164389
序列化结果:

序列化结果：
{"Age":28,"LastLoginTime":"//Date(1294499956278+0800)//","Name":"张三"}

反序列化结果：

string json = "{/"Age/":28,/"LastLoginTime/":/"2011-01-09 00:30:00/",/"Name/":/"张三/"}";

十一路客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
template js javascript模板引擎

注意到有两种template一. 第一种template js：参考文章： http://blog.csdn.net/wu6660563/article/details/51780516 https://github.com/yanhaijing/template.js/blob/master/doc/api.md示例：源码学习默认的开始标签和结束标签分别是：sTag: '<%',//开始标签，
复制链接

扫一扫

专栏目录