멋진 커뮤니티 모듈

EJS

임베디드 JavaScript 템플릿

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

설치

1
$ npm install ejs

풍모

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

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

태그

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

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

포함

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

renderFile() 사용하지 않는 한 include 호출로 템플릿의 filename 옵션을 지정해야합니다.

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

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

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

참고 : 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 호출 ejs.clearCache . LRU 캐시를 사용 ejs.cache 다른 제한이 필요한 경우 ejs.cache 를 LRU의 새 인스턴스로 간단히 재설정하십시오.

커스텀 파일 로더

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

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 (또는 jake가 아닌 경우 $(npm bin)/jake build 실행하여 직접 컴파일 할 수 있습니다. 전 세계적으로 설치됨).

페이지에 이러한 파일 중 하나를 포함하면 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. 같은 이유로 include callback 을 사용하지 않으면 include 작동하지 않습니다. 예는 다음과 같습니다.

    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 : DigitalBrainstem하여 자바 스크립트 EJS

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

특허

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


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