時(shí)間：2023-06-06 15:33:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-06-06 15:33:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
高效的嵌入式JavaScript模板引擎-EJS：本文首發(fā)在我的個(gè)人博客中：“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“優(yōu)雅（Elegant）”或者是“簡(jiǎn)單（Easy）”。EJS 是一套簡(jiǎn)單的模板語(yǔ)言，幫你利用普通的 JavaScript 代碼生成 HTML 頁(yè)面。EJS 沒有如何組織內(nèi)容的教條；也沒有再造一套迭代和控制流語(yǔ)法；有的只是普通的 JavaScript 代碼而已。因?yàn)樽罱沂褂玫?code>Hexo博客框架使用到了
在線咨詢
EJS，所以如果想要實(shí)現(xiàn)一些自定義的功能，就需要了解一下EJS。Hexo的文章在這里：Vue驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器，叫做VuePress，特色是可以在Markdown中使用Vue組件，又可以使用Vue來(lái)開發(fā)自定義主題，考慮什么時(shí)候研究一下。npm install ejs<script src="ejs.js"></script>EJS搭建項(xiàng)目，所以我這里就選擇直接引入。html文件樣式如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>測(cè)試ejs</title></head><body><!-- ejs渲染的容器 --><div id="app"></div><!-- 引入ejs --><script src="./ejs.min.js"></script><script> /* 書寫ejs */ let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); /* 將寫好的ejs進(jìn)行渲染 */ document.getElementById('app').innerHTML = html;</script></body></html>跟Vue、React一樣，需要一個(gè)容器，好讓EJS渲染到html上面。EJS，ejs.renderFile和include無(wú)法正常工作。express的后端。package.json文件，創(chuàng)建方法為通過CMD運(yùn)行：npm init然后一路回車，就可以看到文件夾中多出了一個(gè)文件package.json。ejs和express。npm install ejs express nodemon -D然后在package.json同級(jí)目錄下創(chuàng)建index.js。const express = require('express');const ejs = require('ejs');const app = express();/* 路由 */app.get('/', (req, res) => { let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); res.send(html);});/* 監(jiān)聽端口 */app.listen(8080, function () { console.log('開啟服務(wù)成功！');});最后使用nodemon index.js運(yùn)行。localhost:8080就可以看到渲染后的界面了。express搭建的后端環(huán)境上運(yùn)行。let template = ejs.compile(str, options);template(data); // => 輸出渲染后的 HTML 字符串str：需要解析的字符串模板data：數(shù)據(jù)option：配置選項(xiàng)/* 書寫ejs */let html = ejs.compile('<%=123 %>')();/* 將寫好的ejs進(jìn)行渲染 */res.send(html);HTMLejs.render(str, data, options); // => 輸出渲染后的 HTML 字符串str：需要解析的字符串模板data：數(shù)據(jù)option：配置選項(xiàng)/* 書寫ejs */let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people});/* 將寫好的ejs進(jìn)行渲染 */res.send(html);HTMLejs.renderFile(filename, data, options, function(err, str){ // str => 輸出渲染后的 HTML 字符串});str：需要解析的字符串模板data：數(shù)據(jù)option：配置選項(xiàng)let people = ['geddy', 'neil', 'alex'], html = ejs.renderFile('./test.ejs', (err, str) => { res.send(str); });options可以選擇的參數(shù)如下：cache 緩存編譯后的函數(shù)，需要指定 filename。filename 被 cache 參數(shù)用做鍵值，同時(shí)也用于 include 語(yǔ)句。context 函數(shù)執(zhí)行時(shí)的上下文環(huán)境。compileDebug 當(dāng)值為 false 時(shí)不編譯調(diào)試語(yǔ)句。client 返回獨(dú)立的編譯后的函數(shù)。delimiter 放在角括號(hào)中的字符，用于標(biāo)記標(biāo)簽的開與閉。debug 將生成的函數(shù)體輸出。_with 是否使用 with() {} 結(jié)構(gòu)。如果值為 false，所有局部數(shù)據(jù)將存儲(chǔ)在 locals 對(duì)象上。localsName 如果不使用 with ，localsName 將作為存儲(chǔ)局部變量的對(duì)象的名稱。默認(rèn)名稱是 locals。rmWhitespace 刪除所有可安全刪除的空白字符，包括開始與結(jié)尾處的空格。對(duì)于所有標(biāo)簽來(lái)說，它提供了一個(gè)更安全版本的 -%> 標(biāo)簽（在一行的中間并不會(huì)剔除標(biāo)簽后面的換行符)。escape 為 <%= 結(jié)構(gòu)設(shè)置對(duì)應(yīng)的轉(zhuǎn)義（escape）函數(shù)。它被用于輸出結(jié)果以及在生成的客戶端函數(shù)中通過 .toString() 輸出。(默認(rèn)轉(zhuǎn)義 XML)。outputFunctionName 設(shè)置為代表函數(shù)名的字符串（例如 'echo' 或 'print'）時(shí)，將輸出腳本標(biāo)簽之間應(yīng)該輸出的內(nèi)容。async 當(dāng)值為 true 時(shí)，EJS 將使用異步函數(shù)進(jìn)行渲染。（依賴于 JS 運(yùn)行環(huán)境對(duì) async/await 是否支持）。<% ‘腳本’ 標(biāo)簽，用于流程控制，無(wú)輸出。<%_ 刪除其前面的空格符<%= 輸出數(shù)據(jù)到模板（輸出是轉(zhuǎn)義 HTML 標(biāo)簽）<%- 輸出非轉(zhuǎn)義的數(shù)據(jù)到模板<%# 注釋標(biāo)簽，不執(zhí)行、不輸出內(nèi)容<%% 輸出字符串 ‘<%’%> 一般結(jié)束標(biāo)簽-%> 刪除緊隨其后的換行符_%> 將結(jié)束標(biāo)簽后面的空格符刪除include 指令將相對(duì)于模板路徑中的模板片段包含進(jìn)來(lái)。(需要提供 ‘filename‘ 參數(shù)。)fs所以只有在Node環(huán)境中才能生效，也就是說需要搭建一個(gè)Node后端服務(wù)器。let people = ['geddy', 'neil', 'alex'], html = ejs.render(`<%- include('test.ejs') %>`, {filename: 'test.ejs'});let ejs = require('ejs'), users = ['geddy', 'neil', 'alex'];// 單個(gè)模板文件ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});// => 'geddy | neil | alex'// 全局ejs.delimiter = '$';ejs.render('<$= users.join(" | "); $>', {users: users});// => 'geddy | neil | alex'lru-cache 庫(kù)可以很容易地加入 LRU 緩存：let ejs = require('ejs'), LRU = require('lru-cache');ejs.cache = LRU(100); // 具有 100 條內(nèi)容限制的 LRU 緩存如果要清除 EJS 緩存，調(diào)用 ejs.clearCache 即可。如果你正在使用的是 LRU 緩存并且需要設(shè)置不同的限額，則只需要將 ejs.cache 重置為 一個(gè)新的 LRU 實(shí)例即可。fs.readFileSync，如果你想要的自定義它, 設(shè)置ejs.fileLoader 即可。let ejs = require('ejs');let myFileLoader = function (filePath) { return 'myFileLoader: ' + fs.readFileSync(filePath);};ejs.fileLoader = myFileLoad;使用此功能，您可以在讀取模板之前對(duì)其進(jìn)行預(yù)處理。<%- include('header'); -%><h1> Title</h1><p> My page</p><%- include('footer'); -%>EJS上手還是非常簡(jiǎn)單的，但是有些高級(jí)用法就比較難了，因?yàn)?code>EJS對(duì)于我來(lái)說不算很實(shí)用，所以就不過多的進(jìn)行研究了，如果有用到，再研究也不遲。Nodejs搭建的后端中可能會(huì)用到EJS，但是前端項(xiàng)目一般不會(huì)使用EJS。EJS最方便的地方就是在于將項(xiàng)目給別人使用的時(shí)候，人家不用過多的去了解你的代碼，直接修改配置文件就可以達(dá)到自己想要的效果。比如說Hexo中的配置都集中在_config.yml這個(gè)文件中，你根本不需要去一行一行的瀏覽源代碼，就可以實(shí)現(xiàn)修改，達(dá)到你想要的效果。關(guān)鍵詞：模板,引擎
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
