mm_tpl 2.3.8 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +166 -1
- package/package.json +2 -2
- package/test.js +110 -81
package/README.md
CHANGED
|
@@ -1,2 +1,167 @@
|
|
|
1
1
|
# mm_tpl
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
这是超级美眉模板帮助类模块，用于MVC模式下的视图渲染。基于art-template模板引擎，提供了更强大的模板渲染功能。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install mm_tpl
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 基本使用
|
|
12
|
+
|
|
13
|
+
### 1. 初始化模板引擎
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
const Tpl = require('mm_tpl');
|
|
17
|
+
const tpl = new Tpl({
|
|
18
|
+
// 可选配置参数
|
|
19
|
+
root: process.cwd(), // 根目录
|
|
20
|
+
default_dir: "./template/", // 默认模板目录
|
|
21
|
+
default_theme: 'default', // 默认主题
|
|
22
|
+
extname: ".html", // 模板文件扩展名
|
|
23
|
+
cache_root: './cache', // 缓存目录
|
|
24
|
+
cache_extname: '.cache.html' // 缓存文件扩展名
|
|
25
|
+
});
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 2. 基础模板渲染
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
// 简单变量替换
|
|
32
|
+
const result = tpl.render("<div>${message}</div>", {
|
|
33
|
+
message: "Hello World"
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// 输出: <div>Hello World</div>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 3. 循环渲染
|
|
40
|
+
|
|
41
|
+
```javascript
|
|
42
|
+
// 数组循环
|
|
43
|
+
const arrayResult = tpl.render(`
|
|
44
|
+
<ul>
|
|
45
|
+
${loop arr value idx}
|
|
46
|
+
<li>${idx}: ${value}</li>
|
|
47
|
+
${/loop}
|
|
48
|
+
</ul>
|
|
49
|
+
`, {
|
|
50
|
+
arr: [123, 234]
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// 对象循环
|
|
54
|
+
const objectResult = tpl.render(`
|
|
55
|
+
<dl>
|
|
56
|
+
${loop obj value key}
|
|
57
|
+
<dt>${key}</dt>
|
|
58
|
+
<dd>${value}</dd>
|
|
59
|
+
${/loop}
|
|
60
|
+
</dl>
|
|
61
|
+
`, {
|
|
62
|
+
obj: { name: "张三", age: 25 }
|
|
63
|
+
});
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 4. 视图渲染
|
|
67
|
+
|
|
68
|
+
```javascript
|
|
69
|
+
// 设置全局变量
|
|
70
|
+
$.globalBag.siteName = "我的网站";
|
|
71
|
+
|
|
72
|
+
// 设置视图变量
|
|
73
|
+
tpl.viewBag.title = "首页";
|
|
74
|
+
|
|
75
|
+
// 渲染视图文件
|
|
76
|
+
const html = tpl.view("./views/index.html", {
|
|
77
|
+
user: { name: "张三" }
|
|
78
|
+
});
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 5. 缓存机制
|
|
82
|
+
|
|
83
|
+
```javascript
|
|
84
|
+
// 使用缓存渲染视图
|
|
85
|
+
const html = tpl.view("./views/page", {
|
|
86
|
+
data: someData
|
|
87
|
+
}, {
|
|
88
|
+
cache: true, // 是否使用缓存
|
|
89
|
+
cache_filename: "./cache" // 缓存文件名
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// 清除指定目录的缓存
|
|
93
|
+
tpl.clear_cache('./views/mall');
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### 6. 钩子系统
|
|
97
|
+
|
|
98
|
+
#### 添加函数钩子
|
|
99
|
+
```javascript
|
|
100
|
+
$.hook.addFunc('list', async function(viewBag, req, type) {
|
|
101
|
+
// 处理列表逻辑
|
|
102
|
+
return someData;
|
|
103
|
+
});
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
#### 添加动作钩子
|
|
107
|
+
```javascript
|
|
108
|
+
$.hook.addAction('header', function(viewBag, param) {
|
|
109
|
+
return "<header>网站头部</header>";
|
|
110
|
+
}, 1, "headerAction");
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
#### 添加过滤器钩子
|
|
114
|
+
```javascript
|
|
115
|
+
$.hook.addFilter('content', function(viewBag, content, param) {
|
|
116
|
+
return content.replace("旧文本", "新文本");
|
|
117
|
+
}, 1, "contentFilter");
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
#### 使用钩子
|
|
121
|
+
```javascript
|
|
122
|
+
// 运行函数钩子
|
|
123
|
+
await tpl.runFunc('list', {
|
|
124
|
+
query: { page: 1 }
|
|
125
|
+
}, 'article');
|
|
126
|
+
|
|
127
|
+
// 在模板中使用动作钩子
|
|
128
|
+
${hook_action('header')}
|
|
129
|
+
|
|
130
|
+
// 在模板中使用过滤器钩子
|
|
131
|
+
${hook_filter('content', '原始内容')}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## 高级特性
|
|
135
|
+
|
|
136
|
+
### 1. 主题支持
|
|
137
|
+
```javascript
|
|
138
|
+
// 设置当前主题
|
|
139
|
+
tpl.current_theme = "dark";
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### 2. 模板规则
|
|
143
|
+
模块内置支持多种模板规则，包括：
|
|
144
|
+
- nativeRule: 原生语法规则
|
|
145
|
+
- artRule: art-template语法规则
|
|
146
|
+
- htmlRule: HTML注释语法规则
|
|
147
|
+
- jsRule: JavaScript语法规则
|
|
148
|
+
- pyRule: Python风格语法规则
|
|
149
|
+
|
|
150
|
+
### 3. 错误处理
|
|
151
|
+
```javascript
|
|
152
|
+
const html = tpl.view("./template.html", data);
|
|
153
|
+
if (tpl.error) {
|
|
154
|
+
console.error("渲染错误:", tpl.error);
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## 注意事项
|
|
159
|
+
|
|
160
|
+
1. 确保模板目录具有正确的读写权限
|
|
161
|
+
2. 使用缓存时注意及时清理过期缓存
|
|
162
|
+
3. 钩子的优先级数值越小，执行顺序越靠前
|
|
163
|
+
4. 建议在生产环境开启模板缓存以提高性能
|
|
164
|
+
|
|
165
|
+
## 许可证
|
|
166
|
+
|
|
167
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mm_tpl",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "这是超级美眉模板帮助类模块，用于MVC模式下的视图渲染",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
"homepage": "https://github.com/qiuwenwu/mm_tpl#readme",
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"art-template": "^4.13.2",
|
|
31
|
-
"mm_expand": "^1.
|
|
31
|
+
"mm_expand": "^1.7.7"
|
|
32
32
|
}
|
|
33
33
|
}
|
package/test.js
CHANGED
|
@@ -1,35 +1,54 @@
|
|
|
1
1
|
const Tpl = require('./index.js');
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
/**
|
|
4
|
+
* 基础模板渲染测试函数
|
|
5
|
+
* 演示简单的变量替换功能
|
|
6
|
+
* @async
|
|
7
|
+
*/
|
|
8
|
+
async function test() {
|
|
9
|
+
var tpl = new Tpl();
|
|
10
|
+
var body = tpl.render("<a>${test} + 123123</a>", {
|
|
11
|
+
test: 123
|
|
12
|
+
});
|
|
13
|
+
console.log(body);
|
|
14
|
+
}
|
|
10
15
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
/**
|
|
17
|
+
* 数组/对象循环渲染测试函数
|
|
18
|
+
* 演示模板中的循环功能
|
|
19
|
+
* @async
|
|
20
|
+
*/
|
|
21
|
+
async function test() {
|
|
22
|
+
var tpl = new Tpl();
|
|
23
|
+
// 数组循环示例
|
|
24
|
+
// var body = tpl.render("<a>${loop arr value idx} ${idx} ${ value } ${/loop} + 123123</a>", { arr: [123,234] });
|
|
14
25
|
|
|
15
|
-
//
|
|
26
|
+
// 对象循环示例
|
|
27
|
+
var body = tpl.render("<a>${ loop obj value key } ${ key } ${ value } ${/loop} + 123123</a>", { obj: { a: 123, b: 467 } });
|
|
16
28
|
|
|
17
|
-
//
|
|
18
|
-
//
|
|
19
|
-
//
|
|
29
|
+
// 传统for循环示例
|
|
30
|
+
// var body = tpl.render("<a><!--[ for(var i = 0; i < arr.length; i++){ ]--> ${ arr[i] } <!--[ } ]--> + 123123</a>", {
|
|
31
|
+
// arr: [123, 234]
|
|
32
|
+
// });
|
|
20
33
|
|
|
21
|
-
//
|
|
22
|
-
//
|
|
23
|
-
//
|
|
24
|
-
|
|
34
|
+
// each循环示例
|
|
35
|
+
// var body = tpl.render("<a>${ each arr } ${ arr[$index] } ${/each} + 123123</a>", { arr: [123,234] });
|
|
36
|
+
// var view = tpl.render("<a>${ each arr } ${ $value } ${/each} + 123123</a>", { arr: [123,234] });
|
|
37
|
+
console.log(body);
|
|
38
|
+
}
|
|
25
39
|
|
|
40
|
+
/**
|
|
41
|
+
* 模板视图渲染测试函数
|
|
42
|
+
* 演示全局变量和视图渲染的使用
|
|
43
|
+
* @async
|
|
44
|
+
*/
|
|
26
45
|
async function test() {
|
|
27
46
|
console.log("测试开始")
|
|
28
47
|
var tpl = new Tpl();
|
|
29
48
|
// 设置全局变量
|
|
30
49
|
$.globalBag.name = "超级美眉Art模板引擎";
|
|
31
50
|
|
|
32
|
-
//
|
|
51
|
+
// 设置实例视图变量
|
|
33
52
|
tpl.viewBag.name = "系统名称";
|
|
34
53
|
|
|
35
54
|
// 渲染视图
|
|
@@ -38,66 +57,76 @@ async function test() {
|
|
|
38
57
|
console.log(body);
|
|
39
58
|
}
|
|
40
59
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
//
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
//
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
//
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
//
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
//
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
//
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
//
|
|
88
|
-
|
|
89
|
-
//
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
//
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
//
|
|
60
|
+
/**
|
|
61
|
+
* 钩子和动作测试函数
|
|
62
|
+
* 演示带有动作和过滤器的钩子系统
|
|
63
|
+
* @async
|
|
64
|
+
*/
|
|
65
|
+
async function test() {
|
|
66
|
+
var tpl = new Tpl();
|
|
67
|
+
|
|
68
|
+
// 设置全局变量
|
|
69
|
+
$.globalBag.name = "超级美眉Art模板引擎";
|
|
70
|
+
|
|
71
|
+
// 设置实例视图变量
|
|
72
|
+
tpl.viewBag.name = "系统名称";
|
|
73
|
+
tpl.current_theme = "game";
|
|
74
|
+
tpl.dir = "";
|
|
75
|
+
|
|
76
|
+
// 添加列表函数钩子
|
|
77
|
+
$.hook.addFunc('list', async function(m, req, type) {
|
|
78
|
+
var query = req.query;
|
|
79
|
+
if (query.user_id) {
|
|
80
|
+
m.user_id = query.user_id;
|
|
81
|
+
}
|
|
82
|
+
if (query.project_id) {
|
|
83
|
+
m.project_id = query.project_id;
|
|
84
|
+
}
|
|
85
|
+
console.log("列表", m);
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// 添加动作钩子
|
|
89
|
+
$.hook.addAction('test', function aa(m, param) {
|
|
90
|
+
return "<div>你好吗？</div>";
|
|
91
|
+
}, 2);
|
|
92
|
+
|
|
93
|
+
$.hook.addAction('test', function(m, param) {
|
|
94
|
+
return "<div>你好！</div>";
|
|
95
|
+
}, 1, "测试动作1");
|
|
96
|
+
|
|
97
|
+
// 添加过滤器钩子
|
|
98
|
+
$.hook.addFilter('test', function(m, ret, param) {
|
|
99
|
+
console.log("测试", ret);
|
|
100
|
+
return ret.replace("你", "您");
|
|
101
|
+
}, 1, "测试过滤");
|
|
102
|
+
|
|
103
|
+
// 删除动作钩子
|
|
104
|
+
$.hook.delAction('test', "aa");
|
|
105
|
+
$.hook.delAction('test', "测试动作1");
|
|
106
|
+
// $.hook.delFilter('test', "测试过滤");
|
|
107
|
+
|
|
108
|
+
// 运行函数钩子
|
|
109
|
+
await tpl.runFunc('list', {
|
|
110
|
+
query: {
|
|
111
|
+
user_id: 1,
|
|
112
|
+
project_id: 2
|
|
113
|
+
}
|
|
114
|
+
}, 'article');
|
|
115
|
+
|
|
116
|
+
// 使用缓存渲染视图
|
|
117
|
+
var body = tpl.view("./ad", {
|
|
118
|
+
arr: [123, 234],
|
|
119
|
+
message: "hello world！"
|
|
120
|
+
}, {
|
|
121
|
+
// 是否读取缓存文件，如果为false但有cache_filename，则只保存缓存但不读取
|
|
122
|
+
cache: false,
|
|
123
|
+
// 缓存文件名
|
|
124
|
+
cache_filename: "./test"
|
|
125
|
+
});
|
|
126
|
+
// 删除指定目录下的缓存文件
|
|
127
|
+
// tpl.clear_cache('./mall');
|
|
128
|
+
console.log(body);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// 执行测试
|
|
103
132
|
test();
|