溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

EJS模板引擎

發布時間:2020-07-18 10:38:07 來源:網絡 閱讀:355 作者:zddnd 欄目:網絡安全

nodejs的模板引擎有很多, EJS是比較簡單和容易上手的。本文將詳細介紹EJS

 

概述

  EJS是一個簡單高效的模板語言,通過數據和模板,可以生成HTML標記文本??梢哉fEJS是一個JavaScript庫,EJS可以同時運行在客戶端和服務器端,客戶端安裝直接引入文件即可,服務器端用npm包安裝

【安裝】

  ejs可以配合express框架使用,或直接在node中/瀏覽器中使用

$ npm install ejs

【特點】

  1、快速編譯和渲染

  2、簡單的模板標簽

  3、自定義標記分隔符

  4、支持文本包含

  5、支持瀏覽器端和服務器端

  6、模板靜態緩存

  7、支持express視圖系統

 

用法

EJS模板引擎

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

EJS模板引擎

EJS模板引擎

 

方法

【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如下:

EJS模板引擎

cache 緩存編譯后的函數(ejs.compile(..) ,需要 filename參數作為緩存的key
filename 用于緩存的key,和include
context 函數的執行上下文
compileDebug 輸出compile的信息來跟蹤調試
client 返回編譯后的函數
delimiter <% .. %> 指這里的%debug 輸出ejs.compile()得到函數的函數體
strict ejs.compile()返回的函數是否執行在嚴格模式
_with 是否使用 with(){..} 來訪問本地變量
localsName 保存本地變量的對象名,默認為locals
rmWhitespace 移除多余空格

EJS模板引擎

 

常用標簽

【js】

  所有使用 <% %> 括起來的內容都會被編譯成 Javascript,可以在模版文件中像寫js一樣Coding

EJS模板引擎

//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

EJS模板引擎

  或者,像下面這樣寫

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 可以引用絕對路徑或相對路徑的模板文件

EJS模板引擎

//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);

EJS模板引擎

  由上面的提示可知,使用相對路徑時,必須設置'filename'選項

EJS模板引擎

//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


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

ejs j
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女