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
Nach dem Login kopieren
Eigentliches EJS kann unabhängig von Express verwendet werden, zum Beispiel:
Siehe ejs.render(), der erste Parameter ist die
Zeichenfolge
ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str
Nach dem Login kopieren
der Vorlage, die Vorlage lautet wie folgt.
var ejs = require('')， str = require('fs').readFileSync(dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);Nach dem Login kopieren
Names wird zu einer lokalen Variablen.
Optionsparameter
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>Nach dem Login kopieren
Der zweite Parameter sind Daten, normalerweise ein
Objekt. Und dieses Objekt kann als Option betrachtet werden, was bedeutet, dass sich sowohl die Daten als auch die Auswahl im selben Objekt befinden.
Wenn Sie die Festplatte nicht jedes Mal speichern möchten, können Sie
die -Vorlage zwischenspeichern und options.filename festlegen. Zum Beispiel:
Die zugehörigen Optionen lauten wie folgt:
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);Nach dem Login kopieren
cache
Kompilierte Funktionen werden zwischengespeichert, erfordern Dateinamen
-
Dateiname, zwischengespeicherter Schlüsselname
Umfang - Funktionsumfang
Ausführung
Debug-Ausgabe der generierten Funktion body
- Zurückgeben
s eigenständige kompilierte Funktion
include command
Außerdem, wenn Sie eine öffentliche Vorlage wie
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>Nach dem Login kopieren
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:
Customized CLOSE TOKEN
<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>Nach dem Login kopieren
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>Nach dem Login kopieren
Wenn Sie
{{= verwenden möchten title } }
ist im Allgemeinen nicht die Markierung <%%> und kann auch angepasst werden.
Formatierte Ausgabe
ist ebenfalls verfügbar.
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';Nach dem Login kopieren
Aufruf
EJS unterstützt auch Browserumgebungen.
ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};Nach dem Login kopieren
Ich frage mich, ob EJS mehrere Ebenen von
JSON
<p><%=: users | last %></p>
Nach dem Login kopieren
-Objekten ausgeben kann?
<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>Nach dem Login kopieren
Übrigens haben einige Internetnutzer die Nachricht verbreitet, dass jQ-Meister John vor ein paar Jahren eine 20-Zeilen-Vorlage geschrieben hat, die EJS ähnelt, aber kurz und prägnant ist!
Einfache und praktische js
Vorlagen-Engine
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 „
new
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>Nach dem Login kopieren
Aufruf:
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);
});Nach dem Login kopieren
Array zu ändern
. 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;
}();Nach dem Login kopieren
Anhang: Ein Beispiel für connect + ejs.
[Verwandte Empfehlungen]
1.
Kostenloses js-Online-Video-Tutorial
var 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');
});
}
}Nach dem Login kopieren
2.
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!
