使用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. Python的特殊属性和魔法函数

    python中有很多以下划线开头和结尾的特殊属性和魔法函数,它们有着很重要的作用. 1.__doc__:说明性文档和信息,python自建,不需要我们定义. # -*- coding:utf- -*- ...

  2. 看了这篇Dubbo RPC面试题，让天下没有难面的面试题！

      前言: RPC非常重要,很多人面试的时候都挂在了这个地方!你要是还不懂RPC是什么?他的基本原理是什么?你一定要把下边的内容记起来!好好研究一下!特别是文中给出的一张关于RPC的基本流程图,重点中 ...

  3. wx-xcx

    一.因测试小程序,搜索了各种测试小程序的注意点,为方便后续查看,暂时整理罗列如下: 1.留意分享功能的权限:如果某页面对游客访问有权限限制,则需要设置取消其分享功能. 2.小程序强制更新功能:新版小程 ...

  4. 6.HMM

  5. php Tp5下mysql的增删改查

    // 增 public function insert(){ $data = array( "username"=>"user121", "pa ...

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

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

  7. jquery实现下拉菜单

    需要实现的效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  8. 【转】IDEA快捷键功能说明及Eclipse对应操作

    1.Ctrl+z是撤销快捷键 2.如果想恢复Ctrl+z 掉的内容,按快捷键为:Ctrl + Shift + Z.方可 3.Ctrl-H(Browse Type Hierarchy) Ctrl + A ...

  9. mysql 外键问题

    清空.删除具有外键约束的表时报ERROR 1701(42000)的解决 解决方法: 解除外键约束mysql> set foreign_key_checks=0; 删除表后添加外键约束 mysql ...

  10. yum国内镜像配置

    yum默认链接的还是国外的镜像,速度相对不理想,配置成国内的镜像会快很多,这里以阿里镜像为例进行配置: CentOS系统更换软件安装源 #base源#第一步:备份你的原镜像文件,以免出错后可以恢复.m ...