In diesem Artikel wird hauptsächlich das schnelle Erlernen von EJS-Vorlagen vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf 🎜>ASP
/PHP /JSP Die Erfahrung mit EJS ist in der Tat sehr natürlich, das heißt, Sie können JavaScript-Code im <%...%> anordnen ;-Block mit der traditionellsten Methode <%=output %> Installation Der EJS-Befehl lautet wie folgt: JS-AufrufEs gibt zwei Hauptmethoden, die von JS aufgerufen werden:
npm install ejs
Eigentliches EJS kann unabhängig von Express verwendet werden, zum Beispiel:
Siehe ejs.render(), der erste Parameter ist die
Zeichenfolgeejs.compile(str, options); // => Function ejs.render(str, options); // => str
var ejs = require('')， str = require('fs').readFileSync(dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>Objekt. Und dieses Objekt kann als Option betrachtet werden, was bedeutet, dass sich sowohl die Daten als auch die Auswahl im selben Objekt befinden.
die -Vorlage zwischenspeichern und options.filename festlegen. Zum Beispiel:
var ejs = require('../')
, fs = require('fs')
, path = dirname + '/functions.ejs'
, str = fs.readFileSync(path, 'utf8');
var users = [];
users.push({ name: 'Tobi', age: 2, species: 'ferret' })
users.push({ name: 'Loki', age: 2, species: 'ferret' })
users.push({ name: 'Jane', age: 6, species: 'ferret' })
var ret = ejs.render(str, {
users: users,
filename: path
});
console.log(ret);Kompilierte Funktionen werden zwischengespeichert, erfordern Dateinamen
Ausführung
s eigenständige kompilierte Funktion
einfügen möchten Wenn Sie eine Datei importieren möchten, müssen Sie die Option „Dateiname“ festlegen, um die Include-Funktion zu aktivieren. Andernfalls kennt Include das Verzeichnis nicht.
Vorlage:
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>EJS unterstützt kompilierte Vorlagen. Nach der Vorlagenkompilierung sind keine E/A-Vorgänge mehr erforderlich, die Verarbeitung ist sehr schnell und lokale Variablen können gemeinsam genutzt werden. Der folgende Beispielbenutzer/die folgende Beispielshow ignoriert die EJS-Erweiterung:
<h1>Users</h1>
<% function user(user) { %>
<li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li>
<% } %>
<ul>
<% users.map(user) %>
</ul><ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>
Formatierte Ausgabe
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';EJS unterstützt auch Browserumgebungen.
ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};Ich frage mich, ob EJS mehrere Ebenen von
JSON<p><%=: users | last %></p>
<html>
<head>
<script src="../ejs.js"></script>
<script id="users" type="text/template">
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li><%= name %></li>
<% }) %>
</ul>
<% } %>
</script>
<script>
onload = function(){
var users = document.getElementById('users').innerHTML;
var names = ['loki', 'tobi', 'jane'];
var html = ejs.render(users, { names: names });
document.body.innerHTML = html;
}
</script>
</head>
<body>
</body>
</html>js-Vorlagen-Engine mit weniger als 50 Zeilen, unterstützt verschiedene js-Syntax: "<%= xxx =%>" enthält js-Logikcode, "<%== xxx =%>" enthält Variablen für die direkte Ausgabe, ähnlich wie PHPs <🎜 Die Funktion von >echo
. „p“ ist der k-v-Objektparameter beim Aufruf der Build-Methode unten. Er kann auch auf einen anderen Parameternamen festgelegt werden, wenn „
JTemp“ aufgerufen wird.
<script id="test_list" type="text/html">
<%=
for(var i = 0, l = p.list.length; i < l; i++){
var stu = p.list[i];
=%>
<tr>
<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
<td><%==stu.age=%></td>
<td><%==(stu.address || '')=%></td>
<tr>
<%=
}
=%>
</script>Nachdem die obige Temperatur generiert wurde, kann die Build-Methode mehrmals aufgerufen werden, um HTML zu generieren. Das Folgende ist der Code der Vorlagen-Engine:
Der Kern besteht darin, den Vorlagencode in eine Funktion zum Spleißen von Zeichenfolgen umzuwandeln und diese Funktion jedes Mal aufzurufen, wenn Sie Daten erhalten. Da es hauptsächlich für Mobiltelefone (Webkit) verwendet wird, wird die Effizienz des String-Splicings nicht berücksichtigt. Wenn es für IE verwendet werden muss, ist es am besten, die String-Splicing-Methode in$(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'张三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});. push()-Formular.
var JTemp = function(){
function Temp(htmlId, p){
p = p || {};//配置信息，大部分情况可以缺省
this.htmlId = htmlId;
this.fun;
this.oName = p.oName || 'p';
this.TEMP_S = p.tempS || '<%=';
this.TEMP_E = p.tempE || '=%>';
this.getFun();
}
Temp.prototype = {
getFun : function(){
var _ = this,
str = $('#' + _.htmlId).html();
if(!str) _.err('error: no temp!!');
var str_ = 'var ' + _.oName + '=this,f=\'\';',
s = str.indexOf(_.TEMP_S),
e = -1,
p,
sl = _.TEMP_S.length,
el = _.TEMP_E.length;
for(;s >= 0;){
e = str.indexOf(_.TEMP_E);
if(e < s) alert(':( ERROR!!');
str_ += 'f+=\'' + str.substring(0, s) + '\';';
p = _.trim(str.substring(s+sl, e));
if(p.indexOf('=') !== 0){//js语句
str_ += p;
}else{//普通语句
str_ += 'f+=' + p.substring(1) + ';';
}
str = str.substring(e + el);
s = str.indexOf(_.TEMP_S);
}
str_ += 'f+=\'' + str + '\';';
str_ = str_.replace(/\n/g, '');//处理换行
var fs = str_ + 'return f;';
this.fun = Function(fs);
},
build : function(p){
return this.fun.call(p);
},
err : function(s){
alert(s);
},
trim : function(s){
return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,"");
}
};
return Temp;
}();Anhang: Ein Beispiel für connect + ejs.
Kostenloses js-Online-Video-Tutorialvar Step = require('../../libs/step'),
_c = require('./utils/utils'),
fs = require('fs'),
ejs = require('ejs'),
connect = require('connect');
exports.loadSite = function(request, response){
var siteRoot = 'C:/代码存档/sites/a.com.cn';
// _c.log(request.headers.host);
var url = request.url;
// 如果有 html 的则是动态网页，否则为静态内容
if(url == '/' || ~url.indexOf('/?') || url.indexOf('.asp') != -1 || url[url.length - 1] == '/'){
var tplPath;
if(url == '/' || ~url.indexOf('/?') || url[url.length - 1] == '/'){
// 默认 index.html
tplPath = siteRoot + request.url + 'default.asp';
}else{
tplPath = siteRoot + request.url.replace(/\?.*$/i,''); // 只需要文件名
}
// 从文件加载模板
Step(function(){
_c.log('加载模板：' + tplPath);
fs.exists(tplPath, this);
}, function(path_exists){
if(path_exists === true)fs.readFile(tplPath, "utf8", this);
else if(path_exists === false) response.end404(request.url);
else response.end500('文件系统异常', '');
},function(err, tpl){
var bigfootUrl, cssUrl, projectState = 0; // 0 = localhot/ 1 = Test Server / 2 = Deployed
switch(projectState){
case 0:
bigfootUrl = "http://127.0.0.1/bigfoot/";
cssUrl = "http://127.0.0.1/lessService/?isdebug=true";
break;
case 1:
bigfootUrl = "http://112.124.13.85:8080/static/";
cssUrl = "/asset/style/";
break;
case 2:
bigfootUrl = "http://localhost:8080/bigfoot/";
break;
}
var sitePath = request.getLevelByUrl(require(siteRoot + '/public/struct')),
first = sitePath[0];
var htmlResult = ejs.render(tpl, {
filename : tplPath,
bigfootUrl: bigfootUrl,
cssUrl : cssUrl,
projectState: projectState,
query_request: request.toJSON(),
request: request,
config: require(siteRoot + '/public/config'),
struct: require(siteRoot + '/public/struct'),
sitePath : sitePath,
firstLevel : first
});
// _c.log(first.children.length)
response.end200(htmlResult);
});
}else{
connect.static(siteRoot)(request, response, function(){
// if not found...
response.writeHead(404, {'Content-Type': 'text/html'});
response.end('404');
});
}
}JavaScript Chinese Reference Manual
3. php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial
Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von EJS-Vorlagen in node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
