⒐ EJS 模版语言

wangzj141 edited this page Jun 17, 2016 · 4 revisions

tmt-workflow 支持 EJS 模式引擎,在编写 HTML 过程中可以节省下不少的工作量,并且通过 includefor 循环 等特性减少代码行数,提高代码的可读性。

我们采用 EJS 2.0 以上版本:https://github.com/mde/ejs

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>

Includes

Include 可以引用相对路径的模版文件,例如有 html/index.htmlhtml/_block/head.html 这两个文件,你就可以在 index.html 这么用 <% include _block/head.html %>

示例

<ul>
    <% users.forEach(function(user){ %>
    <% include user/show %>
    <% }) %>
</ul>

TmT EJS Helper

我们在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作。

GIT:https://github.com/willerce/tmt-ejs-helper

css()

快速的引用 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>

js()

功能与 css() 一致,不复述

img() 占位图

占位图,可以指定高、宽,以及 className

<%- img(200, 400, 'block__img') %>

编译后:

<img src="http://temp.im/200x400" class="block__img"/>

text() 占位文本

生成指定长度的占位图,第二个参数为偏移字数

例如,下面这个函数,生成的文本长度可能为 7 ~ 13 位。

 <span><%- text(10, 3) %></span>

编译后:

<span>一二三四五六七八九</span>

更多的模版函数?等你来提~