EJS模板引擎

Posted 2020-09-17 leaf930814

一、什么是模板引擎？

是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的html文档。

常用的模板引擎有ejs 、jade、smarty等。

二、为什么需要模板引擎？

前端开发的时候，经常有根据后台返回的数据，然后根据此数据生成html,最后渲染到页面中。比如：

var data = [
    {name: "leaf1"},
    {name: "leaf2"},
    {name: "leaf3"}
];
function getNameList(data) {
    var html = "";
    html += "<ul>";
    for (var i = 0, len = data.length; i < len; i++) {
        html += "<li>";
        html += data.name;
        html += "</li>";
    }
    html += "</ul>";
    return html;
}　

上面当然只是简单的例子，如果返回的数据很复杂呢？有了ejs模板引擎，我们可以这样

<script id="test" type="text/html">
    <ul>
        <% for (var i = 0; i < list.length; i ++) { %>
        <li><%= list[i].name %></li>
        <% } %>
    </ul>
</script>

　　

三、ejs特点

      快速编译和渲染
　　简单的模板标签
　　自定义标记分隔符
　　支持文本包含
　　支持浏览器端和服务器端
　　模板静态缓存
　　支持express视图系统

四、原理

原理很简单，其实就是拼接字符串，模板引擎就是利用正则表达式识别模板标识，并利用数据代替其中标识符。

//下面是简单的引擎逻辑，真正的模板引擎还要考虑内存、XSS漏洞等问题。
function tmp(str, obj) {
    if (typeof str === \'string\') {
        return str.replace(/<%=\\s*([^%>]+)\\s*%>/g, function() {
            var key = arguments[1];
            return obj[key];
        });
    }
}
var str = "<%= name%>";
var obj = {name: "leaf"};

五、ejs常用标签

<% %>    //流程控制标签
<%= %>  //输出标签（原文输出HTML标签）
<%- %>   //输出标签（HTML会被浏览器解析）
<%# %>  //注释标签
%             //对标记进行转义
-%>          //去掉没用的空格

 

六、利用Express+ejs制作简单页面的小demo

　http://www.cnblogs.com/leaf930814/p/6809853.html