NodeJS 프레임워크 Express의 템플릿 보기 메커니즘 분석
- 不言원래의
- 2018-06-30 10:15:461491검색
이 글은 주로 NodeJS 프레임워크 Express의 템플릿 보기 메커니즘에 대한 분석을 소개합니다. 이제 이를 여러분과 공유합니다.
모두가 MVC 모델을 알고 있습니다. 팀 협업을 강화하고 효율성을 향상시키며 제품 유지 관리 및 업그레이드를 용이하게 합니다. 이 기사에서는 Express 프레임워크의 템플릿 및 뷰(V) 관련 기능을 소개합니다.
템플릿 엔진
Express는 다양한 템플릿 엔진을 지원하며 일반적으로 사용되는 엔진은 다음과 같습니다.
haml 구현 Haml
haml.js 후속 버전 및 ExpressJade의 기본 템플릿 엔진 A
-
Coffeekup
Nodejs 버전
JQUERY 템플릿 엔진 렌더링( 랜더링 보기) 파일 이름은 "8a11bc632ea32a57b3e3693c7987c420 .4ac516df2bd3b3f39951bf63aa54a6de'이 기본값이며, 여기서 4ac516df2bd3b3f39951bf63aa54a6de은 로드할 모듈의 이름입니다. 예를 들어, 레이아웃.ejs 뷰는 뷰 시스템에 require('ejs')를 지시합니다. 로드된 모듈은 내보내기.compile(str, 옵션) 메소드를 출력하고 Express의 템플릿 인터페이스 규칙을 준수하는 함수를 반환해야 합니다. 또한 app.register()를 사용하여 템플릿 엔진을 다른 파일 확장명에 매핑하여 보다 유연한 템플릿 엔진 동작을 달성할 수 있으므로 "csser.html"이 ejs 엔진에 의해 렌더링될 수 있습니다.다음으로 Jade 엔진을 사용하여 index.html을 렌더링합니다.layout:false를 설정하지 않았으므로 index.jade의 렌더링된 콘텐츠가 본문 로컬 변수로 레이아웃.jade에 전달됩니다.
<SPAN style="FONT-SIZE: 13px">app.get('/', function(req, res){
res.render('index.jade', { title: 'CSSer, 关注Web前端技术！' });
});
</SPAN>새로운 "보기 엔진" 설정은 기본 템플릿 엔진을 지정할 수 있습니다. jade를 사용하려면 다음과 같이 설정할 수 있습니다.
<SPAN style="FONT-SIZE: 13px">app.set('view engine', 'jade'); </SPAN>
따라서 다음 방법을 사용할 수 있습니다.
<SPAN style="FONT-SIZE: 13px">res.render('index'); </SPAN>
대신 방법:
<SPAN style="FONT-SIZE: 13px">res.render('index.jade'); </SPAN>
"뷰 엔진"이 설정된 후 템플릿 확장은 선택 사항이 되며 여러 템플릿 엔진을 혼합하여 사용할 수도 있습니다.
<SPAN style="FONT-SIZE: 13px">res.render('another-page.ejs'); </SPAN>
Express는 또한 각 뷰 렌더링 후에 적용되는 뷰 옵션 설정을 제공합니다. 예를 들어 레이아웃을 자주 사용하지 않는 경우 다음과 같이 설정할 수 있습니다.
<SPAN style="FONT-SIZE: 13px">app.set('view options', {
layout: false
});
</SPAN>필요한 경우 후속 res.render() 호출에서 이러한 설정을 재정의할 수 있습니다.
<SPAN style="FONT-SIZE: 13px">res.render('csser-view.ejs', { layout: true });
</SPAN>경로 시스템 기본값을 바꾸려면 예를 들어 "view 엔진"을 jade로 설정하고 "./views/mylayout.jade"라는 레이아웃을 사용자 정의하는 경우 다음과 같이 사용할 수 있습니다.
<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: 'mylayout' });
</SPAN>그렇지 않으면 확장자는 다음과 같아야 합니다. 지정됨:
<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: 'mylayout.jade' });
</SPAN>이 경로는 절대 경로일 수도 있습니다.
<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: __dirname + '///www.jb51.net/mylayout.jade' });
</SPAN>이에 대한 더 좋은 예는 사용자 정의 ejs 템플릿의 열기 및 닫기 태그입니다:
<SPAN style="FONT-SIZE: 13px">app.set('view options', {
open: '{{',
close: '}}'
});
</SPAN>View Partials
Express 보기 시스템은 기본적으로 호출되는 부분 및 컬렉션 보기를 지원합니다. 마이크로뷰는 주로 문서 조각을 렌더링하는 데 사용됩니다. 예를 들어 뷰의 주석을 반복하는 대신 부분 컬렉션을 사용합니다.<SPAN style="FONT-SIZE: 13px">partial('comment', { collection: comments });
</SPAN>다른 옵션이나 지역 변수가 필요하지 않으면 개체를 생략하고 간단히 주석 배열을 전달할 수 있습니다. 이는 동일합니다. 위의 예와 같이:
<SPAN style="FONT-SIZE: 13px">partial('comment', comments); </SPAN>로컬 컬렉션을 사용할 때 일부 "마법의" 로컬 변수가 지원됩니다.
- firstInCollection 값은
- indexInCollection의 첫 번째 객체일 때 true입니다. 컬렉션의 개체 인덱스 값
- lastInCollection은 마지막 개체일 때 true입니다
- collectionLength 컬렉션의 길이
전달된(또는 생성된) 로컬 변수가 우선 순위를 가지지만 상위 보기에 전달된 로컬 변수는 하위 보기에서도 여전히 유효합니다. 따라서 블로그 로그를 렌더링하기 위해 부분('blog/post', post)을 사용하면 post의 로컬 변수가 생성되지만 이 함수를 호출하는 뷰에는 로컬 사용자가 있으므로 블로그에서는 여전히 유효합니다. /포스트 보기. (첫 번째 참고 사항: 이 번역에 문제가 있습니다. 조언을 부탁드립니다.)
성능 팁: 부분 컬렉션을 사용하여 100 길이 배열을 렌더링하는 경우 뷰를 100번 렌더링해야 함을 의미합니다. 간단한 컬렉션의 경우 부분 컬렉션을 사용하는 대신 루프를 인라인할 수 있습니다. 시스템 비용을 줄일 수 있습니다. View 조회는 우리와 같은 상위 뷰를 기준으로 수행됩니다. "views/user/list.jade"라는 페이지 뷰입니다. 이 뷰에서 부분('edit')이 호출되면 뷰 시스템은 "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"를 시도하므로 부분('인덱스')을 호출할 필요성이 줄어듭니다. 위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 관련 권장 사항: View 조회
위 내용은 NodeJS 프레임워크 Express의 템플릿 보기 메커니즘 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!