搜尋

首頁 >web前端 >js教程 >node.js中EJS 範本的使用教學

node.js中EJS 範本的使用教學

零下一度
零下一度原創
2017-05-09 10:08:521064瀏覽

這篇文章主要介紹了EJS 範本快速入門學習，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

Node 開源模板的選擇很多，但推薦像我這樣的老人去用EJS，有Classic ASP/PHP /JSP 的經驗用起EJS 來的確可以很自然，也就是說，你能夠在9613d184b92a8db8e14f8dcd66cf91f2 區塊中安排JavaScript 程式碼，利用最傳統的方式2c870724d3a297a1b592de2beb9a818a（另外70fb8b5e97ad28096ab6fdce1752fef9{{= title }}< ;/h1> 般非a4558806285d5b7820bdaa0b90aa4d26標識，也可以自訂的。 

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

格式化輸出也可以哦。 

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

呼叫

<p><%=: users | last %></p>

EJS 也支援瀏覽器環境。 

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

不知道 EJS 能否輸出多層 JSON 物件呢？

對了，有網友爆料說，jQ 大神 John 若干年前寫過 20 行的模板，汗顏，與 EJS 相似但短小精悍！

簡單實用的js範本引擎

#不足50 行的js 範本引擎，支援各種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」內是js 邏輯程式碼，「8b95f35e5e88078811040fade31b8cf7」內是直接輸出的變量，類似php 的echo 的作用。 「p」是呼叫下面build 方法時的k-v 物件參數，也可以在呼叫「new JTemp」時設定成別的參數名稱

呼叫：

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

上面的temp 產生以後，可以多次呼叫build 方法，產生html。以下是模板引擎的程式碼：

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

核心是將模板程式碼轉換成了拼接字串的 function，每次拿資料 call 這個 function。

因為主要是給手機（webkit）用的，所以沒有考慮字串拼接的效率問題，如果需要給IE 使用，最好將字串拼接方法改為Array. push() 的形式。

附：connect + ejs 的範例。 

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. 免費js線上影片教學

2. JavaScript中文參考手冊

#3. php.cn獨孤九賤（3）－JavaScript影片教學

#

以上是node.js中EJS 範本的使用教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：nodejs中設定圖片的中間件實例教程下一篇：nodejs中設定圖片的中間件實例教程

相關文章

看更多