纯 JavaScript
æä»¬çç± JavaScriptï¼ä»æ¯ä¸é¨å好çç¼ç¨è¯è¨ãæææ¨¡æ¿è¯è¨é½è¦æé¿ä¸ºå¾çµå®å¤çè¯è¨ï¼ä¹å°±æ¯è¯´è¦å¢å ä¸ä¸ªä¸é´å±ãä½å¿ å¢ï¼ç´æ¥ç¨ JS å§ï¼
âEâ 代表ä»ä¹ï¼å¯ä»¥è¡¨ç¤º âå¯åµå ¥ï¼Embeddedï¼âï¼ä¹å¯ä»¥æ¯â髿ï¼Effectiveï¼âãâä¼é ï¼Elegantï¼âæè æ¯âç®åï¼Easyï¼âãEJS æ¯ä¸å¥ç®åçæ¨¡æ¿è¯è¨ï¼å¸®ä½ å©ç¨æ®éç JavaScript 代ç çæ HTML 页é¢ãEJS 没æå¦ä½ç»ç»å å®¹çææ¡ï¼ä¹æ²¡æåé ä¸å¥è¿ä»£åæ§å¶æµè¯æ³ï¼æçåªæ¯æ®éç JavaScript 代ç èå·²ã
æä»¬çç± JavaScriptï¼ä»æ¯ä¸é¨å好çç¼ç¨è¯è¨ãæææ¨¡æ¿è¯è¨é½è¦æé¿ä¸ºå¾çµå®å¤çè¯è¨ï¼ä¹å°±æ¯è¯´è¦å¢å ä¸ä¸ªä¸é´å±ãä½å¿ å¢ï¼ç´æ¥ç¨ JS å§ï¼
æ éæµªè´¹æ¶é´é»ç é£äºæè°âä¼é âçç¥ç§è¯æ³ï¼ä¹ä¸ç¨ç ç©¶æ°æ®ç©¶ç«å¦ä½è½å¤è¢«æ£ç¡®å¤çã
EJS æ¯æç´æ¥å¨æ ç¾å 书åç®åãç´ç½ç JavaScript 代ç ãåªé让 JavaScript è¾åºä½ æéè¦ç HTML ï¼å®æå·¥ä½å¾è½»æ¾ï¼
æä»¬é½ç¥é V8 以å类似 JavaScript 弿çé度æå¤å¿«ãEJS è½å¤ç¼å JS 彿°çä¸é´ä»£ç ï¼ä»èæåæ§è¡é度ã
è°è¯ EJS é误ï¼errorï¼å¾å®¹æï¼ææéè¯¯é½æ¯æ®éç JavaScript å¼å¸¸ï¼å¹¶ä¸è¿è½è¾åºå¼å¸¸åççä½ç½®ã
EJS è忝ä¸ä¸ªæ´»è·ç¨æ·ç»æçå¤§è§æ¨¡ç¤¾åºï¼è½å¤ä¸º EJS çæ¼è¿æä¾å¤§åæ¯æãæä»¬åæ¶å¾é«å ´åçä½ çé®é¢ææä¾å¸®å©ã
å©ç¨ NPM å®è£ EJS å¾ç®åã
$ npm install ejs
å°æ¨¡æ¿å符串åä¸äºæ°æ®ä½ä¸ºåæ°ä¼ éç» EJSï¼Duangï¼HTML åºæ¥äºã
let ejs = require('ejs'),
people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});
ä»è¿éä¸è½½ ææ°çæµè§å¨çæ¬ï¼ç¶åå¼å ¥é¡µé¢å³å¯ã
<script src="ejs.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
let template = ejs.compile(str, options);
template(data);
// => è¾åºæ¸²æåç HTML å符串
ejs.render(str, data, options);
// => è¾åºæ¸²æåç HTML å符串
ejs.renderFile(filename, data, options, function(err, str){
// str => è¾åºæ¸²æåç HTML å符串
});
cache ç¼åç¼è¯åç彿°ï¼éè¦æå® filenamefilename 被 cache åæ°ç¨åé®å¼ï¼åæ¶ä¹ç¨äº include è¯å¥context 彿°æ§è¡æ¶çä¸ä¸æç¯å¢compileDebug å½å¼ä¸º false æ¶ä¸ç¼è¯è°è¯è¯å¥client è¿åç¬ç«çç¼è¯åç彿°delimiter æ¾å¨è§æ¬å·ä¸çå符ï¼ç¨äºæ è®°æ ç¾çå¼ä¸édebug å°çæç彿°ä½è¾åº_with æ¯å¦ä½¿ç¨ with() {} ç»æã妿å¼ä¸º falseï¼ææå±é¨æ°æ®å°åå¨å¨ locals 对象ä¸ãlocalsName 妿ä¸ä½¿ç¨ with ï¼localsName å°ä½ä¸ºåå¨å±é¨åéç对象çåç§°ãé»è®¤åç§°æ¯ localsrmWhitespace å 餿æå¯å®å
¨å é¤ç空ç½å符ï¼å
æ¬å¼å§ä¸ç»å°¾å¤çç©ºæ ¼ãå¯¹äºæææ ç¾æ¥è¯´ï¼å®æä¾äºä¸ä¸ªæ´å®å
¨çæ¬ç -%> æ ç¾ï¼å¨ä¸è¡çä¸é´å¹¶ä¸ä¼å餿 ç¾åé¢çæ¢è¡ç¬¦)ãescape 为 <%= ç»æè®¾ç½®å¯¹åºç转ä¹ï¼escapeï¼å½æ°ãå®è¢«ç¨äºè¾åºç»æä»¥åå¨çæç客æ·ç«¯å½æ°ä¸éè¿ .toString() è¾åºã(é»è®¤è½¬ä¹ XML)ãoutputFunctionName è®¾ç½®ä¸ºä»£è¡¨å½æ°åçå符串ï¼ä¾å¦ 'echo' æ 'print'ï¼æ¶ï¼å°è¾åºèæ¬æ ç¾ä¹é´åºè¯¥è¾åºçå
容ãasync å½å¼ä¸º true æ¶ï¼EJS å°ä½¿ç¨å¼æ¥å½æ°è¿è¡æ¸²æãï¼ä¾èµäº JS è¿è¡ç¯å¢å¯¹ async/await æ¯å¦æ¯æï¼<% 'èæ¬' æ ç¾ï¼ç¨äºæµç¨æ§å¶ï¼æ è¾åºã<%_ å é¤å
¶åé¢çç©ºæ ¼ç¬¦<%= è¾åºæ°æ®å°æ¨¡æ¿ï¼è¾åºæ¯è½¬ä¹ HTML æ ç¾ï¼<%- è¾åºé转ä¹çæ°æ®å°æ¨¡æ¿<%# æ³¨éæ ç¾ï¼ä¸æ§è¡ãä¸è¾åºå
容<%% è¾åºå符串 '<%'%> ä¸è¬ç»ææ ç¾-%> å é¤ç´§éå
¶åçæ¢è¡ç¬¦_%> å°ç»ææ ç¾åé¢çç©ºæ ¼ç¬¦å é¤éè¿ include æä»¤å°ç¸å¯¹äºæ¨¡æ¿è·¯å¾ä¸ç模æ¿ç段å
å«è¿æ¥ã(éè¦æä¾ 'filename' åæ°ã) ä¾å¦ï¼å¦æåå¨ "./views/users.ejs" å "./views/user/show.ejs" ä¸¤ä¸ªæ¨¡æ¿æä»¶ï¼ä½ å¯ä»¥éè¿ <%- include('user/show'); %> 代ç å
å«åè
ã
ä½ å¯è½éè¦è½å¤è¾åºåå§å
å®¹çæ ç¾ (<%-) ç¨äº include æä»¤ï¼é¿å
对è¾åºç HTML 代ç å转ä¹å¤çã
<ul>
<% users.forEach(function(user){ %>
<%- include('user/show', {user: user}); %>
<% }); %>
</ul>
å¯é对åä¸ªæ¨¡æ¿æå ¨å±ä½¿ç¨èªå®ä¹åé符ï¼
let ejs = require('ejs'),
users = ['geddy', 'neil', 'alex'];
// åä¸ªæ¨¡æ¿æä»¶
ejs.render('<?= users.join(" | "); ?>', {users: users},
{delimiter: '?'});
// => 'geddy | neil | alex'
// å
¨å±
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'
EJS é带äºä¸ä¸ªåºæ¬çè¿ç¨å ç¼åï¼ç¨äºç¼å¨æ¸²ææ¨¡æ¿è¿ç¨ä¸æçæçä¸´æ¶ JavaScript 彿°ã éè¿ Node ç `lru-cache` åºå¯ä»¥å¾å®¹æå°å å ¥ LRU ç¼åï¼
let ejs = require('ejs'),
LRU = require('lru-cache');
ejs.cache = LRU(100); // å
·æ 100 æ¡å
容éå¶ç LRU ç¼å
å¦æè¦æ¸
é¤ EJS ç¼åï¼è°ç¨ ejs.clearCache å³å¯ãå¦æä½ æ£å¨ä½¿ç¨çæ¯
LRU ç¼åå¹¶ä¸éè¦è®¾ç½®ä¸åçéé¢ï¼ååªéè¦å° `ejs.cache` é置为
ä¸ä¸ªæ°ç LRU å®ä¾å³å¯ã
é»è®¤çæä»¶å è½½å¨æ¯ fs.readFileSyncï¼å¦æä½ æ³è¦çèªå®ä¹å®,
设置ejs.fileLoader å³å¯ã
let ejs = require('ejs');
let myFileLoader = function (filePath) {
return 'myFileLoader: ' + fs.readFileSync(filePath);
};
ejs.fileLoader = myFileLoad;
ä½¿ç¨æ¤åè½ï¼æ¨å¯ä»¥å¨è¯»å模æ¿ä¹åå¯¹å ¶è¿è¡é¢å¤çã
EJS å¹¶æªå¯¹åï¼blocksï¼æä¾ä¸é¨çæ¯æï¼ä½æ¯å¯ä»¥éè¿ å å«é¡µçåé¡µèæ¥å®ç°å¸å±ï¼å¦ä¸æç¤ºï¼
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
ä»latest release 龿¥ä¸è½½
./ejs.js æ ./ejs.min.js æä»¶ãæè
ï¼ä½ å¯ä»¥ clone è¿ä¸ªä»åºå¹¶
éè¿æ§è¡ jake build èªå·±ç¼è¯ï¼æè
æ§è¡ $(npm bin)/jake buildï¼å¦æ jake
䏿¯å®è£
å¨å
¨å±ç¯å¢çè¯ï¼ã
å¨é¡µé¢ä¸å
å«ä¸é¢çä»»æä¸ä¸ªæä»¶ï¼ç¶å ejs å°±å
¨å±å¯ç¨äº
<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});
// With jQuery:
$('#output').html(html);
// Vanilla JS:
document.getElementById('output').innerHTML = html;
</script>
大夿°æ åµä¸ï¼EJS å°ä¼æç §æä»¬ç颿è¿è¡; 使¯, ä»ç¶éè¦æ³¨æï¼
let str = "Hello <%= include('file', {person: 'John'}); %>",
fn = ejs.compile(str, {client: true});
fn(data, null, function(path, d){ // include callback
// path -> 'file'
// d -> {person: 'John'}
// Put your code here
// Return the contents of file as a string
}); // returns rendered string
æ¤ GitHub Wiki é¡µé¢ ä»ç»äºå ç§å Express ä¼ é EJS åæ°çæ¹å¼ã
Ask questions about specific problems you have faced, including details about what exactly you are trying to do. Make sure you tag your question with ejs. You can also read through existing ejs questions.
The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.
EJS is licensed under the Apache License, version 2.0. Information can found here: http://www.apache.org/licenses/.