멋진 커뮤니티 모듈

EJS

임베디드 JavaScript 템플릿

빌드 상태 종속성 개발 알려진 취약점

설치

1
$ npm install ejs

풍모

  • 제어 흐름 <% %>
  • 이스케이프 출력 <%= %>(이스케이프 기능 구성 가능)
  • 이스케이프되지 않은 원시 출력 <%- %>
  • -%>끝 태그가있는 줄 바꿈 자르기 모드 ( '줄 바꿈 슬러 핑')
  • 제어 흐름을위한 공백 자르기 모드 (모두 공백 제거) <%_ _%>
  • 맞춤 구분 기호 (예 : <? ?>대신 사용 <% %>)
  • 포함
  • 클라이언트 측 지원
  • 중간 JavaScript의 정적 캐싱
  • 템플릿의 정적 캐싱
  • Express 뷰 시스템을 준수 합니다.

1 2 3
<% if (user) { %> <h2><%= user.name %></h2> <% } %>

https://ionicabizau.github.io/ejs-playground/ 에서 EJS를 온라인으로 사용해보십시오 .

용법

1 2 3 4 5 6 7 8 9 10
let template = ejs.compile(str, options); template(data); // => Rendered HTML string ejs.render(str, data, options); // => Rendered HTML string ejs.renderFile(filename, data, options, function(err, str){ // str => Rendered HTML string });

ejs.render(dataAndOptions);단일 객체에서 모든 것을 전달 하는 경우 에도 사용할 수 있습니다 .이 경우 전달 된 모든 옵션에 대한 로컬 변수가 생성됩니다. 그러나 동일한 옵션을 추가하면 코드가 손상 될 수 있습니다. 이름을 데이터 개체의 속성 중 하나로 사용하므로이 바로 가기를 사용하지 않는 것이 좋습니다.

옵션

  • cache 컴파일 된 함수는 캐시되며 filename
  • filename 렌더링되는 파일의 이름입니다 renderFile().를 사용하는 경우에는 필요하지 않습니다 . cache키 캐시 및 포함에 사용됩니다.
  • root 절대 경로 (/file.ejs)가있는 포함에 대한 프로젝트 루트를 설정합니다.
  • context 함수 실행 컨텍스트
  • compileDebugfalse디버그 계기가 컴파일되지 않습니다
  • clienttrue경우 EJS 런타임 ( ejs.min.js ) 을로드 할 필요없이 브라우저에서 렌더링 할 수있는 함수를 컴파일합니다 .
  • delimiter 열기 / 닫기를 위해 꺾쇠 괄호와 함께 사용할 문자
  • debug 출력 생성 함수 본문
  • strict 로 설정하면 true생성 된 함수가 엄격 모드입니다.
  • _withwith() {}구문 을 사용할지 여부 입니다. false그러면 로컬이 locals객체에 저장 false됩니다. 엄격 모드로 설정 합니다.
  • localsNamewith기본값을 사용하지 않을 때 로컬 변수를 저장하는 객체에 사용할 이름locals
  • rmWhitespace 선행 및 후행 공백을 포함하여 안전하게 제거 할 수있는 공백을 모두 제거합니다. 또한 -%>모든 스크립틀릿 태그에 대해 더 안전한 버전의 줄 슬러 핑을 활성화 합니다 (줄 중간에있는 새 태그 줄을 제거하지 않음).
  • escape<%=구성 과 함께 사용되는 이스케이프 함수 . 렌더링에 사용되며 .toString()클라이언트 함수 생성에 사용됩니다 (기본적으로 XML 이스케이프).
  • outputFunctionName 함수가 스크립틀릿 태그 내에서 출력을 인쇄하려면 문자열 (예 : 'echo'또는 'print')로 설정합니다.

이 프로젝트는 JSDoc을 사용 합니다 . 전체 공개 API 문서의 경우 저장소를 복제 npm run doc하고을 실행합니다 . 그러면 적절한 옵션으로 JSDoc이 실행되고 문서가에 출력됩니다 out/. 공개 및 비공개 API 문서를 모두 원하는 경우 npm run devdoc대신 실행 하세요.

태그

  • <% 'Scriptlet'태그, 제어 흐름 용, 출력 없음
  • <%_ 'Whitespace Slurping'Scriptlet 태그, 앞의 모든 공백을 제거합니다.
  • <%= 값을 템플릿에 출력합니다 (이스케이프 됨).
  • <%- 이스케이프되지 않은 값을 템플릿에 출력합니다.
  • <%# 주석 태그, 실행 없음, 출력 없음
  • <%% 리터럴 '<%'출력
  • %%> 리터럴 '%>'출력
  • %> 일반 종료 태그
  • -%> 트림 모드 ( 'newline slurp') 태그, 줄 바꿈 다음 트림
  • _%> 'Whitespace Slurping'종료 태그, 그 뒤의 모든 공백을 제거합니다.

전체 구문 문서는 다음을 참조하십시오. docs/syntax.md.

포함

Includes는 절대 경로 여야하거나 그렇지 않은 경우 include호출 이있는 템플릿에 상대적인 것으로 간주됩니다 . 예를 들어 ./views/user/show.ejsfrom ./views/users.ejs포함 하는 경우를 사용 <%- include('user/show') %>합니다.

사용하지 않는 경우 호출시 filename템플릿에 대한 옵션을 지정해야합니다 .includerenderFile()

<%-HTML 출력의 이중 이스케이프를 방지하기 위해 포함에 원시 출력 태그 ( ) 를 사용하는 것이 좋습니다 .

1 2 3 4 5
<ul> <% users.forEach(function(user){ %> <%- include('user/show', {user: user}) %> <% }); %> </ul>

포함은 런타임에 삽입되므로 include호출 의 경로에 대한 변수를 사용할 수 있습니다 (예 <%- include(somePath) %>:). 최상위 데이터 개체의 변수는 모든 포함에서 사용할 수 있지만 로컬 변수는 전달되어야합니다.

참고 : Include 전 처리기 지시문 ( <% include user/show %>)은 계속 지원됩니다.

사용자 지정 구분자

사용자 지정 구분 기호는 템플릿별로 또는 전역 적으로 적용 할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11
let ejs = require('ejs'), users = ['geddy', 'neil', 'alex']; // Just one template ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'}); // => 'geddy | neil | alex' // Or globally ejs.delimiter = '$'; ejs.render('<$= users.join(" | "); $>', {users: users}); // => 'geddy | neil | alex'

캐싱

EJS는 템플릿을 렌더링하는 데 사용되는 중간 JavaScript 함수를 캐싱하기위한 기본 프로세스 내 캐시와 함께 제공됩니다. Node의 lru-cache라이브러리를 사용하여 LRU 캐싱을 쉽게 연결할 수 있습니다.

1 2 3
let ejs = require('ejs'), LRU = require('lru-cache'); ejs.cache = LRU(100); // LRU cache with 100-item limit

EJS 캐시를 지우려면을 호출하십시오 ejs.clearCache. LRU 캐시를 사용 중이고 다른 제한이 필요한 경우 LRU ejs.cache의 새 인스턴스로 간단히 재설정 하십시오.

커스텀 파일 로더

기본 파일 로더는입니다 fs.readFileSync. 사용자 정의하려는 경우 ejs.fileLoader를 설정할 수 있습니다.

1 2 3 4 5 6
let ejs = require('ejs'); let myFileLoad = function (filePath) { return 'myFileLoad: ' + fs.readFileSync(filePath); }; ejs.fileLoader = myFileLoad;

이 기능을 사용하면 템플릿을 읽기 전에 사전 처리 할 수 ​​있습니다.

레이아웃

EJS는 특별히 블록을 지원하지 않지만 다음과 같이 머리글과 바닥 글을 포함하여 레이아웃을 구현할 수 있습니다.

1 2 3 4 5 6 7 8
<%- include('header') -%> <h1> Title </h1> <p> My page </p> <%- include('footer') -%>

클라이언트 측 지원

최신 릴리스로 이동하여 다운로드 ./ejs.js또는 ./ejs.min.js. 또는 저장소를 복제하고 실행하여 직접 컴파일 할 수 있습니다 jake build(또는 $(npm bin)/jake buildjake가 전역 적으로 설치되지 않은 경우).

페이지에 이러한 파일 중 하나를 포함하고 ejs전 세계에서 사용할 수 있어야합니다.

Example

1 2 3 4 5 6 7 8 9 10
<div id="output"></div> <script src="ejs.min.js"></script> <script> let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); // With jQuery: $('#output').html(html); // Vanilla JS: document.getElementById('output').innerHTML = html; </script>

Caveats

대부분의 EJS는 예상대로 작동하지만 몇 가지 유의해야 할 사항이 있습니다.

  1. Obviously, 파일 시스템에 대한 액세스 권한 ejs.renderFile()이 없으므로 작동하지 않습니다.
  2. 같은 이유로 includes는를 사용하지 않으면 작동하지 않습니다 include callback. 예는 다음과 같습니다.

    1 2 3 4 5 6 7 8 9
    let str = "Hello <%= include('file', {person: 'John'}); %>", fn = ejs.compile(str, {client: true}); fn(data, null, function(path, d){ // include callback // path -> 'file' // d -> {person: 'John'} // Put your code here // Return the contents of file as a string }); // returns rendered string

IDE Integration with Syntax Highlighting

VSCode 기준 : 자바 스크립트 EJS DigitalBrainstem

EJS에는 여러 가지 구현이 있습니다.

특허

Apache 라이선스 버전 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )에 따라 사용이 허가되었습니다.


EJS 임베디드 JavaScript 템플릿 저작권 2112 mde@fleegix.org .