zoukankan      html  css  js  c++  java
  • EJS模板引擎

    一、什么是模板引擎?

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

  • 相关阅读:
    Windows系统CMD窗口下,MySQL建库、还原数据库命令操作示例
    Java JPA 报java.lang.IllegalArgumentException: Validation failed for query for method public abstract ...异常的一种原因和解决办法
    MySQL 5.7 执行SQL报错:1055
    Java8使用实现Runnable接口方式创建新线程的方法
    模板方法模式
    策略模式
    观察者模式
    装饰器模式
    原型模式
    单例模式
  • 原文地址:https://www.cnblogs.com/leaf930814/p/6809077.html
Copyright © 2011-2022 走看看