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

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

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

jade模板  (express demo)

  1. html
  2.     head
  3.         title #{title}
  4.         meta(charset="UTF-8")
  5.     body
  6.         div.description #{description}
  7.         ul
  8.             - each data in datas
  9.                 li.item(id='item_'+data.index)
  10.                     span= data.time
  11.                     a.art(href=data.url)= data.title

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

handlebars 模版 (express -hbs demo)

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{title}} - Page Test</title>
  6. </head>
  7. <body>
  8.     <div class="description">{{description}}</div>
  9.     <ul>
  10. {{#datas}}
  11.         <li class="item" id="item_{{index}}"><span>{{time}}</span><a href="{{url}}" class="art">{{title}}</a></li>
  12. {{/datas}}
  13.     </ul>
  14.  
  15. </body>
  16. </html>

用起来也是有点不自在

ejs 模版 (node -e demo)

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title><%=title%> - Page Test</title>
  6. </head>
  7. <body>
  8.     <div class="description"><%=description%></div>
  9.     <ul>
  10. <% function data(data) { %>
  11.         <li class="item" id="item_<%=data.index%>"><span><%=data.time%></span><a href="<%=data.url%>" class="art"><%=data.title%></a></li>
  12. <% } %>
  13. <% datas.map(data) %>
  14.     </ul>
  15.  
  16. </body>
  17. </html>

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

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

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

  1. <script>
  2.   var userinfo=<%- userinfo %>;  //后端传的时候JSON.stringify()一下，因为js是动态类型，所以这里可直接得到userinfo对象
  3.  </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. dubbo 面试题

      dubbo是什么 dubbo是一个分布式框架,远程服务调用的分布式框架,其核心部分包含:集群容错:提供基于接口方法的透明远程过程调用,包括多协议支持,以及软负载均衡,失败容错,地址路由,动态配置等 ...

  2. react.js学习之路五

    最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...

  3. HDU6318-2018ACM暑假多校联合训练2-1010-Swaps and Inversions-树状数组

    本题题意是,给你一个长度为n的序列,使用最少的操作把序列转换为从小到大的顺序,并输出操作数*min(x,y) 实质上是算出该序列中有多少逆序对,有归并排序和树状数组两种算法,由于数据之间的差值有点大, ...

  4. MongDB from execCommand not master

    count failed: not master{ , "errmsg" : "not master" } at src/mongo/shell/query.j ...

  5. python3+Django1.11+mysql5.7 MySQL DB API Drivers

    The Python Database API is described in PEP 249. MySQL has three prominent drivers that implement th ...

  6. Phpstudy+WordPress安装详解

    Phpstudy+WordPress安装详解 1.安装phpStudy程序 将下载的phpStudy程序解压到某个分区的根目录中,第一次使用会提示你初始化一下: 之后在主控制界面点击启动即可. php ...

  7. js new关键字 和 this详解

    构造函数 ,是一种特殊的函数.主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中. 构造函数用于创建一类对象,首字母要大写. 构造函数要和new一起 ...

  8. 三个常用的PHP图表类库

    Jpgraph 只要把example中的require_once路径改了就放进来用吧,我下的是最新版的jpgraph-3.5.0b1,反正测试嘛,我记得跟3.0.7还是有差别的,把文件名都重新命名过了 ...

  9. elementtaryos root密码更改

    在elementtaryos 终端中使用root 账户但不幸忘记密码怎么办?请进行如下操作...... 1.进入高级选项选中recovery mode 2.按e编辑,找到recovery nomode ...

  10. mysql ibdata 单独存储

    简介ibdata1 ibdata1文件是InnoDB存储引擎的共享表空间文件,存放位置my.ini 中的 datadir="D:\phpStudy\MySQL\data",目录下. ...