멋진 커뮤니티 모듈

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됩니다.엄격 모드로 설정 합니다.
  • localsNamewithDefaults를 사용하지 않을 때 지역 변수를 저장하는 객체에 사용할 이름locals
  • rmWhitespace 선행 및 후행 공백을 포함하여 안전하게 제거할 수 있는 모든 공백을 제거합니다. 또한 -%>모든 스크립틀릿 태그에 대해 보다 안전한 버전의 줄 슬러핑을 활성화 합니다(줄 중간에 있는 새 태그 줄을 제거하지 않음).
  • escape<%=구조 와 함께 사용되는 이스케이프 함수 입니다. 렌더링에 사용되며 .toString()클라이언트 함수 생성에 사용됩니다(기본적으로 XML 이스케이프).
  • outputFunctionName 스크립틀릿 태그 내부의 출력을 인쇄하는 함수의 경우 문자열(예: 'echo' 또는 'print')로 설정합니다.

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

태그

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

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

포함

포함은 절대 경로여야 하며 그렇지 않은 경우 include호출 이 있는 템플릿에 상대적인 것으로 간주됩니다 . 예를 들어 ./views/user/show.ejs에서 포함 하는 경우 를 ./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는 a를 사용하지 않는 한 작동하지 않습니다 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 .