template.js前端模板引擎使用

╰+哭是因爲堅強的太久メ 2022-09-22 11:45 200阅读 0赞

## 下载地址 ##

[https://github.com/yanhaijing/template.js][https_github.com_yanhaijing_template.js]

作者编写的文档：[https://github.com/yanhaijing/template.js/blob/master/README.md][https_github.com_yanhaijing_template.js_blob_master_README.md]

## 源码学习 ##

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

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

## 快速上手 ##

### 编写模板 ###

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

### 渲染模板 ###

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

输出：

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

### 转义 ###

### 注册函数 ###

<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>

[https_github.com_yanhaijing_template.js]: https://github.com/yanhaijing/template.js
[https_github.com_yanhaijing_template.js_blob_master_README.md]: https://github.com/yanhaijing/template.js/blob/master/README.md