template.js代码自行去githut下载
githut:https://github.com/yanhaijing/template.js

所有演示示例以require引入js文件

目录结构:
/demo/js/require.js ——require js文件
/demo/x_demo.html ——示例文件
/template.js ——template js文件


基础:

模版语法:
可在html代码中使用javascript代码,与smarty类似。
模版demo

<script id="tpl" type="text/html">
  code....
</script>

表达式:
开始标签和结束标签(默认:<% 与 %>)包裹起来的语句则为模板的逻辑表达式。如下:

<%var abc = 3%>

输出表达式:
默认输出(是否转码有escape参数决定):

<%=abc%>

注释:

<%/* 这里是注释 */%>

template:

唯一入口函数,支持编译和渲染,在传统浏览器环境会占用template全局变量。

template函数会返回渲染数据的字符串,若缺省数据会返回编译后的函数,可多次调用,传入不同数据,返回不同结果,适用于多次渲染同一模版的情况,提高性能。

  1. tpl {string} 必须 带编译的模版字符串
  2. [data] {object} 可选 要渲染的数据
  3. return {function|string} 若缺省data返回函数,否则返回字符串

配置

template.config

配置template.js的自定义选项:

  1. option {Object} 配置的对象参数
  2. return {Object} 配置对象的镜像

可配置参数

  1. sTag {String} 开始标签 默认为 ‘<%’
  2. eTag {String} 结束标签 默认为 ‘%>’
  3. compress {Boolean} 是否压缩输出的html 默认为false
  4. escape {Boolean} 默认是否对输出内容进行html转义 默认为true

注册自定义函数功能:

template.registerFunction

  1. name {String} 自定义函数的名字,如果缺省会返回全部已注册的函数
  2. fn {Function} 自定义函数,如果缺省会返回名称为name的函数
  3. return {Object|Function} 对象或函数

取消自定义函数功能:

template.unregisterFunction

  1. name {String} 取消自定义函数的名字
  2. return {Boolean} 是否成功

注册自定义修复器功能:

template.registerModifier

  1. name {String} 自定义修复器的名字,如果缺省会返回全部已注册的修复器
  2. fn {Function} 自定义修复器,如果缺省会返回名称为name的修复器
  3. return {Object|Function} 对象或函数

取消自定义修复器功能:

template.unregisterModifier

  1. name {String} 取消自定义修饰器的名字
  2. return {Boolean} 是否成功

template.noConflict+

在以原始方式使用template.js时会存在改函数(在模块化开发环境中不会存在),用来释放template.js占用的全局变量template。同时会返回template。

return {Function} template


上一个Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习Template</title>
</head>
<body>
<script id="tpl" type="text/html">
  <%var a = 3%><!--定义变量-->
  <%while(a--){
  console.log(a);
  }%>
</script>

<div id="show2"></div>
<script id="tpl2" type="text/html">
  <ul>
    <li>默认输出:<%=content%></li>
    <li>不编码输出:<%:=content%></li>
    <li>对输出内容进行HTML转义:<%:h=content%></li>
    <li>对输出内容进行URL编码:<%:u=url%></li>
    <li>注释:<%/* 这里是注释 */%></li>
  </ul>
  <p>**注:编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。**</p>
</script>

<script src="js/require.js"></script>
<script>
  requirejs.config({
    baseUrl: '../',  //设置根目录
  });

  require(['template'], function (template) {
    var _tmp = document.getElementById('tpl').innerHTML;
    var html = template(_tmp, {}); //参数二没有数据填{},不填会出错,具体原因未调查

    var _tmp = document.getElementById('tpl2').innerHTML;
    var html = template(_tmp, {
      content: '<div>这是内容</div>',
      url: 'http://xinyufeng.net?name=辛小峰',
    });
    document.getElementById('show2').innerHTML = html;
  });
</script>
</body>
</html>

如未注明,均为原创,转载请注明来自Peak Xin's Blog

No Comments »