模版引擎
快速上手
使用时需先作为依赖引入
模版引擎渲染有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