node.js 에서 EJS 템 플 릿 빠 른 입문 튜 토리 얼

11424 단어 ejs 템 플 릿입문 하 다
Node 오픈 소스 템 플 릿 의 선택 은 매우 많 지만 저 같은 노인 이 사용 하 는 것 을 추천 합 니 다EJS.Classic ASP/PHP/JSP 경험 이 있 으 면 EJS 를 사용 하면 자 연 스 럽 습 니 다.즉,<%...%>블록 에 자 바스 크 립 트 코드 를 배치 하고 가장 전통 적 인 방식 으로<%=출력 변 량%>(또한<%-출력 변 수 는&등 기 호 를 바 꾸 지 않 습 니 다).EJS 설치 명령 은 다음 과 같 습 니 다.

npm install ejs
JS 호출
JS 호출 방법 은 주로 두 가지 가 있 습 니 다.

ejs.compile(str, options); 
// => Function 
 
ejs.render(str, options); 
// => str
실제로 EJS 는 Express 에서 독립 적 으로 사용 할 수 있 습 니 다.예 를 들 어:

var ejs = require('')， str = require('fs').readFileSync(__dirname + '/list.ejs', 'utf8'); 
 
var ret = ejs.render(str, { 
 names: ['foo', 'bar', 'baz'] 
}); 
 
console.log(ret);
ejs.render()를 보십시오.첫 번 째 매개 변 수 는 템 플 릿 의 문자열 입 니 다.템 플 릿 은 다음 과 같 습 니 다.

<% if (names.length) { %> 
 <ul> 
  <% names.forEach(function(name){ %> 
   <li foo='<%= name + "'" %>'><%= name %></li> 
  <% }) %> 
 </ul> 
<% } %>
names 가 로 컬 변수 가 되 었 습 니 다.
옵션 매개 변수
두 번 째 매개 변 수 는 데이터 이 고 보통 대상 입 니 다.이 대상 은 옵션 으로 볼 수 있다.즉,데이터 와 선택 이 모두 같은 대상 에 있다 는 것 이다.
매번 디스크 를 만 들 지 않 으 려 면 캐 시 템 플 릿 이 필요 합 니 다.options.filename 을 설정 하 십시오.  됐다.예 를 들 면:

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);
관련 옵션 은 다음 과 같 습 니 다.
  • cache Compiled functions are cached, requires filename
  • filename 캐 시 키 이름
  • scope 함수 가 실행 하 는 역할 영역
  • debug Output generated function body
  • compileDebug When false no debug instrumentation is compiled
  • client Returns standalone compiled function
    • inculde 명령 어
    그리고
    
<ul>
 <% users.forEach(function(user){ %>
  <% include user/show %>
 <% }) %>
</ul>
    일반적으로 공공 템 플 릿 을 삽입 합 니 다.즉,파일 을 도입 하 는 것 입 니 다.filename 옵션 을 설정 해 야 include 기능 을 시작 할 수 있 습 니 다.그렇지 않 으 면 include 는 디 렉 터 리 를 알 수 없습니다.
    템 플 릿:
    
<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>
    EJS 는 컴 파일 템 플 릿 을 지원 합 니 다.템 플 릿 을 컴 파일 한 후에 IO 작업 이 없 으 면 매우 빠 르 고 로 컬 변 수 를 공용 할 수 있 습 니 다.다음 예 user/show 는 ejb 확장 자 를 무시 합 니 다:
    
<ul> 
 <% users.forEach(function(user){ %> 
  <% include user/show %> 
 <% }) %> 
</ul>
    사용자 정의 닫 기 TOKEN

    {=title}}

    과 같이<%%>표 지 를 사용 하려 면 사용자 정의 할 수 있 습 니 다.
    
 var ejs = require('ejs'); 
ejs.open = '{{'; 
ejs.close = '}}';
    포맷 출력 도 가능 합 니 다.
    
 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('users').innerHTML; 
    var names = ['loki', 'tobi', 'jane']; 
    var html = ejs.render(users, { names: names }); 
    document.body.innerHTML = html; 
   } 
  </script> 
 </head> 
 <body> 
 </body> 
</html>
    EJS 가 다 층 JSON 대상 을 출력 할 수 있 을 지 모 르 겠 습 니 다.
    참,한 네티즌 은 jQ 대신 존 이 몇 년 전에 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 || '')=%></td> 
  <tr> 
  
<%= 
  } 
=%> 
</script>
    '<%=xxx=%>'내 에 서 는 js 논리 코드,'%==xxx=%'내 에 서 는 직접 출력 하 는 변수 로 php 의 echo 와 유사 한 역할 을 합 니 다.'p"는 아래 build 방법 을 호출 할 때의 k-v 대상 매개 변수 이 며,"new JTP"를 호출 할 때 다른 매개 변수 이름 으로 설정 할 수 있 습 니 다.
    호출:
    
$(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); 
});
    위의 temp 생 성 후 build 방법 을 여러 번 호출 하여 html 를 생 성 할 수 있 습 니 다.다음은 템 플 릿 엔진 의 코드 입 니 다.
    
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(/
    /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; 
}();
    핵심 은 템 플 릿 코드 를 문자열 을 연결 하 는 function 으로 바 꾸 는 것 입 니 다.매번 데이터 콜 이라는 function 을 가 져 옵 니 다.
    주로 휴대 전화(webkit)에 사용 되 기 때문에 문자열 맞 춤 법의 효율 성 을 고려 하지 않 았 으 며,IE 에 사용 할 필요 가 있다 면 문자열 맞 춤 법 을 Array.push()형식 으로 바 꾸 는 것 이 좋다.
    첨부:connect+ejs 의 한 예.
    
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');   
    }); 
  } 
}
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    C\#DataSet 의 내용 을 XML 로 쓸 때 필드 데 이 터 를 포맷 하 는 방법
    상세 설명 은 node-images 로 간단 한 이미지 서버 만 들 기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage