EJS: 基于JavaScript的模板引擎

最新推荐文章于 2021-08-31 14:50:39 发布

原创最新推荐文章于 2021-08-31 14:50:39 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #EJS #模板引擎 #ViewUI

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用EJS模板引擎简化纯静态HTML页面中动态内容的生成过程，通过实例展示如何将JSON数据转换为动态表格，并提供EJS引擎的基本用法和示例代码。

最近所在的项目页面使用纯静态HTML,所有动态内容都通过ajax加载生成,在JS中拼凑HTML片段比较繁琐,有同事推荐使用EJS——一个JS的模板引擎上手简单,使用方便.这里给大家简单介绍一下.

一、场景:

页面提交ajax查询,服务器返回一段json,客户端根据json内容动态生成table展现.

二、EJS用法

1.模板
与jsp的script类似,位于<% %>之间的JavaScript会被解释执行,而<%= %>则会把表达式的值输出到页面.
2.渲染:

html = new EJS({url: '/template.ejs'}).render(data);

或

new EJS({url:'/todo.ejs'}).update('todo','/todo.json');

三、示例

这是我们要实现的table:

接着看看服务器返回的json长啥样:

[{
    "2015-09-06": {
        "strife": 1,
        "longen": 13
    },  
    "2015-09-07": {
        "strife": 0,
        "longen": 15
    },  
    "total": {
        "strife": 1,
        "longen": 28
    }   
}]

页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ejs demo page</title>
    <link rel="stylesheet" href="demo.css" type="text/css" />
</head>
<body>
    <h3>ejs demo page</h3>
    <div id="content">
		<input type="button" value="generate table" id="genTableBtn" />
        <div id="dataTable"></div>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="ejs.js"></script>
    <script src="demo.js"></script>
</body>
</html>

为便于遍历，我们的json对象需要做些转换：

    var transformData = function(data) {
        var myObj = {};
        var contents = [];
        var maps = [];
        for (var p in data[0]) {
            var content = {};
            var contentArray = [];
            if (p == 'total') {
                content.contentTitle = '总数';
            } else {
                content.contentTitle = p;
            }
            for (var pp in data[0][p]) {
                contentArray.push(data[0][p][pp]);
            }
            content.contentArray = contentArray;
            contents.push(content);
        }
        for (var ppp in data[0]['total']) {
            maps.push(ppp);
        }
        myObj.contents = contents;
        myObj.maps = maps;
        return myObj;
    }

接着设计table的模板:

<table>
    <thead>
        <tr>
            <th>日期</th>
            <% for(var p in myObj.maps) { %>
                    <th><%= myObj.maps[p] %></th>
            <% } %>
        </tr>
    </thead>
    <tbody>
        <% for(var content in myObj.contents) { %>
            <tr>
                <td>
                    <div align="center"><%= myObj.contents[content].contentTitle %></div>
                </td>
                <% for(var item in myObj.contents[content].contentArray) { %>
                        <td>
                            <div align="center"><%= myObj.contents[content].contentArray[item] %></div>
                        </td>
                <% } %>
            </tr>
        <% } %>
    </tbody>
</table>

ajax请求json,然后生成table:

$(function() {
    var loadTable = function() {
		$.ajax({
			type: "get",
			datatype: "json",
			url: "data.js",
			success: function(data) {
				var myObj = transformData(JSON.parse(data));
				var htmlTable = new EJS({
					url: 'demo.ejs'
				}).render({
					myObj: myObj
				});
				$('#dataTable').html(htmlTable);
				decorateTable();
			},
			error: function(e) {
				console.log(e);
			}
		});
    };
    var decorateTable = function() {
        $("tr:odd").addClass("odd");
        $("tr:even").addClass("even");
        $("th").addClass("thead");
    }
	$("#genTableBtn").bind("click", loadTable);
});

以上代码已经放到:

https://github.com/lixuanbin/ejs-demo

四、参考资料

官方页面:

http://www.embeddedjs.com/

还有一个服务端nodejs的版本（需科学上网）：
http://ejs.co/