首页 > 代码库 > EJS模板引擎

EJS模板引擎

一、什么是模板引擎?

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

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

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

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

var data = http://www.mamicode.com/["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 

EJS模板引擎