⒐ 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>

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.