Maison >interface Web >js tutoriel >Explication détaillée des exemples de moteurs de modèles EJS

Explication détaillée des exemples de moteurs de modèles EJS

零下一度original: 2017-06-24 14:51:543768parcourir

前面的话

　　nodejs的模板引擎有很多， EJS是比较简单和容易上手的。本文将详细介绍EJS

概述

　　EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装

【安装】

　　ejs可以配合express框架使用，或直接在node中/浏览器中使用

$ npm install ejs

【特点】

　　1、快速编译和渲染

　　2、简单的模板标签

　　3、自定义标记分隔符

　　4、支持文本包含

　　5、支持浏览器端和服务器端

　　6、模板静态缓存

　　7、支持express视图系统

用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1"></div>
<script src="ejs.min.js?1.1.11"></script>
<script>var html = ejs.render('<%=123 %>','');
    document.getElementById('div1').innerHTML = html;</script>
</body>
</html>

方法

【ejs.compile(str,[option])】

　　编译字符串得到模板函数，参数如下

str：需要解析的字符串模板
option：配置选项

var template = ejs.compile('<%=123 %>');var result = template();
console.log(result);//123

【ejs.render(str,data,[option])】

　　直接渲染字符串并生成html，参数如下

str：需要解析的字符串模板
data：数据
option：配置选项

var result = ejs.render('<%=123 %>');
console.log(result);//123

　　两个函数包括的配置选项参数options如下：

cache 缓存编译后的函数(ejs.compile(..) ,需要 filename参数作为缓存的key
filename 用于缓存的key，和include
context 函数的执行上下文
compileDebug 输出compile的信息来跟踪调试
client 返回编译后的函数
delimiter <% .. %> 指这里的%debug 输出ejs.compile()得到函数的函数体
strict ejs.compile()返回的函数是否执行在严格模式
_with 是否使用 with(){..} 来访问本地变量
localsName 保存本地变量的对象名，默认为locals
rmWhitespace 移除多余空格

常用标签

【js】

　　所有使用 <% %> 括起来的内容都会被编译成 Javascript，可以在模版文件中像写js一样Coding

//test.ejs<% var a = 123 %>
<% console.log(a); %>//test.jsvar ejs = require('ejs');var fs = require('fs');var data = fs.readFileSync('test.ejs');var result = ejs.render(data.toString());
console.log(result);//123

　　或者，像下面这样写

var ejs = require('ejs');var result = ejs.render('<% var a = 123 %><%console.log(a); %>');
console.log(result);//123

【变量】

　　用<%=...%>输出变量，变量若包含 '<' '>' '&'等字符会被转义

var ejs = require('ejs');var result = ejs.render('<%=a%>',{a:'<div>123</div>'});
console.log(result);//&lt;div&gt;123&lt;/div&gt;

　　如果不希望变量值的内容被转义，那就这么用<%-... %>输出变量

var ejs = require('ejs');var result = ejs.render('<%-a%>',{a:'<div>123</div>'});
console.log(result);//<div>123</div>

【注释】

　　用<%# some comments %>来注释，不执行不输出

【include】

　　include 可以引用绝对路径或相对路径的模板文件

//test.ejs<% var a = 123 %>
<% console.log(a); %>//test.jsvar ejs = require('ejs');var result = ejs.render('<% include test.ejs %>');//throw new Error('`include` use relative path requires the \'filename\' option.');console.log(result);

　　由上面的提示可知，使用相对路径时，必须设置'filename'选项

//test.ejs<% var a = 123 %>
<% console.log(a); %>//test.jsvar ejs = require('ejs');var result = ejs.render('<% include test.ejs %>',{filename:'test.ejs'});
console.log(result);//123

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de tutoriel pour installer nodejs et npm sous LinuxArticle suivant：Exemple de tutoriel pour installer nodejs et npm sous Linux

Articles Liés

Voir plus