mirror of https://github.com/layui/layui
添加 latpl 应用安全提示注释
parent
99bc35a06c
commit
5895e84785
|
@ -2,7 +2,7 @@
|
|||
title: 模板引擎 laytpl
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
||||
# 模板引擎
|
||||
|
||||
> `laytpl` 是 Layui 的一款轻量 JavaScript 模板引擎,在字符解析上有着比较出色的表现。
|
||||
|
@ -37,14 +37,14 @@ toc: true
|
|||
```
|
||||
layui.use('laytpl', function(){
|
||||
var laytpl = layui.laytpl;
|
||||
|
||||
|
||||
// 直接解析字符
|
||||
laytpl('{{= d.name }}是一名前端工程师').render({
|
||||
name: '张三'
|
||||
}, function(str){
|
||||
console.log(str); // 张三是一名前端工程师
|
||||
});
|
||||
|
||||
|
||||
// 同步写法
|
||||
var str = laytpl('{{= d.name }}是一名前端工程师').render({
|
||||
name: '张三'
|
||||
|
@ -60,9 +60,9 @@ layui.use('laytpl', function(){
|
|||
<h3>{{= d.name }}</h3>
|
||||
<p>性别:{{= d.sex ? '男' : '女' }}</p>
|
||||
</script>
|
||||
|
||||
|
||||
<div id="view"></div>
|
||||
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
|
@ -98,6 +98,8 @@ compile.render(data, callback); // 模板渲染
|
|||
{{- d.include("/laytpl/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
> ### 注意
|
||||
> 开发者在使用模板语法时,需确保模板中的 JS 语句不来自于页面用户输入,即必须在页面开发者自身的可控范围内,否则请避免使用该模板引擎。
|
||||
|
||||
<h2 id="config" lay-toc="{level: 2}">属性配置</h2>
|
||||
|
||||
|
@ -119,7 +121,7 @@ laytpl.config({
|
|||
open: '<%',
|
||||
close: '%>'
|
||||
});
|
||||
|
||||
|
||||
// 模板语法将默认采用上述定义的标签符书写
|
||||
laytpl(`
|
||||
<%# var job = ["前端工程师"]; %>
|
||||
|
@ -129,7 +131,7 @@ laytpl(`
|
|||
type: 0
|
||||
}, function(string){
|
||||
console.log(string); // 张三是一名前端工程师。
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 局部配置 <sup>2.8+</sup>
|
||||
|
@ -142,7 +144,7 @@ laytpl('<%= d.name %>是一名前端工程师', {
|
|||
close: '%>'
|
||||
}).render({name: '张三'}, function(string){
|
||||
console.log(string); // 张三是一名前端工程师。
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -12,11 +12,11 @@ layui.define(function(exports){
|
|||
};
|
||||
|
||||
// 模板工具
|
||||
var tool = {
|
||||
var tool = {
|
||||
escape: function(html){
|
||||
var exp = /[<"'>]|&(?=#[a-zA-Z0-9]+)/g;
|
||||
if(html === undefined || html === null) return '';
|
||||
|
||||
|
||||
html += '';
|
||||
if(!exp.test(html)) return html;
|
||||
|
||||
|
@ -77,12 +77,12 @@ layui.define(function(exports){
|
|||
|
||||
// 模板必须为 string 类型
|
||||
if(typeof template !== 'string') return template;
|
||||
|
||||
|
||||
// 正则解析
|
||||
template = template.replace(/\s+|\r|\t|\n/g, ' ')
|
||||
.replace(inner.exp(options.open +'#'), options.open +'# ')
|
||||
.replace(inner.exp(options.close +'}'), '} '+ options.close).replace(/\\/g, '\\\\')
|
||||
|
||||
|
||||
// 不匹配指定区域的内容
|
||||
.replace(inner.exp(options.open + '!(.+?)!' + options.close), function(str){
|
||||
str = str.replace(inner.exp('^'+ options.open + '!'), '')
|
||||
|
@ -92,13 +92,13 @@ layui.define(function(exports){
|
|||
});
|
||||
return str
|
||||
})
|
||||
|
||||
|
||||
// 匹配 JS 语法
|
||||
.replace(/(?="|')/g, '\\').replace(that.tagExp(), function(str){
|
||||
str = str.replace(jss, '').replace(jsse, '');
|
||||
return '";' + str.replace(/\\(.)/g, '$1') + ';view+="';
|
||||
})
|
||||
|
||||
|
||||
// 匹配普通输出语句
|
||||
.replace(that.tagExp(1), function(str){
|
||||
var start = '"+laytpl.escape(';
|
||||
|
@ -114,10 +114,14 @@ layui.define(function(exports){
|
|||
}
|
||||
return start + str.replace(/\\(.)/g, '$1') + ')+"';
|
||||
});
|
||||
|
||||
|
||||
template = '"use strict";var view = "' + template + '";return view;';
|
||||
|
||||
try {
|
||||
/**
|
||||
* 请注意: 开发者在使用模板语法时,需确保模板中的 JS 语句不来自于页面用户输入。
|
||||
* 即模板中的 JS 语句必须在页面开发者自身的可控范围内,否则请避免使用该模板解析。
|
||||
*/
|
||||
that.cache = template = new Function('d, laytpl', template);
|
||||
return template(data, tool);
|
||||
} catch(e) {
|
||||
|
@ -132,7 +136,7 @@ layui.define(function(exports){
|
|||
|
||||
var that = this;
|
||||
var result = that.cache ? that.cache(data, tool) : that.parse(that.template, data);
|
||||
|
||||
|
||||
// 返回渲染结果
|
||||
typeof callback === 'function' && callback(result);
|
||||
return result;
|
||||
|
@ -152,7 +156,7 @@ layui.define(function(exports){
|
|||
};
|
||||
|
||||
laytpl.v = '2.0.0';
|
||||
|
||||
|
||||
// export
|
||||
exports('laytpl', laytpl);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue