Cet article présente principalement l'apprentissage rapide des modèles EJS. L'éditeur pense que c'est plutôt bien. Je vais maintenant le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.
Node Il existe de nombreux modèles open source parmi lesquels choisir, mais il est recommandé aux personnes âgées comme moi d'utiliser EJS. Il existe des Classic <.>ASP/PHP /JSP L'expérience avec EJS est en effet très naturelle, c'est-à-dire que vous pouvez organiser le code JavaScript dans le <%...%> ; bloc, en utilisant la méthode la plus traditionnelle <%=output variable %> (de plus, la variable <%-output n'échappera pas aux symboles tels que &). Installation La commande EJS est la suivante :
npm install ejs
Copier après la connexion
Appel JS
Il existe deux méthodes principales appelées par JS :
ejs.compile(str, options);
// => Function
ejs.render(str, options);
// => str
Copier après la connexion
L'EJS réel peut être utilisé indépendamment d'Express, par exemple :
var ejs = require('')， str = require('fs').readFileSync(dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);Copier après la connexion
Voir ejs.render(), le premier paramètre est la
chaîne du modèle, le modèle est le suivant.
<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>Copier après la connexion
les noms deviennent une variable locale.
Paramètres d'option
Le deuxième paramètre est une donnée, généralement un
objet. Et cet objet peut être considéré comme une option, ce qui signifie que les données et la sélection se trouvent toutes deux dans le même objet.
Si vous ne souhaitez pas enregistrer le disque à chaque fois, vous pouvez
mettre en cache le modèle et définir options.filename. Par exemple :
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);Copier après la connexion
Les options associées sont les suivantes :
cache Les fonctions compilées sont mises en cache, nécessitent un nom de fichier
- nom de fichier nom de la clé mise en cache
- portée
portée de la fonctionexécution
- debug Sortie fonction générée body
- compileDebug Lorsque false aucune instrumentation de débogage n'est compilée
- client
Returnfonction compilée autonome
include command
De plus, si vous souhaitez insérer un modèle public comme
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>Copier après la connexion
, c'est , importez un fichier, vous devez définir l'option de nom de fichier pour activer la fonctionnalité d'inclusion, sinon include ne connaîtra pas le répertoire.
Modèle :
<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>Copier après la connexion
EJS prend en charge les modèles compilés. Après la compilation du modèle, il n'y a pas d'opération IO, ce sera très rapide et les variables locales pourront être partagées. L'exemple d'utilisateur/show suivant ignore l'extension ejs :
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>Copier après la connexion
CLOSE TOKEN personnalisé
Si vous prévoyez d'utiliser
{{= title } }
n'est généralement pas la marque <%%> et peut également être personnalisé.
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';Copier après la connexion
Sortie formatée est également disponible.
ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};Copier après la connexion
Appel
<p><%=: users | last %></p>
Copier après la connexion
EJS prend également en charge les environnements de navigateur.
<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>Copier après la connexion
Je me demande si EJS peut générer plusieurs couches d'objets
JSON ?
Au fait, certains internautes ont annoncé que le maître jQ John avait écrit un modèle de 20 lignes il y a quelques années, ce qui est honteux. Il est similaire à EJS mais court et concis !
Moteur de modèles jssimple et pratique
Moteur de modèles js avec moins de 50 lignes, prend en charge diverses syntaxes js :
<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>Copier après la connexion
"<%= xxx =%>" contient du code logique js, "<%== xxx =%>" contient des variables pour une sortie directe, similaire à <🎜 La fonction de PHP de >écho
. "p" est le paramètre de l'objet k-v lors de l'appel de la méthode de construction ci-dessous. Il peut également être défini sur un autre nom de paramètre lors de l'appel de "new JTemp" Appel :
.
Une fois la température ci-dessus générée, la méthode build peut être appelée plusieurs fois pour générer du HTML. Voici le code du moteur de modèle :
$(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);
});Copier après la connexion
L'essentiel est de convertir le code du modèle en une fonction qui épisse des chaînes et d'appeler cette fonction chaque fois que vous obtenez des données.
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;
}();Copier après la connexion
Parce qu'il est principalement utilisé pour les téléphones mobiles (webkit), l'efficacité de l'épissage des chaînes n'est pas prise en compte. S'il doit être utilisé pour IE, il est préférable de changer la méthode d'épissage des chaînes en
Array.
.formulaire push().
Pièce jointe : Un exemple de connect + ejs.
[Recommandations associées]
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');
});
}
}Copier après la connexion
1.
Tutoriel vidéo en ligne js gratuit
2.
Manuel de référence en chinois JavaScript
3.
php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
