• template.js文档


    参见GitHub:https://github.com/yanhaijing/template.js/

    template.js简介:

      template.js 一款javascript模板引擎,简单,好用。

      template.js遵循简单好用的原则,所有接口都设计简单,职责单一。

     功能概述

    提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

    # 特性

    - 模版编译,渲染
    - 支持所有主流浏览器及Node(UMD)
    - JavaScript原生语法
    - 丰富的自定义配置
    - 支持数据过滤
    - 异常捕获功能
    - 功能专一,简单好用

    # 兼容性

    - Node 0.10+
    - Safari 6+ (Mac)
    - iOS 5+ Safari
    - Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
    - Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
    - Internet Explorer 6+ (Windows, Windows Phone)
    - Opera 10+ (Windows, linux, Android)

    快速上手

    # 编写模版

    使用一个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>

    更多例子,请见[demo](demo)目录。

    ===============================================================================

    模版语法
    可在html代码中使用javascript代码。

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

    <%var a = 3%>
    <%while(a--) {
      console.log(a);
    }%>

    上面的输出如下:

    > 2
    > 1
    > 0

    # 输出表达式

    默认输出(是否转码由escape参数决定):

    <%=content%>

    不编码输出:

    <%:=content%>

    对输出内容进行HTML转义:

    <%:h=content%>

    对输出内容进行URL编码:

    <%:u=content%>

    **注:编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。**

    # 注释
    可使用js注释,如下:

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

    ## template

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

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

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

    [演示](../demo/basic.html)

    ## template.config
    配置template.js的自定义选项。

    - option {Object} 配置的对象参数
    - return {Object} 配置对象的镜像

    ### 可配置参数

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

    [演示](../demo/config.html)

    ## template.registerFunction
    注册自定义函数功能。

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

    ## template.unregisterFunction
    取消自定义函数功能。

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

    [演示](../demo/registerFunction.html)

    ## template.registerModifier
    注册自定义修复器功能。

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

    ## template.unregisterModifier
    取消自定义修复器功能。

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

    [演示](../demo/registerModifier.html)

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

    - return {Function} template

     

  • 相关阅读:
    【LSA推荐算法】简单理解
    【数据分析案例】用户消费行为
    【Django】rest_framework 序列化自定义替换返回值
    【Django+Element UI】使用一个接口文件,搞定分页获取数据,模糊查询后分页获取数据
    【Django后端分离】使用element-ui文件上传
    JavaScript数组去重方法总结
    MySQL索引优化--对前缀索引使用like模糊匹配时的实际索引选择
    Linux命令--top
    Linux命令--free
    MySQL中的表的列设置为varchar(0)或char(0)
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6709002.html
Copyright © 2020-2023  润新知