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 

  • 相关阅读:
    phone8 inapp purchasing
    Delegate,Action,Func,匿名方法,匿名委托,事件
    get a full screen popup to work on WP8
    as3.0动态文本大全
    actionScript 3 殿堂之路 第四章 学习收获
    java中的switch case
    Silverlight的DataGrid导出文档
    ArcGIS教程大全
    同步异步请求区别
    XML操作,XPath语法
  • 原文地址:https://www.cnblogs.com/leaf930814/p/6809077.html
Copyright © 2011-2022 走看看