최근에 내 작업 콘텐츠는 점차적으로 이상화 (웹 프론트 엔드)에 접근하므로 프론트 엔드 성능에 더 많은 관심을 기울입니다! 백그라운드의 동료가 렌더링 속도를 향상시키기 위해 Ajax 템플릿 엔진을 사용하는 것을 소개했습니다!
다음은 JavaScript 템플릿 엔진입니다
1. 콧수염
Microsoft의 JQuery 템플릿 플러그인과 유사한 JavaScript를 기반으로하는 템플릿 엔진이지만 더 간단하고 사용하기 쉽습니다!
2. dot.js
dot.js는 브라우저 및 node.js 용 JavaScript 템플릿 엔진이 포함되어 있습니다.
3. JSMART
JSMART는 유명한 PHP 템플릿 엔진 Smarty의 JavaScript 포트 버전입니다.
4. dom.js
dom.js는 클라이언트와 서버 측 모두에서 사용할 수있는 JavaScript 템플릿 엔진입니다.
5. 제이드
Jade는 JavaScript의 Haml의 영향을받는 노드의 고성능 템플릿 엔진입니다.
6. hogan.js
트위터의 JavaScript 템플릿 엔진.
7. 핸들 바
핸들 바는 JavaScript 페이지 템플릿 라이브러리입니다
8. arttemplate
ArtTemplate은 차세대 JavaScript 템플릿 엔진입니다. V8의 렌더링 효율은 JavaScript의 성능 제한에 가까울 수 있습니다. Chrome의 렌더링 효율 테스트에서, 잘 알려진 엔진 콧수염 및 마이크로 TMPL의 25 배와 32 배입니다. 엔진은 디버깅을 지원합니다. 렌더링 중에 오류가 발생하면 디버거는 예외를 생성하는 템플릿 문을 정확하게 찾을 수있어 프론트 엔드 템플릿이 디버그하기가 어렵다는 문제를 해결할 수 있습니다.
고유 한 템플릿 컴파일 도구는 프론트 엔드 템플릿을 템플릿 엔진에 의존하지 않는 JS 파일로 컴파일 할 수 있으므로 프론트 엔드 템플릿이 브라우저 제한을 뚫고 백엔드 템플릿과 동일한 방식으로 파일 및 디렉토리의 구성을 인식 할 수 있습니다.
어쩌면이 플러그인의 이름이 익숙해 보인다고 생각할 것입니다. 맞습니다! 이것은 또한 ArtDialog의 저자입니다.
블로그 주소 : http://www.planeart.cn/
견적 엔진
코드 사본은 다음과 같습니다.
<script src = "js/template.js"> </script>
템플릿을 작성하십시오
코드 사본은 다음과 같습니다.
<script id = "test"type = "text/html">
// 템플릿을 저장하려면 type = "text/html"이있는 스크립트 태그를 사용합니다.
<h1> <%= 제목%> </h1>
<ul>
<%
for (i = 0; i <list.length; i ++) {%>
<li> iteml <%= i+1%> : <%= list [i]%> </li>
<%}%>
</ul>
// 템플릿의 시작과 끝의 정의 기호는 < % 및 %>입니다. <%가 = 부호가 이어지면 변수 내용이 출력됩니다.
</스크립트>
렌더링 템플릿
코드 사본은 다음과 같습니다.
var data = {
제목 : '태그',
목록 : [ '문학', '블로그', '사진', '영화', '민속', '여행', '기타']]]]
};
var html = template.render ( "테스트", 데이터);
document.getElementById ( 'content'). innerHtml = html;