使用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. OC字符串与C语言字符串之间的相互转换

    1.C转OC字符串 const char *cString = "This is a C string"; // 动态方法 NSString *ocString1 = [[NSSt ...

  2. Spring boot进阶-配置Controller、interceptor...

    1.配置SpringBootApplication(对spring boot来说这是最基本) package io.github.syske.springboot31; import org.spri ...

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

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

  4. Qt 学习之路 2（41）：model/view 架构

    Qt 学习之路 2(41):model/view 架构 豆子 2013年1月23日 Qt 学习之路 2 50条评论 有时,我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应 ...

  5. php 替换 oracle 数据字段中“看不见”换行符号

    工作需要,把oracle中的数据导出csv,导出代码如下:<?php$file_name = "申請書承認(予定休出).csv";header("Content-D ...

  6. HDU - 2276 位运算矩阵快速幂

    挺有意思的一道题 要会运用一些常见的位运算操作进行优化 题目的本质就是要求下面的式子 \(dp[i][j+1]=(dp[i-1][j]+dp[i][j]) \mod 2\) (第\(i\)个字符在\( ...

  7. ACM浮点数相关的陷阱

    误差修正 因为被计算机表示浮点数的方式所限制,CPU在进行浮点数计算时会出现误差.如执行0.1 + 0.2 == 0.3结果往往为false,在四则运算中,加减法对精度的影响较小,而乘法对精度的影响更 ...

  8. 在OnActionExecuted 获取请求参数的值(包含类类型)

    1.在OnActionExecuting里 获取请求参数的值 比较简单 /// <summary> /// 获取首参数的值 /// </summary> /// <par ...

  9. Web Worker 案例

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  10. 一个矩阵 JavaScript

    //矩阵运算的函数 ;(function(global){ global.Matrix = { //生成对角矩阵,非零元素都为1 eye : function( n ){ var result = [ ...