Heim > Artikel > Web-Frontend > Tutorial zur Verwendung von EJS-Vorlagen in node.js

Tutorial zur Verwendung von EJS-Vorlagen in node.js

零下一度Original: 2017-05-09 10:08:521050Durchsuche

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 79aa73021005b2524e511c7256dc3d72 Installation Der EJS-Befehl lautet wie folgt: JS-Aufruf Es 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

Zeichenfolge

ejs.compile(str, options); 
// => Function 
 
ejs.render(str, options); 
// => str

der Vorlage, die Vorlage lautet wie folgt.

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

Names wird zu einer lokalen Variablen.

Optionsparameter

<% if (names.length) { %> 
 <ul> 
  <% names.forEach(function(name){ %> 
   <li foo=&#39;<%= name + "&#39;" %>&#39;><%= name %></li> 
  <% }) %> 
 </ul> 
<% } %>

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(&#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);

cache

Kompilierte Funktionen werden zwischengespeichert, erfordern Dateinamen

Dateiname, zwischengespeicherter Schlüsselname
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>

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>

<ul> 
 <% users.forEach(function(user){ %> 
  <% include user/show %> 
 <% }) %> 
</ul>

Wenn Sie 4a249f0d628e2318394fd9b75b4636b1{{= verwenden möchten title } }473f0a7621bec819994bb5020d29372a ist im Allgemeinen nicht die Markierung a4558806285d5b7820bdaa0b90aa4d26 und kann auch angepasst werden.

Formatierte Ausgabe

ist ebenfalls verfügbar.

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

Aufruf

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>

-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(&#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>

Ü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: "35958f859c8521065da73f73d0e69aae" enthält js-Logikcode, "8b95f35e5e88078811040fade31b8cf7" enthält Variablen für die direkte Ausgabe, ähnlich wie PHPs 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 || &#39;&#39;)=%></td> 
  <tr> 
  
<%= 
  } 
=%> 
</script>

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

Array zu ändern

. push()-Formular.

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

Anhang: Ein Beispiel für connect + ejs.

[Verwandte Empfehlungen]
1.

Kostenloses js-Online-Video-Tutorial

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Middleware-Beispiel-Tutorial zum Festlegen von Bildern in NodeJSNächster Artikel：Middleware-Beispiel-Tutorial zum Festlegen von Bildern in NodeJS

In Verbindung stehende Artikel

Mehr sehen