ejs概述

時間 2019-11-15

標籤 ejs 概述简体版

原文原文鏈接

概述

在web項目中渲染頁面，咱們不少時候，會用json或者拼接字符串的方式，不夠美觀，破壞原有html結構，大量的html拼接會使代碼難以閱讀。javascript

ejs是一種nodejs模板引擎，經過數據和模板，能夠生成HTML標記文本。能夠說EJS是一個JavaScript庫，EJS能夠同時運行在客戶端和服務器端，客戶端安裝直接引入文件便可，服務器端用npm包安裝。css

ejs的特色：html

　　一、快速編譯和渲染java

　　二、簡單的模板標籤node

　　三、自定義標記分隔符web

　　四、支持文本包含express

　　五、支持瀏覽器端和服務器端npm

　　六、模板靜態緩存json

　　七、支持express視圖系統瀏覽器

簡單示例

npm install ejs命令安裝EJS

ejs.js。將模板字符串和數據做爲參數傳遞給 EJS，HTML 就出來了。

var ejs = require('ejs'),
    test = ['001', '002', '003'],
    html = ejs.render('<%= test.join(", "); %>', {test: test});

ejs模板文件後綴名 .ejs

ejs默認是開啓模版緩存。這樣在一個頁面中屢次請求模版文件時，只會請求一次

　　可經過代碼設置是否開啓緩存：EJS.config({cache: false});//關閉緩存

基本語法

經常使用方法

ejs.compile(str,[option])

//str指須要解析的字符串模板
//option指配置信息
/*
    cache 緩存編譯後的函數，須要提供 filename
    filename 被 cache 參數用作鍵值，同時也用於 include 語句
    context 函數執行時的上下文環境
    compileDebug 當爲 false 時不編譯調試語句
    client 返回獨立的編譯後的函數
    delimiter 放在角括號中的字符，用於標記標籤的開與閉
    debug 將生成的函數體輸出
    _with 是否使用 with() {} 結構。若是爲 false，全部局部數據將存儲在 locals 對象上。
    localsName 若是不使用 with ，localsName 將做爲存儲局部變量的對象的名稱。默認名稱是 locals
    rmWhitespace 刪除全部可安全刪除的空白字符，包括開始與結尾處的空格。對於全部標籤來講，它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標籤後面的換行符)。
    escape 爲 <%= 結構設置對應的轉義（escape）函數。它被用於輸出結果以及在生成的客戶端函數中經過 .toString() 輸出。(默認轉義 XML)。
*/
var tpl = ejs.compile('<%=test %>');
var result = tpl();
console.log(result);//test

ejs.render(ste,data,[option])
```
//str指須要解析的字符串模板
//data數據
//option同上
var result = ejs.render('<%=test %>');
console.log(result);//test
```
經常使用標籤
- <% '腳本' 標籤，用於流程控制，無輸出。
- <%_ 刪除其前面的空格符
- <%= 輸出數據到模板（輸出是轉義 HTML 標籤）
- <%- 輸出非轉義的數據到模板
- <%# 註釋標籤，不執行、不輸出內容
- <%% 輸出字符串 '<%'
- %> 通常結束標籤
- -%> 刪除緊隨其後的換行符
- _%> 將結束標籤後面的空格符刪除

### 基本語法

變量
變量聲明：<% title="My First Test" %>

變量輸出：<%= title %>

<%- title %>
html標籤屬性
變量定義標籤屬性：<h1 style="<%= style %>"></h1>

循環

<% users=["張三","李四","王五","趙六"] %>
<ul>
   <% for(var item in users){ %>
      <li>
        <%= users[item] %>
      </li>
   <% } %>
</ul>

<% if(isLogin){ %>
    <div class="user">
        <a href="">hello</a>
        <a href="">退出</a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href="">登陸</a>
        <a href="">註冊</a>
    </div>
<% } %>

include

經過 include 指令將相對於模板路徑中的模板片斷包含進來。(須要提供 'filename' 參數。)

<% include 嵌套模板路徑 %>
<% include ./header %>

//head.ejs
    <meta charset="utf-8"/>
    <title><%= title %></title>
    <link rel="styleSheet" type="text/css" href="/css/index.css" />
//index.ejs
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <% include ./head %>
        </head>
        <body>
            <main>
                <div>main content</div>
            </main>
        </body>
    </html>