ejs基本語法理解和運用

1、標籤語義

一、基礎標籤

基礎標籤,顧名思義能夠理解爲其餘標籤的基礎,都是在這個標籤上面的拓展,中間的內容數據記得先後要空一格
text前面半部分爲開始標籤,後半部分爲結束標籤
<% text %>
案例css

// 裏面輸入script標籤,用於控制流,沒有輸出
<% var name="測試" %>

輸出須要輸出標籤:html

let html = ejs.render('<% var name="測試" %><%= name %>', {});
document.getElementById('app').innerHTML = html

html代碼部分:前端

<div id="app"></div>

輸出結果展現:
express

二、輸出標籤

將值輸出到模板中,會將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>

輸出結果:
安全

三、清除空格標籤

刪除先後的空格符,不過又多中表達方式,能夠刪除前面,刪除後面,或者刪除先後空格符
**<%_ _%>**服務器

<%_    => // 官方說的是清除前面的空格符
_%>    => // 官方說的是清除結束標籤後面的空格符

這個暫時不知道怎麼用,網上也沒找到使用的例子?有大佬知道能夠指導一下。app

四、無轉義標籤

顧名思義,這個就是將標籤裏面的內容不做轉義輸出,原來是什麼樣,就輸出什麼樣
<%- %>
注意這裏:有個-%>的結束標籤,這個標籤的含義是刪除緊隨其後的換行符
這個標籤通常和include結合使用,用於引入其餘模板塊,好比公共樣式部分函數

let html = ejs.render('<%- "<div>你好啊</div>" %>', {})
document.getElementById('app').innerHTML = html

輸出結果展現:

五、註釋標籤

就跟日常的註釋符相似,只是做爲註釋,不會輸出,也不會執行
<%# "註釋內容" %>

html = ejs.render('<%# "這是一段註釋內容" %><%= "這纔是真正輸出內容" %>', {people: people})
document.getElementById('app').innerHTML = html

展現輸出結果:

六、字符串標籤

輸出字符串用,它會解析html代碼爲字符串,可是會在輸出的字符串先後加上<% %>
<%% %>

html = ejs.render('<%% <div>輸出字符串</div> %>', {people: people})
document.getElementById('app').innerHTML = html

展現結果:

2、基礎語法

一、模板內容渲染

模板內容渲染有兩種方式,一種是上面已經存在的,另一個相似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

展現結果:

二、模板文件渲染

讀取文件,渲染文件裏面的內容,輸出解析後的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)。

3、包含指令

經過 include 指令將相對於模板路徑中的模板片斷包含進來。(須要提供 'filename' 參數。)
語法:<%- include(filename, data) %>
使用報錯了,不知道什麼緣由。

這個我在express的客戶端測試了一下,能夠實現,估計應該是隻能在服務器端實現。

4、自定義分隔符

可針對單個模板或全局使用自定義分隔符,這個分隔符的意思是不用像官方指定使用%來分割,你能夠自定義符號
局部:

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

展現結果:

5、CSS()

快速的引用 CSS 文件,並附上註釋線上 CSS 絕對路徑,便於下游前端使用

<head>
    <title>頁面標題</title>
    <%- css("style-workflow.css") %>
</head>

6、js()

功能與 css() 一致,不復述

7、img()佔位符

佔位圖,能夠指定高、寬,以及 className

<%- img(200, 400, 'block__img') %>

8、text() 佔位文本

生成指定長度的佔位圖,第二個參數爲偏移字數

<span><%- text(10, 3) %></span>
相關文章
相關標籤/搜索