模版引擎

快速上手

使用时需先作为依赖引入

模版引擎渲染有2种方式,一种是通过script标签渲染,另一种是直接渲染

# script标签渲染模版

在页面body中创建type="text/html"的script标签,并且包含id属性

# 直接渲染模板

# 说明

渲染数据必须是数组或者JSON对象。

推荐在js文件中创建模板作为独立模块,这样就避免了页面包含大量的script模版标签

语法

# 输出值

# 声明变量

声明的变量名不要和渲染数据的属性名相同,不然属性值会被覆盖。

声明的变量不会被输出。

# 双问号

在渲染模版时,一些属性在某些情况下是不存在的,如果直接在模版中使用会报未定义错误,用typeof判断会导致模版可读性变差,因此可以在变量后面加双问号“??”替代typeof

输出值时使用双问号,若变量不存在则输出空字符串,其它情况均作为布尔值返回

# 遍历

当渲染数据为数组时,可使用$list操作该数组

遍历不声明键值变量时,可使用$value和$index分别操作值和键

# 判断

# 三目运算

# 方法调用

如何创建方法?

1、使用时“|”两边必须加空格

2、使用$method

# 导入模板

方法

渲染script模板

# 参数

参数名 参数类型 参数说明
tplid String 模版id
data Array, Object 渲染数据
options Object 模版配置参数

render

渲染模板

# 参数

参数名 参数类型 参数说明
tmpl String 模板字符串
data Array, Object 渲染数据
options Object 模版配置参数

# 说明

如果模板中include非script模板,则需要通过call或者apply方法调用

method

添加模板方法

# 参数

参数名 参数类型 参数说明
name String 方法名
callback Function 处理回调

# 举个栗子

将手机号码中间4位加密

# 内置方法

过滤空格,用法参考Nui.trim

格式化日期,用法参考formatDate

设置url参数,用法参考setParam

四舍五入保留小数,用法参考toFixed

config

配置全局参数

# 参数

参数名 参数类型 参数说明
key String, Object 参数名或者参数集合
value String 参数值

# 模板默认参数

参数名 默认值 参数说明
openTag <% 模板开始标签
closeTag %> 模板闭合标签

性能测试

条数据 次渲染与其它模版引擎耗时对比

IE6/7下不要用大数据测试,否则会导致崩溃,建议最大300*10