手册
目录
收藏676
分享
阅读11017
更新时间2022-04-11
tmt-workflow 支持 EJS 模式引擎，在编写 HTML 过程中可以节省下不少的工作量，并且通过 include、for 循环 等特性减少代码行数，提高代码的可读性。
我们采用 EJS 2.0 以上版本：https://github.com/mde/ejs
在页面中输出变量值，你可以这么用： <div><%= var01 %></div>
如果不希望变量值的内容被转义，那就这么用：<div><%- var02 %></div>
所有使用 <% %> 括起来的内容都会被编译成 Javascript，你可以在模版文件中像写 js 一样 Coding，也允许你声明变量，作用域就是当前模版，因为一个模版会被编译成一个 Javascript 函数。
示例:
<% var name = "littledu" %> <div> Hello, My Name is <%-name %> </div>
就像写 Javascript 一样
<ul>
<% for(var i = 0; i < 10; i++) {%>
<li>我是列表 <%-i %></li>
<% } %>
<ul>
Include 可以引用相对路径的模版文件，例如有 html/index.html 和 html/_block/head.html这两个文件，你就可以在 index.html 这么用 <% include _block/head.html %>。
示例
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>
我们在 EJS 之外，提供了一些额外的模版函数来简化我们的一些工作。
GIT：https://github.com/willerce/tmt-ejs-helper
快速的引用 CSS 文件，并附上注释线上 CSS 绝对路径，便于下游前端使用。
<head>
<title>页面标题</title>
<%- css("style-workflow.css") %>
</head>
编译后：
<head> <title>页面标题</title> <link rel="stylesheet" href="../../dev/css/style-workflow.css"/> <!--<link rel="stylesheet" href="http://wximg.gtimg.com/tmt/workflow/dist/css/style-workflow.css"/>--> </head>
功能与 css() 一致，不复述
占位图，可以指定高、宽，以及 className
<%- img(200, 400, 'block__img') %>
编译后：
<img src="http://temp.im/200x400" class="block__img"/>
生成指定长度的占位图，第二个参数为偏移字数
例如，下面这个函数，生成的文本长度可能为 7 ~ 13 位。
<span><%- text(10, 3) %></span>
编译后：
<span>一二三四五六七八九</span>
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.3万人学习
共29课时
61.9万人学习
共25课时
39.5万人学习
共43课时
71.2万人学习
共25课时
61.8万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.7万人学习
