EJS 中文文档

简介: 译者:飞龙 来源:ejs嵌入式 JavaScript 模板安装$ npm install ejs特性 用于控制流 用于转义的输出 用于非转义的输出-%> 结束...

译者:飞龙

来源:ejs

嵌入式 JavaScript 模板

安装

$ npm install ejs

特性

  • <% %> 用于控制流
  • <%= %> 用于转义的输出
  • <%- %> 用于非转义的输出
  • -%> 结束标签用于换行移除模式
  • 带有<%_ _%>的控制流使用空白字符移除模式
  • 自定义分隔符 (例如,使用 ‘

示例

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

用法

var template = ejs.compile(str, options);
template(data);
// => 渲染 HTML 字符串

ejs.render(str, data, options);
// => 渲染 HTML 字符串

你也可以使用快捷方式 ejs.render(dataAndOptions); ,其中你可以通过一个对象来传递任何东西。在这种情况下,你需要以一个装有所有需要传递对象的本地变量结束。

选项

  • cache 编译过的函数会被缓存,需要filename
  • filenamecache用做缓存的键,用于包含
  • context 函数执行的上下文
  • compileDebug 如果为false,不会编译调试用的工具
  • client 返回独立的编译后的函数
  • delimiter 开启或者闭合尖括号所用的字符
  • debug 输出生成的函数体
  • _with 是否使用 with() {} 结构。如果为 false 则局部数据会储存在 locals 对象中。
  • rmWhitespace 移除所有可以安全移除的空白字符,包含前导和尾后的空白字符。同时会为所有scriptlet标签开启-%>换行截断的更加安全的模式。(它不会在一行之中去除标签的换行)。

标签

  • <% ‘Scriptlet’ 标签, 用于控制流,没有输出
  • <%= 向模板输出值(带有转义)
  • <%- 向模板输出没有转义的值
  • <%# 注释标签,不执行,也没有输出
  • <%% 输出字面的 ‘<%’
  • %> 普通的结束标签
  • -%> Trim-mode (‘newline slurp’) 标签, 移除随后的换行符

包含

包含要么是绝对路径,或者如果不是的话,被视为相对于调用include的模板的路径(需要filename选项)。 例如,你在./views/users.ejs中包含./views/user/show.ejs,你应该使用<%- include('user/show') %>

你可能会用到原始输出标签(<%-)避免二次转义HTML输出。

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}) %>
  <% }); %>
</ul>

包含的内容在运行时插入, 所以你可以在include调用中使用变量作为路径(例如<%- include(somePath) %>)。在你顶级数据对象中的变量都可以用于所有的包含,而局部变量需要传递进来。

注意:仍然支持包含预处理指令(<% include user/show %>)。

自定义分隔符

自定义分隔符可以以模板为单位应用,或者全局:

var ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'

// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

缓存

EJS 自带了一个基本的运行时缓存,用于缓存渲染模板的中介JavaScript函数。使用 Node 的 lru-cache 库来添加LRU缓存十分简单:

var ejs = require('ejs')
  , LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit

如果你想清除ejs的缓存,调用ejs.clearCache。如果你需要以一个不同的限额来使用LRU,只需要将ejs.cache重新设置为一个LRU的新实例。

布局

EJS 不会特别地支持区块,但是可以采用包含头部和尾部的方法来实现局部,像这样:

<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

客户端支持

访问最新发布,下载
./ejs.js 或者 ./ejs.min.js

选择其一包含到你的页面中,并且使用 ejs.render(str)

相关项目

EJS 有许多实现:

协议

Apache License, Version 2.0

相关文章
|
14天前
|
JavaScript 前端开发 Go
8 大博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比
探索各类博客引擎:Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman的对比,包括语言、模板引擎、速度、社区活跃度等。了解每种引擎的优缺点,助你选择合适的博客构建工具。查看详细文章以获取更多实战和安装指南。
|
3月前
|
存储 开发工具 git
我为什么选择 Wiki.js 记笔记?
我为什么选择 Wiki.js 记笔记?
|
9月前
|
JavaScript 前端开发 小程序
Vue 富文本编辑器tinymce的安装教程(前端必备小知识)
Vue 富文本编辑器tinymce的安装教程(前端必备小知识)
229 1
|
前端开发 JavaScript 关系型数据库
Egg.js快速入门(2)
Egg.js快速入门(2)
122 0
|
开发框架 JavaScript 关系型数据库
Egg.js快速入门(1)
Egg.js快速入门(1)
119 0
egg.js入门导航:安装使用与学习
egg.js入门导航:安装使用与学习
191 0
egg.js入门导航:安装使用与学习
|
开发框架 前端开发 JavaScript
Egg.js快速入门
Egg.js快速入门
176 0
|
JavaScript 前端开发 安全
为什么Discourse选择ember.js
Discourse的推出在整个社区赚足了眼球,由于Discourse选择使用Ember.JS作为前端MVC框架,这促使Ember.JS也成为了热议的话题。一年多以前SproutCore2正式改名为Ember.JS后,本人持续的关注了Ember.JS的开发过程,见证着Ember.JS的成长。Ember.JS的API在整个社区共同协作的基础上日趋稳定,Ember.JS 1.0.rc1的推出,更是标着其API已经成熟。我相信越来越多基于Ember.JS实现的优秀的应用,将会像雨后春笋般涌现出来。
128 0
为什么Discourse选择ember.js
|
SQL JSON 开发框架
学习 | egg.js 从入门到精通
使用脚手架,对项目进行快速初始化
13353 0
|
前端开发 JavaScript
skrollr.js中文教程
skrollr.js是一款轻量级且强大的js库,关于这款js库的相关的详细教程却不多。 所以这里根据国内一些大神们的笔记和skrollr官方文档进行总结,方便自己以后查阅,也方便大家学习。
3697 0