关闭

EJS实例教程详解_ejs模板引擎的使用

时间: 2018-05-22阅读: 3920标签: 模板

Ejs是什么?

ejs是一个款简单的纯js模板引擎,其主要作用是:用来从JSON数据中生成html字符串。


EJS的特性

  • 快速编译与绘制输出
  • 简洁的模板标签:<% %>
  • 自定义分割符(例如:用 <? ?> 替换 <% %>)
  • 引入模板片段
  • 同时支持服务器端和浏览器 JS 环境
  • JavaScript 中间结果静态缓存
  • 模板静态缓存
  • 兼容Express视图系统


EJS的安装

使用npm的形式来安装:

npm install ejs

或者直接引入:

<script src="ejs.js"></script>


EJS的使用

1、实例

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

2、用法

var template = ejs.compile(str, options);
template(data);
// => 输出绘制后的 html 字符串

ejs.render(str, data, options);
// => 输出绘制后的 HTML 字符串

ejs.renderFile(filename, data, options, function(err, str){
    // str => 输出绘制后的 HTML 字符串
});


3、参数

  • cache 缓存编译后的函数,需要提供 filename
  • filename 被 cache 参数用做键值,同时也用于 include 语句
  • context 函数执行时的上下文环境
  • compileDebug 当为 false 时不编译调试语句
  • client 返回独立的编译后的函数
  • delimiter 放在角括号中的字符,用于标记标签的开与闭
  • debug 将生成的函数体输出
  • _with 是否使用 with() {} 结构。如果为 false,所有局部数据将存储在 locals 对象上。
  • localsName 如果不使用 with ,localsName 将作为存储局部变量的对象的名称。默认名称是 locals
  • rmWhitespace 删除所有可安全删除的空白字符,包括开始与结尾处的空格。对于所有标签来说,它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
  • escape 为 <%= 结构设置对应的转义(escape)函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。


4、标签含义

  • <% '脚本' 标签,用于流程控制,无输出。
  • <%_ 删除其前面的空格符
  • <%= 输出数据到模板(输出是转义 HTML 标签)
  • <%- 输出非转义的数据到模板
  • <%# 注释标签,不执行、不输出内容
  • <%% 输出字符串 '<%'
  • %> 一般结束标签
  • -%> 删除紧随其后的换行符
  • _%> 将结束标签后面的空格符删除


5、包含

包含要么是绝对路径,或者如果不是的话,被视为相对于调用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 %>)。


6、自定义分隔符

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

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'


7、缓存

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的新实例。


8、布局

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

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



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/798

关闭

Vue模板语法、事件和表单使用

文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式;JS表达式(计算、拼接、只能是单个表达式)插入HTML代码(慎用!防止XSS攻击 ),我们可以直接在data里面定义html代码

我来聊聊面向模板的前端开发

在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己、发展爱好、陪伴家人,工作、生活两不误

如何选择 Web 前端模板引擎?

模板引擎负责组装数据,以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。无论你是否直接使用模板引擎,Web 模板一直都在,不在前端就在后端,它的出现甚至可以追溯到超文本标记语言 HTML 标准正式确立之前。

面向模板的前端开发

在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己

Bootstrap后台管理模板有哪些?

在开发项目中,后台管理因为面向群体相对比较固定,使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间。下面给大家分享一下最值得拥有的免费Bootstrap后台管理模板

CSS重置默认样式reset.css代码模板

由于各大浏览器存在兼容性问题,同一个CSS属性在不同浏览器下的表现不一定相同,有经验的前端设计者都会自定义一个重置浏览器样式的CSS文件,在这个文件中定义一些针对不同的浏览器最终表现出一致的代码

artTemplate模板引擎的使用

artTemplate是腾讯开源的前端模板框架,和mustache,handlerbars类似,在web项目中可以很方便的使用,上手快,如果用过mustache,那么几乎可以快速切换到template框架上来。

14行实现js原生语法前端模板引擎

今天突发奇想,考虑到eval()中放入自执行函数,而这个闭包又可以直接访问到外部变量,那么经过整理,终极版的模板引擎出炉,代码如下:

Vue模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

Vue模板语法中数据绑定

们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ;通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!