recherche

Maison >interface Web >js tutoriel >Tutoriel sur l'utilisation des modèles EJS dans node.js

Tutoriel sur l'utilisation des modèles EJS dans node.js

零下一度
零下一度original
2017-05-09 10:08:521102parcourir

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 9a2972ec1de573adbe5cc011a6f5bab0 (de plus, la variable c13d4b78c36746aa86db89fafe005a2d{{= title } }473f0a7621bec819994bb5020d29372a n'est généralement pas la marque a4558806285d5b7820bdaa0b90aa4d26 et peut également être personnalisé. 

 var ejs = require(&#39;ejs&#39;); 
ejs.open = &#39;{{&#39;; 
ejs.close = &#39;}}&#39;;

Sortie formatée est également disponible. 

 ejs.filters.last = function(obj) { 
 return obj[obj.length - 1]; 
};
Appel 

<p><%=: users | last %></p>
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>
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>
"35958f859c8521065da73f73d0e69aae" contient du code logique js, "8b95f35e5e88078811040fade31b8cf7" contient des variables pour une sortie directe, similaire à é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); 
});

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; 
}();

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;);   
    }); 
  } 
}

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de tutoriel middleware pour définir des images dans nodejsArticle suivant：Exemple de tutoriel middleware pour définir des images dans nodejs

Articles Liés

Voir plus