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 字符串。
node.js中的模板引擎jade、handlebars、ejs的更多相关文章
- Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
- nodejs学习(二) ---- express中使用模板引擎jade
系列教程,上一节教程 express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...
- nodeJs学习-09 模板引擎 jade、ejs
模板引擎: jade -破坏式.侵入式,强依赖:用了之后不能随便用别的引擎 ejs - 温和.非侵入时.弱依赖 jade使用 const jade = require('jade'); var str ...
- 学习篇:NodeJS中的模板引擎:jade
NodeJS 模板引擎作用:生成页面 在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系)2.ejs --温和的.非侵入式的.弱依 ...
- Express ( MiddleWare/中间件 路由 在 Express 中使用模板引擎 常用API
A fast, un-opinionated, minimalist web framework for Node.js applications. In general, prefer simply ...
- node.js中express框架的基本使用
express是一个基于node.js平台的,快速,开放,极简的web开发框架. 一.安装 express npm install express --save 二.简单使用 express //引入 ...
- 作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars
作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars 一.为什么需要使用模板引擎? 关于为什么要使用模板引擎,按照我常对学生说的一句话就是:不用重复造轮子.. 简单来说,模板最 ...
- 学废了系列 - WebGL与Node.js中的Buffer
WebGL 和 Node.js 中都有 Buffer 的使用,简单对比记录一下两个完全不相干的领域中 Buffer 异同,加强记忆. Buffer 是用来存储二进制数据的「缓冲区」,其本身的定义和用途 ...
- 第115天:Ajax 中artTemplate模板引擎(一)
一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...
随机推荐
- EF进阶篇(三)——上下文
前言 上下文,到底什么是上下文,且听我仔细吹来. 内容 在对EF实体进行关系操作的时候,第一步需要我们创建上下文实例对象,然后根据实体的变化进而通过上下文对该实体进行状态的修改,我的理解就是上下文就是 ...
- winform发布桌面程序后提示需开启“目录浏览”
把发布文件里的publish.htm名字改为index.htm就好了
- Java FileInputStream与FileReader的区别
在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和R ...
- JDBC的概念&使用步骤
概念: JDBC(Java DataBase Connectivity)是一种数据库连接技术,能实现Java程序对各种数据库的访问.由一组使用Java语言编写的类和接口(JDBC API)组成,他们位 ...
- JDBC_PreparedStatement用法_占位符_参数处理
import java.sql.Connection; import java.sql.Date;import java.sql.DriverManager;import java.sql.Prepa ...
- caffe/proto/caffe.pb.h: No such file or director
caffe编译过程中遇到的为问题: fatal error: caffe/proto/caffe.pb.h: No such file or directory 解决方法: 用protoc从caffe ...
- 极限编程(xp),iso国际标准化组织
极限编程(xp):eXtreme Programming 极限编程-XP 四个价值:沟通 communication.简化 similicity.反馈 feedback.勇气 courage http ...
- [SP1825] Free tour II
/* ----------------------- [题解] https://www.luogu.org/blog/IRving1-1/solution-sp1825 --------------- ...
- Counting Divisors HDU - 6069
设n=p_1^{c_1}p_2^{c_2}...p_m^{c_m}n=p1c1p2c2...pmcm,则d(n^k)=(kc_1+1)(kc_2+1)...( ...
- [微信小程序] -- wxss引用外部css文件及iconfont
小程序引入外部文件的方式是: 只需要在其css文件写上: @import "外部css地址.wxss"; 因为项目需要, 小程序中需要使用iconfont , 很容易就想到了H5的 ...