nodejs 템플릿 엔진이란 무엇입니까?

nodejs 템플릿 엔진은 템플릿 파일을 사용하여 HTML 파일을 동적으로 생성할 수 있으며, 특정 규칙에 따라 애플리케이션의 데이터를 HTML 파일에 통합할 수 있습니다. 공통 노드 템플릿 엔진에는 Mustache, Dust.js, doT, Jade, EJS, swig 등이 포함됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, nodejs 버전 12.19.0, DELL G3 컴퓨터.

템플릿 엔진 소개

웹 애플리케이션에서 프론트엔드와 백엔드를 분리하지 않고 서버사이드 코드만 사용하여 클라이언트사이드 HTML 코드를 작성한다면 작업량이 많이 발생하게 되고, 작성된 코드는 읽고 유지하기가 더 어렵습니다. 클라이언트의 정적 HTML 파일만 사용하는 경우 백엔드 논리를 클라이언트의 HTML 코드에 통합하기가 더 어려워집니다.

유지 관리를 용이하게 하고, 백엔드 로직을 프런트엔드 HTML 코드에 더 효과적으로 통합하고, 유지 관리를 용이하게 하기 위해 많은 타사 개발자가 다양한 Nodejs 템플릿 엔진을 개발했습니다.

그렇다면 템플릿 엔진이란 무엇인지 따로 이해할 수 있을까요?

템플릿: 틀(구조물). 데이터를 설정하고 다양한 데이터를 기반으로 다양한 로직을 구현하려면

엔진: 프로세서(컴파일, 실행), 최종적으로 HTML 코드 렌더링

그러므로 템플릿 엔진을 함께 이해해 봅시다. 템플릿 파일을 사용하여 HTML 파일을 동적으로 생성합니다. , 생성 시 특정 규칙에 따라 애플리케이션의 데이터를 HTML 파일에 통합할 수 있습니다. 배경 JSP 언어와 유사합니다.

간단히 말하면 템플릿 엔진은 렌더링 템플릿입니다.

nodejs 템플릿 엔진 요약 및 비교

Mustache

공식 웹사이트: http://mustache.github.io/

Mustache는 로직으로 알려진 매우 간단하고 사용하기 쉬운 템플릿 엔진입니다. -무료 템플릿 엔진. HTML, 구성 파일, 소스 코드 및 기타 시나리오에서 사용할 수 있습니다.

로직이 없는 템플릿 엔진이라고 불리는 이유는 if 문, else 조건, for 루프 및 기타 구조가 없기 때문입니다. 태그만 있으면 태그를 값으로 대체하고 값은 해시일 수도 있고 개체일 수도 있습니다. 그렇게 간단합니다.

Mustache 템플릿에는 Mustache(1)와 Mustache(5)의 두 가지 정의가 있습니다.

Mustache는 Ruby, JavaScript, Python, Erlang, node.js, PHP, Perl, Perl6, Objective-C, Java와 같은 주류 프로그래밍 언어를 지원합니다. , 안드로이드, C++, Go, Lua 등

Mustache는 TextMate, Vim, Emacs, Coda, Atom 등과도 잘 통합됩니다.

콧수염(1) 설명서: < http://mustache.github.io/mustache.5.html>
콧수염(5) 설명서: < http://mustache.github.io/mustache.1.html> ;

Mustache (1)은 ctemplate에서 영감을 얻었으며 첫 번째 버전은 2009년 말에 출시되었습니다. 템플릿 엔진의 첫 번째 버전은 Ruby로 구현되었으며 YAML 템플릿 텍스트를 실행했습니다. 채택된 주요 원칙은 다음과 같습니다. 첫째, "논리 없음"을 강조하고, 명시적인 제어 흐름 문이 없으며, 모든 제어가 데이터에 의해 구동됩니다. 둘째, "논리와 표현의 분리"를 강조하고, 애플리케이션 논리를 템플릿에 포함하는 것이 불가능합니다.

Handlebars

공식 웹사이트: < http://handlebarsjs.com/>

Handlebars.js는 Chris Wanstrath가 만든 Mustache 템플릿 언어의 확장입니다. Handlebars.js와 Mustache는 모두 뷰와 코드를 분리된 상태로 유지하는 논리 없는 템플릿 언어입니다.

일반적으로 Handlebars.js 템플릿의 구문은 Mustache 템플릿의 상위 집합입니다.

기본 구문은 Mustache의 도움말 페이지를 참조하세요: < http://mustache.github.com/mustache.5.html>

핸들바를 사용하면 템플릿을 미리 컴파일하고 JavaScript 코드에 포함할 수 있어 시작 시간이 더 빨라집니다. 짧은.

Handlebars가 Mustache와 호환되지 않는 몇 가지 이유:

* 컴파일 타임에 이 기능을 활성화하기 위해 compat 플래그를 설정해야 하는 경우를 제외하고 Handlebars는 기본적으로 재귀 검색을 수행하지 않습니다. 사용자는 이 플래그를 활성화하면 성능 비용이 발생한다는 점을 알고 있어야 합니다.

* 옵션인 콧수염 스타일 람다는 지원되지 않습니다.

* 대체 구분 기호를 지원하지 않습니다.

Dust.js

공식 웹사이트: < http://www.dustjs.com/>

Dust는 ctemplate 언어 스타일을 상속하고 디자인된 Javascript 템플릿 엔진입니다. 서버와 브라우저에서 비동기적으로 실행됩니다.

다른 템플릿 엔진과 비교했을 때 Dust는 비논리적이지 않고 단지 논리력이 덜할 뿐입니다.

*Dust 템플릿에는 임의의 Javascript를 작성할 수 없습니다. 그러나 비교, 보다 작음/보다 큼, 존재/부재와 같은 기본 논리 연산자는 여전히 있습니다. 이는 템플릿 가독성과 데이터 제어 간의 균형을 유지합니다.

* Dust는 논리를 데이터 모델로 이동하도록 권장합니다. 모델에서 함수를 생성한 다음 템플릿에서 호출할 수 있으므로 로직을 복잡하게 하지 않고도 템플릿이 렌더링되는 방식을 완벽하게 제어할 수 있습니다.

* 비동기식 템플릿 로드, 렌더링 및 스트리밍. 따라서 템플릿을 미리 로드할 필요가 없습니다.

* 부분 포함 및 동적 템플릿 블록을 지원하는 구성 가능한 템플릿, 템플릿을 함께 결합하여 레이아웃을 수동으로 구성할 수 있습니다.

* HTML에 안전하고 형식에 독립적입니다. Dust는 데이터를 안전하게 이스케이프하여 크로스 사이트 스크립팅 공격을 방지합니다.

*고성능. 성능과 기능 사이의 균형을 유지하세요. Mustache만큼 빠르지는 않지만 비동기식 특성으로 인해 대규모 템플릿을 더 빠르게 렌더링할 수 있습니다.

* Dust는 JavaScript에서 작동합니다.

Underscore.js

공식 웹사이트: < http://underscorejs.org/>

Underscore는 내장 객체를 확장하지 않고도 일련의 유용한 기능적 프로그래밍 도우미를 제공하는 JavaScript 라이브러리입니다.

Underscore는 맵, 필터, 호출은 물론 함수 바인딩, JavaScript 템플릿, 빠른 인덱스 생성, 심층 동등성 테스트 등과 같은 기능을 지원하는 100개 이상의 함수를 제공합니다.

doT

공식 웹사이트: < http://olado.github.io/doT/>

doT는 사용하기 가장 쉬운 템플릿 엔진은 아니지만 다음 요구 사항을 충족합니다.

* 템플릿 엔진이 클라이언트에 있음

* 템플릿에 대규모 로직이 필요하고 애플리케이션을 빠르게 실행하려는 경우

* 미리 컴파일된 템플릿이 필요한 경우

Jade

공식 웹사이트 : < http:/ /jade-lang.com/>

이 템플릿 엔진을 사용하면 코드 작성이 줄어들고 개발이 쉬워집니다. 다만 파일을 먼저 HTML로 변환한 후 Jade로 변환해야 하기 때문에 Node.js 환경에서 사용하는 것이 시간이 더 많이 걸립니다.

EJS

공식 웹사이트: < http://ejs.co/>

EJS는 Observes와의 실시간 바인딩 사용을 제공하는 CanJS의 기본 템플릿 언어입니다. EJS는 사용하기 매우 쉽습니다. 템플릿에 원하는 HTML과 동적 동작을 나타내는 일부 매직 태그를 작성하기만 하면 됩니다. JES는 차단 기능을 지원하지 않습니다.

swig

Swig에는 추상적인 HTML 구문이 없지만 Swig를 사용하여 Angular.js의 구문을 채우고 블록 기능을 지원할 수 있습니다.

노드 관련 지식을 더 보려면 nodejs 튜토리얼을 방문하세요! !

위 내용은 nodejs 템플릿 엔진이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!