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(&#39;&#39;)， str = require(&#39;fs&#39;).readFileSync(dirname + &#39;/list.ejs&#39;, &#39;utf8&#39;); 
 
var ret = ejs.render(str, { 
 names: [&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;] 
}); 
 
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=&#39;<%= name + "&#39;" %>&#39;><%= 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(&#39;../&#39;) 
 , fs = require(&#39;fs&#39;) 
 , path = dirname + &#39;/functions.ejs&#39; 
 , str = fs.readFileSync(path, &#39;utf8&#39;);  
var users = []; 
users.push({ name: &#39;Tobi&#39;, age: 2, species: &#39;ferret&#39; }) 
users.push({ name: &#39;Loki&#39;, age: 2, species: &#39;ferret&#39; }) 
users.push({ name: &#39;Jane&#39;, age: 6, species: &#39;ferret&#39; }) 
 
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(&#39;ejs&#39;); 
ejs.open = &#39;{{&#39;; 
ejs.close = &#39;}}&#39;;

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(&#39;users&#39;).innerHTML; 
    var names = [&#39;loki&#39;, &#39;tobi&#39;, &#39;jane&#39;]; 
    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 || &#39;&#39;)=%></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(&#39;test_list&#39;), 
    html = temp.build( 
      {list:[ 
          {name:&#39;张三&#39;, age:13, address:&#39;北京&#39;}, 
        {name:&#39;李四&#39;, age:17, address:&#39;天津&#39;}, 
        {name:&#39;王五&#39;, age:13} 
      ]}); 
  $(&#39;table&#39;).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 || &#39;p&#39;; 
    this.TEMP_S = p.tempS || &#39;<%=&#39;; 
    this.TEMP_E = p.tempE || &#39;=%>&#39;; 
    this.getFun(); 
  } 
  Temp.prototype = { 
    getFun : function(){ 
      var _ = this, 
        str = $(&#39;#&#39; + _.htmlId).html(); 
      if(!str) _.err(&#39;error: no temp!!&#39;); 
      var str_ = &#39;var &#39; + _.oName + &#39;=this,f=\&#39;\&#39;;&#39;, 
        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(&#39;:( ERROR!!&#39;); 
        str_ += &#39;f+=\&#39;&#39; + str.substring(0, s) + &#39;\&#39;;&#39;; 
        p = _.trim(str.substring(s+sl, e)); 
        if(p.indexOf(&#39;=&#39;) !== 0){//js语句 
          str_ += p; 
        }else{//普通语句 
          str_ += &#39;f+=&#39; + p.substring(1) + &#39;;&#39;; 
        } 
        str = str.substring(e + el); 
        s = str.indexOf(_.TEMP_S); 
      } 
      str_ += &#39;f+=\&#39;&#39; + str + &#39;\&#39;;&#39;; 
      str_ = str_.replace(/\n/g, &#39;&#39;);//处理换行 
      var fs = str_ + &#39;return f;&#39;; 
      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(&#39;../../libs/step&#39;), 
  _c = require(&#39;./utils/utils&#39;), 
  fs = require(&#39;fs&#39;), 
  ejs = require(&#39;ejs&#39;), 
  connect = require(&#39;connect&#39;); 
 
exports.loadSite = function(request, response){ 
  var siteRoot = &#39;C:/代码存档/sites/a.com.cn&#39;; 
  // _c.log(request.headers.host); 
   
  var url = request.url; 
  // 如果有 html 的则是动态网页，否则为静态内容 
  if(url == &#39;/&#39; || ~url.indexOf(&#39;/?&#39;) || url.indexOf(&#39;.asp&#39;) != -1 || url[url.length - 1] == &#39;/&#39;){ 
    var tplPath; 
     
    if(url == &#39;/&#39; || ~url.indexOf(&#39;/?&#39;) || url[url.length - 1] == &#39;/&#39;){ 
      // 默认 index.html 
      tplPath = siteRoot + request.url + &#39;default.asp&#39;; 
    }else{ 
      tplPath = siteRoot + request.url.replace(/\?.*$/i,&#39;&#39;); // 只需要文件名 
    } 
 
    // 从文件加载模板 
    Step(function(){ 
      _c.log(&#39;加载模板：&#39; + 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(&#39;文件系统异常&#39;, &#39;&#39;); 
    },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 + &#39;/public/struct&#39;)), 
        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 + &#39;/public/config&#39;), 
        struct: require(siteRoot + &#39;/public/struct&#39;), 
        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, {&#39;Content-Type&#39;: &#39;text/html&#39;}); 
      response.end(&#39;404&#39;);   
    }); 
  } 
}

Copier après la connexion

Tutoriel vidéo en ligne js gratuit

Manuel de référence en chinois JavaScript

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!