NodeJS 프레임워크 Express_javascript 기술의 템플릿 보기 메커니즘 분석

템플릿 엔진

Express는 다양한 템플릿 엔진을 지원하며 일반적으로 사용되는 엔진은 다음과 같습니다.

• haml 구현Haml
• haml.js의 후속 버전이자 Express의 기본 템플릿 엔진Jade
• JavaScript 템플릿 삽입EJS
• CoffeeScript 기반 템플릿 엔진CoffeeKup
• jQuery 템플릿 엔진

의 NodeJS 버전

렌더링 보기

뷰의 파일 이름은 기본적으로 "." 형식을 따라야 합니다. 여기서 은 로드할 모듈의 이름입니다. 예를 들어, 레이아웃.ejs 뷰는 뷰 시스템에 require('ejs')를 지시합니다. 로드된 모듈은 내보내기.compile(str, 옵션) 메소드를 출력하고 Express의 템플릿 인터페이스 규칙을 준수하는 함수를 반환해야 합니다. 또한 app.register()를 사용하여 템플릿 엔진을 다른 파일 확장명에 매핑하여 보다 유연한 템플릿 엔진 동작을 달성할 수 있으므로 "csser.html"이 ejs 엔진에 의해 렌더링될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

app.get('/', function(req, res){

res.render('index.jade', { title: 'CSSer, 웹 프런트엔드 기술에 주목하세요!' } );
}) ;



Jade를 사용하려면 이를 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

app.set('viewengine', 'jade');

따라서 다음 방법을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. res .render('index');

대신:

코드 복사 코드는 다음과 같습니다.res.render('index.jade')

"뷰 엔진"이 설정되면 템플릿 확장 이름은 선택 사항이 되며 여러 템플릿 엔진을 혼합하여 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.res.render('another-page.ejs ');

Express는 보기 옵션 설정도 제공하며, 이러한 설정은 각 보기가 렌더링된 후에 적용됩니다. 다음과 같이 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.app.set('view options', {

layout: false

});



이 설정은 다음을 수행할 수 있습니다. 원하는 경우 후속 res.render() 호출에서 재정의됩니다.

코드 복사 코드는 다음과 같습니다.res.render('csser-view.ejs', { 레이아웃: true })

경로를 지정하여 자체 레이아웃을 사용하여 시스템 기본값을 바꿀 수 있습니다. 예를 들어 "뷰 엔진"을 jade로 설정하고 "./views/mylayout.jade" 레이아웃을 사용자 정의하면 다음과 같은 작업을 수행할 수 있습니다. 다음과 같이 사용하세요:

코드 복사 코드는 다음과 같습니다:

res.render('page', {layout: 'mylayout' });

그렇지 않으면 확장자를 지정해야 합니다:

코드 복사 코드는 다음과 같습니다.

res.render( 'page', {layout: 'mylayout.jade' })

이 경로는 절대 경로일 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

res.render(' 페이지', { 레이아웃: __dirname '/http://www.jb51.net/mylayout.jade' })

이에 대한 더 좋은 예는 다음과 같습니다. 사용자 정의 ejs 템플릿 시작 및 종료 태그:

코드 복사 코드는 다음과 같습니다.

< SPAN style="FONT-SIZE: 13px">app.set('view options', {
open: '{{',
close: '}}'
});

부분 보기
Express 보기 시스템은 기본적으로 미니 보기라고 하며 주로 문서 조각을 렌더링하는 데 사용되는 부분 보기와 컬렉션 보기를 지원합니다. 예를 들어 뷰의 주석을 반복하는 대신 부분 컬렉션을 사용합니다.

코드 복사 코드는 다음과 같습니다.

partial('comment', { collection: comments })

필요하지 않은 경우 다른 옵션이나 지역 변수의 경우 개체를 생략하고 간단히 주석 배열을 전달할 수 있습니다. 이는 위의 예와 동일합니다.

코드 복사 코드는 다음과 같습니다:

partial('comment', comments)

로컬 컬렉션을 사용할 때 일부 "마법의" 지역 변수가 지원됩니다.

• firstInCollection 이 값은 첫 번째 객체일 때 true입니다
• indexInCollection 컬렉션에 있는 개체의 인덱스 값
• lastInCollection은 마지막 객체일 때 true입니다
• collectionLength 컬렉션의 길이

전달된(또는 생성된) 로컬 변수가 우선권을 가지지만, 상위 뷰에 전달된 로컬 변수는 하위 뷰에서도 사용할 수 있습니다. 예를 들어 부분('blog/post)을 사용하여 블로그 게시물을 렌더링하는 경우 ', 포스트) 포스트를 로컬로 생성하겠지만, 이 함수를 호출한 뷰에는 로컬 사용자가 있어서 블로그/포스트 뷰에서도 사용할 수 있을 것입니다.

전달된(또는 생성된) 로컬 변수가 우선권을 가지지만 상위 뷰에 전달된 로컬 변수는 하위 뷰에서도 여전히 유효합니다. 따라서 블로그 로그를 렌더링하기 위해 부분('blog/post', post)을 사용하면 post의 로컬 변수가 생성되지만 이 함수를 호출하는 뷰에는 로컬 사용자가 있으므로 블로그에서는 여전히 유효합니다. /포스트 보기. (첫 번째 참고 사항: 이 번역에 문제가 있습니다. 조언을 부탁드립니다.)

성능 팁: 부분 컬렉션을 사용하여 100 길이 배열을 렌더링하는 것은 뷰를 100번 렌더링하는 것을 의미합니다. 간단한 컬렉션의 경우 부분 컬렉션을 사용하는 대신 루프를 인라인할 수 있으므로 시스템을 줄일 수 있습니다. 간접비.

조회보기

보기 검색은 상위 보기를 기준으로 수행됩니다. 예를 들어 "views/user/list.jade"라는 페이지 보기가 이 보기에서 호출되면 보기가 표시됩니다. 시스템은 "views/user/edit.jade"를 찾아서 로드하려고 시도하는 반면, 부분('../messages')은 "views/messages.jade"를 로드합니다.

뷰 시스템은 인덱스 템플릿도 지원하므로 동일한 이름의 디렉터리를 사용할 수 있습니다. 예를 들어, 경로에서 "views/users.jade" 또는 "views/users/index.jade"를 가리키는 res.render('users')를 실행합니다.

위 인덱스 뷰를 사용할 때 부분('users')을 통해 동일한 이름의 디렉터리에서 "views/users/index.jade"를 참조할 수 있으며, 뷰 시스템은 "../ users/index" ”, 이는 부분('index')를 호출할 필요성을 줄여줍니다.