使用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 字符串。

node.js中的模板引擎jade、handlebars、ejs的更多相关文章

  1. Jade —— 源于 Node.js 的 HTML 模板引擎

    2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读  ·  读完需要 69 分钟 ...

  2. nodejs学习（二） ---- express中使用模板引擎jade

    系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...

  3. nodeJs学习-09 模板引擎 jade、ejs

    模板引擎: jade -破坏式.侵入式,强依赖:用了之后不能随便用别的引擎 ejs - 温和.非侵入时.弱依赖 jade使用 const jade = require('jade'); var str ...

  4. 学习篇：NodeJS中的模板引擎：jade

    NodeJS 模板引擎作用:生成页面 在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...

  5. Express ( MiddleWare/中间件 路由 在 Express 中使用模板引擎 常用API

    A fast, un-opinionated, minimalist web framework for Node.js applications. In general, prefer simply ...

  6. node.js中express框架的基本使用

    express是一个基于node.js平台的,快速,开放,极简的web开发框架. 一.安装 express npm install express --save 二.简单使用 express //引入 ...

  7. 作为一名前端开发工程师，你必须掌握的WEB模板引擎：Handlebars

    作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars 一.为什么需要使用模板引擎? 关于为什么要使用模板引擎,按照我常对学生说的一句话就是:不用重复造轮子..   简单来说,模板最 ...

  8. 学废了系列 - WebGL与Node.js中的Buffer

    WebGL 和 Node.js 中都有 Buffer 的使用,简单对比记录一下两个完全不相干的领域中 Buffer 异同,加强记忆. Buffer 是用来存储二进制数据的「缓冲区」,其本身的定义和用途 ...

  9. 第115天：Ajax 中artTemplate模板引擎（一）

    一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...

随机推荐

  1. CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速

    ease: 1.ease:(逐渐变慢)默认值 2.linear:(匀速) 3.ease-in:(加速) 4.ease-out:(减速) 5.ease-in-out:(加速然后减速) 6.cubic-b ...

  2. 【bzoj4720】[Noip2016]换教室 期望dp+最短路

    Description 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节 课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内容相同的 ...

  3. [Swift]八大排序算法（七）：归并排序

    排序分为内部排序和外部排序. 内部排序:是指待排序列完全存放在内存中所进行的排序过程,适合不太大的元素序列. 外部排序:指的是大文件的排序,即待排序的记录存储在外存储器上,待排序的文件无法一次装入内存 ...

  4. Spark JavaRDD、JavaPairRDD、Dataset之间的相互转换

    主要内容: 1. JavaRDD to JavaPairRDD 2. Dataset to JavaPairRDD 3. JavaPairRDD to JavaRDD 4. JavaRDD to Da ...

  5. SDUT OJ 数据结构实验之链表二：逆序建立链表

    数据结构实验之链表二:逆序建立链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...

  6. Qt C++ libcaffe.so无法调用

    在用QT编写调用caffe的工程时,发现一直有个错误: error while loading shared libraries libcaffe.so.1.0.0-rc3: cannot open ...

  7. 14. 异步加载Js的方式有哪些？

    我们都知道渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染,如下: <script type="text/javascript" src=". ...

  8. audiosprite的使用

    github地址: https://github.com/tonistiigi/audiosprite 使用方法: http://www.jikexueyuan.com/course/2510_2.h ...

  9. Call requires API level 11 (current min is 8)报错

    新建一个Android Application Project,其中MainActivity.java中报错如下 Call requires API level 11(current min is 8 ...

  10. mysql 导入 导出

    mysql导入导出sql文件   window下 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u dbuser -p dbname ...