Ejs 模板引擎的有限使用-原创手记-慕课网

Ejs，Effective js 是也。所谓，写的更少，做的更多。

流浪器端的语法大概是长这样的：

首先得引入ejs嘛

<script src="ejs.js"></script>

然后使用JavaScript脚步调用，以下两种调用方式是等价的：
方式1——

var template = ejs.compile(str, options);
template(data);

方式2——

ejs.render(str, data, options);

options对象可以包括以下属性：

cache:true,         //解析结果进行缓存
filename:"path",        //用于引入文件或指定cache的键名
scope:"this",           //指定函数执行的上下文对象
compileDebug:false, //当此项为false时，debug指令不会被编译
client:"",          //返回独立的编译后的函数
delimiter:"a tag",  //指定标签的开闭符号，默认为 % ,可以指定例如 ? 或$ 
open:"<%",          //指定开标签
close:"%>",         //指定闭标签
debug:true,         //输出生成的函数体
_with:false         //指定模板是否使用with(){}函数结构

标签含义：

<%  //所包含的内容是非输出的，用于控制流，如if、for等使用
<%= //输出对HTML转义后的字符串到模板中
<%- //输出原始的HTML串到模板中，不对HTML进行转义
<%# //注释标签，会被直接忽略
<%% //把 <%% 替换成 <% ，其他什么都不做
%>  //普通的结束标签
-%> //剪除模式，移除随后的换行符

渲染数组：

<script>
  var people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>

渲染对象：

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

关于引入模式和自定义标签，嗯，写的太多了...

看起来好复杂啊，怎么用呢？？？这个值得探讨探讨...以下代码默认以jQuery库形式进行操作

如果模板不需要复用

一、HTML结构与js代码混用
a.html文件

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="ejs.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="a.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="show"></div>
    </body>
</html>

a.js

$(function(){
    var str = "<ul><li><%=data.txt%></li><li><%=data.time%></li></ul>";
    var obj = {
        txt:'HelloWorld',
        time:'2016-11-29'
    };
    var html = ejs.render(str,{data:obj});
    $("#show").html(html);
}

结果如下：

这种方式非常不好，因为这完全不符合前端的分离原则，建议使用接下来的这种。

二、ejs模板保留在HTML文本中，与js分离
b.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="ejs.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="b.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="show"></div>
                <script type="text/html" id="model">
                    <ul>
                        <% for(var attr in data){ %>
                            <li><%=data[attr]%></li>
                        <% } %>
                    </ul>
                </script>
    </body>
</html>

b.js

$(function(){
    var obj = {
        txt:'HelloWorld',
        time:'2016-11-29'
    };
    var html = ejs.render($("#model").html(),{data:obj});
    $("#show").html(html);
}

你会得到一样的结果，但是，js代码里面没有了HTML标签，符合了内容结构与业务逻辑的分离，你应当这么使用。

如果模板需要复用

三、模板通过script标签保留在HTML结构中
c.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="ejs.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="c.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/html" id="what">
            <%=hello.earth%>
            <%- '<script type="text/html" id="how">' %>
                <%% if(hello){ %>
                    <%%=hello.world%>
                <%% } %>
            <%- '</scr' + 'ipt>' %>
            <%- '<script type="text/html" id="why">' %>
                <%% if(hello){ %>
                    <%%=hello.world%>
                <%% } %>
            <%- '</scr' + 'ipt>' %>
        </script>
        <div id="show"></div>
    </body>
</html>

c.js

$(function(){
    var hello = {
        earth:"Good morning?",
        world:"Who are you!"
    }
    var html = ejs.render($('#what').html(),{hello:hello});
    $("#show").html(html);
});

最终，你会把<div id="show"></div>变成得到以下内容：

<div id="show">
    Good morning?
    <script type="text/html" id="how">
        <% if(hello){ %>
            <%=hello.earth%>
        <% } %>
    </script>
    <script type="text/html" id="why">
        <% if(hello){ %>
            <%=hello.world%>
        <% } %>
    </script>
</div>

那么，你就得到了两个可用模板

<script type="text/html" id="how">
    <% if(hello){ %>
        <%=hello.earth%>
    <% } %>
</script>

和

<script type="text/html" id="why">
    <% if(hello){ %>
        <%=hello.world%>
    <% } %>
</script>

你的js代码就可以继续利用这些模板做你想做的事情啦！

但是！在单页面程序不要这样子用， <%- '</scr' + 'ipt>' %> 这种代码使人愕然，在script中嵌套script是非常不利于理解的。为了团队中的其他人能理解你的代码，你最好使用下一种方式！

四、模板抽取出来成为一个单独的文件(这种模式下要求使用gulp、grunt等构建工具，否则无法使用)
d.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="ejs.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="d.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/html" id="what">
        <div id="show"></div>
    </body>
</html>

how.html

<% if(hello){ %>
    <%=hello.earth%>
<% } %>

why.html

<% if(hello){ %>
    <%=hello.world%>
<% } %>

d.js

$(function(){
    var hello = {
        earth:"Good morning?",
        world:"Who are you!"
    }
    var html = ejs.render($('#tpl_how').html(),{hello:hello});
          html += ejs.render($('#tpl_why').html(),{hello:hello});
    $("#show").html(html);
});

以上，就是一些小经验的分享。欢迎拍砖。

Ejs 模板引擎的有限使用原创