一、標簽語義
1、基礎標簽
基礎標簽，顧名思義可以理解為其他標簽的基礎，都是在這個標簽上面的拓展，中間的內容數據記得前后要空一格
text前面半部分為開始標簽，后半部分為結束標簽
<% text %>
案例
// 里面輸入script標簽，用於控制流，沒有輸出
<% var name="測試" %>
輸出需要輸出標簽：
let html = ejs.render('<% var name="測試" %><%= name %>', {});
document.getElementById('app').innerHTML = html
html代碼部分：
<div id="app"></div>
輸出結果展示：
2、輸出標簽
將值輸出到模板中，會將html轉義，輸出的是解析過后的html字符串
<%= name %>
案例
let people = ['geddy', 'neil', 'alex']
html = ejs.render('<%= people.join(" | "); %>', {people: people})
document.getElementById('app').innerHTML = html
html代碼部分：
<div id="app"></div>
輸出結果：
3、清除空格標簽
刪除前后的空格符，不過又多中表達方式，可以刪除前面，刪除后面，或者刪除前后空格符
<%_ _%>
<%_ => // 官方說的是清除前面的空格符
_%> => // 官方說的是清除結束標簽后面的空格符
這個暫時不知道怎么用，網上也沒找到使用的例子？有大佬知道可以指導一下。
4、無轉義標簽
顧名思義，這個就是將標簽里面的內容不作轉義輸出，原來是什么樣，就輸出什么樣
<%- %>
注意這里：有個-%>的結束標簽，這個標簽的含義是刪除緊隨其后的換行符
這個標簽一般和include結合使用，用於引入其他模板塊，比如公共樣式部分
let html = ejs.render('<%- "<div>你好啊</div>" %>', {})
document.getElementById('app').innerHTML = html
輸出結果展示：
5、注釋標簽
就跟平常的注釋符類似，只是作為注釋，不會輸出，也不會執行
<%# "注釋內容" %>
html = ejs.render('<%# "這是一段注釋內容" %><%= "這才是真正輸出內容" %>', {people: people})
document.getElementById('app').innerHTML = html
展示輸出結果：
6、字符串標簽
輸出字符串用，它會解析html代碼為字符串，但是會在輸出的字符串前后加上<% %>
<%% %>
html = ejs.render('<%% <div>輸出字符串</div> %>', {people: people})
document.getElementById('app').innerHTML = html
展示結果：
二、基礎語法
1、模板內容渲染
模板內容渲染有兩種方式，一種是上面已經存在的，另外一個類似art-template
render
輸出的是解析后的html字符串
語法:ejs.render(str,data,options)
| 參數 | 參數說明 |
|---|---|
| str | 這個是用來渲染的數據展示區域 |
| data | 這個是渲染的數據,可以是對象或者數組 |
| opstions | 這是個額外的參數配置,可以省略,詳見后面 |
let peoples = ['geddy', 'neil', 'alex']
let html = ejs.render('<%= peoples.join(" | ") %>', peoples)
document.getElementById('app').innerHTML = html
輸出展示結果：
compile
輸出的是解析后的html字符串
語法:ejs.compile(str,options);
| 參數 | 參數說明 |
|---|---|
| str | 這個是用來渲染的數據展示區域 |
| opstions | 這是個額外的參數配置,可以省略,詳見后面 |
let people = ['geddy', 'neil', 'alex']
let template = ejs.compile('<%= people.join(" | ") %>')
let html = template(people)
document.getElementById('app').innerHTML = html
展示結果：
2、模板文件渲染
讀取文件，渲染文件里面的內容，輸出解析后的html字符串
renderFile()
語法:ejs.renderFile(filename,data,options,function(err,str){})
| 參數 | 參數說明 |
|---|---|
| str | 這個是用來渲染的數據展示區域 |
| data | 這個是渲染的數據,可以是對象或者數組 |
| opstions | 這是個額外的參數配置,可以省略,詳見后面 |
| filename | 這個是需要讀取渲染的文件路徑,官方真是坑爹 |
| err | 讀取渲染失敗的提示 |
現在我們創建一個file文件，用來讀取
file.html
<div id="file">
<p>登錄名:<%= name %></p>
<p>登錄密碼:<%= pwd %></p>
</div>
返回原文件
let people = ['geddy', 'neil', 'alex']
ejs.renderFile('./file.html',{name: 'root',pwd: '123456'},function (err, str) {
if (err) {
console.log(err)
} else {
alert(str)
document.getElementById('app').innerHTML = str
}
})
這個報錯了，不知道什么原因，返回了err，難道是ejs.min.js不支持這種模式
展示結果：
options參數說明
| 參數 | 參數說明 |
|---|---|
| cache | 緩存編譯后的函數，需要提供 filename |
| filename | 被 cache 參數用做鍵值，同時也用於 include 語句 |
| context | 函數執行時的上下文環境 |
| compileDebug | 當為 false 時不編譯調試語句 |
| client | 返回獨立的編譯后的函數 |
| delimiter | 放在角括號中的字符，用於標記標簽的開與閉 |
| debug | 將生成的函數體輸出 |
| _with | 是否使用 with() {} 結構。如果為 false，所有局部數據將存儲在 locals 對象上 |
| localsName | 如果不使用 with ，localsName 將作為存儲局部變量的對象的名稱。默認名稱是 locals |
| rmWhitespace | 刪除所有可安全刪除的空白字符，包括開始與結尾處的空格。對於所有標簽來說，它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標簽后面的換行符) |
| escape | 為 <%= 結構設置對應的轉義（escape）函數。它被用於輸出結果以及在生成的客戶端函數中通過 .toString() 輸出。(默認轉義 XML)。 |
三、包含指令
通過 include 指令將相對於模板路徑中的模板片段包含進來。(需要提供 'filename' 參數。)
語法:<%- include(filename, data) %>
使用報錯了，不知道什么原因。
這個我在express的客戶端測試了一下，可以實現，估計應該是只能在服務器端實現。
四、自定義分隔符
可針對單個模板或全局使用自定義分隔符，這個分隔符的意思是不用像官方指定使用%來分割，你可以自定義符號
局部：
ejs.render('<?=people.join(" | "); ?>', {people: people}, {delimiter: '?'});
全局：
ejs.delimiter = '$';
ejs.render('<$= people.join(" | "); $>', {people: people});
沒有聲明delimiter時：
let people = ['geddy', 'neil', 'alex']
let html = ejs.render('<$= people.join(" | ") $>',{people: people})
document.getElementById('app').innerHTML = html
展示結果：
有delimiter聲明時：
let people = ['geddy', 'neil', 'alex']
let html = ejs.render('<$= people.join(" | ") $>',{people: people}, {delimiter: '$'})
document.getElementById('app').innerHTML = html
展示結果：
五、CSS()
快速的引用 CSS 文件，並附上注釋線上 CSS 絕對路徑，便於下游前端使用
<head>
<title>頁面標題</title>
<%- css("style-workflow.css") %>
</head>
六、js()
功能與 css() 一致，不復述
七、img()占位符
占位圖，可以指定高、寬，以及 className
<%- img(200, 400, 'block__img') %>
八、text() 占位文本
生成指定長度的占位圖，第二個參數為偏移字數
<span><%- text(10, 3) %></span>