EJS模板引擎

來源:互聯網
上載者:User

標籤:row   提示   pre   led   blog   伺服器   iter   ror   min   

前面的話

  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"></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參數作為緩衝的keyfilename 用於緩衝的key,和includecontext 函數的執行內容compileDebug 輸出compile的資訊來跟蹤調試client 返回編譯後的函數delimiter <% .. %> 指這裡的%debug 輸出ejs.compile()得到函數的函數體strict ejs.compile()返回的函數是否執行在strict 模式_with 是否使用 with(){..} 來訪問本地變數localsName 儲存本地變數的對象名,預設為localsrmWhitespace 移除多餘空格

 

常用標籤

【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

  

EJS模板引擎

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.