zoukankan      html  css  js  c++  java
  • node.js中的模板引擎jade、handlebars、ejs

      使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使用ejs,选它是因为跟Asp.Net的模板引擎有点相似吧。

       网上有过这三个模板引擎万行数据渲染比较,耗时结果 Jade 287ms > ejs 43ms > Handlebars 28ms

      先来看一下这几个模板引擎:

    jade模板  (express demo)

    html
        head
            title #{title}
            meta(charset="UTF-8")
        body
            div.description #{description}
            ul
                - each data in datas
                    li.item(id='item_'+data.index)
                        span= data.time
                        a.art(href=data.url)= data.title

    就看起来干净,引入缩进,丧失了html该有的灵活性

    handlebars 模版 (express -hbs demo)

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>{{title}} - Page Test</title>
    </head>
    <body>
        <div class="description">{{description}}</div>
        <ul>
    {{#datas}}
            <li class="item" id="item_{{index}}"><span>{{time}}</span><a href="{{url}}" class="art">{{title}}</a></li>
    {{/datas}}
        </ul>
    
    </body>
    </html>

    用起来也是有点不自在

    ejs 模版 (node -e demo)

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title><%=title%> - Page Test</title>
    </head>
    <body>
        <div class="description"><%=description%></div>
        <ul>
    <% function data(data) { %>
            <li class="item" id="item_<%=data.index%>"><span><%=data.time%></span><a href="<%=data.url%>" class="art"><%=data.title%></a></li>
    <% } %>
    <% datas.map(data) %>
        </ul>
    
    </body>
    </html>

      虽然看起来乱点,但是便于直接书写自己的逻辑,适合于个人项目,如果真的有代码洁癖,可以考虑把服务器端书句赋值给前端js,在浏览器端渲染数据

    <script> 
      var name = '<%=name%>';  // name是字符串
      var str='<%- JSON.stringify(userinfo) %>';  //userinfo是对象
      var userino=JSON.parse(str);
     </script>

    这种方式也可做一下变形,在服务器端传过来的时候就先把对象转化成字符串

    <script> 
      var userinfo=<%- userinfo %>;  //后端传的时候JSON.stringify()一下,因为js是动态类型,所以这里可直接得到userinfo对象
     </script>

    以上两种方式同样适合于handlebars模板引擎

    • <% code %>:  JavaScript 代码。 
    • <%= code %>:显示替换过 HTML 特殊字符的内容。 相当于handlebars中的 {{{ code }}},不希望被编码的Html
    • <%- code %>: 显示原始 HTML 内容。 相当于handlebars中的 {{ code }},经过编码的HTML

      <%= code %> 和  <%- code %> 的区别,当变量 code 为普通字符串时,两者没有区别。当 code 比如为  <h1>hello</h1> 这种字符串时, <%= code %> 会原样输出  <h1>hello</h1> ,而  <%- code %> 则会显示 H1 大的 hello 字符串。

  • 相关阅读:
    IE 11 使用 flexbox 垂直居中 bug
    Electron build 无法下载 winCodeSign 等资源
    Electron 开发环境下总是 crash
    解决 Electron 包下载太慢问题
    Netty--数据通信和心跳检测
    Netty编解码技术和UDP实现
    Netty入门
    Java 网络IO编程(BIO、NIO、AIO)
    java.util.concurrent常用类(CountDownLatch,Semaphore,CyclicBarrier,Future)
    JDK多任务执行框架(Executor框架)
  • 原文地址:https://www.cnblogs.com/xbblogs/p/8443022.html
Copyright © 2011-2022 走看看