Laytpl은 파괴적인 JavaScript 템플릿 엔진입니다. 영리한 구현 방법을 사용하여 자체 크기를 작고 절묘하게 만듭니다. 그것은 궁극적 인 성능을 가지고있을뿐만 아니라 전통적인 프론트 엔드 엔진의 거의 모든 기능을 가지고 있습니다. 모든 변환 마법은 1KB 미만의 코드로 만들어 졌는데, 이는 혁명처럼 보이지만 Laytpl이 실제로 가장 가벼운 방식으로 세상에 제시하고 있다는 것은 의심의 여지가 없습니다. 이 응용 프로그램에 노출 된 적이 없다면 문제가되지 않습니다. 다음 이야기를 통해 Laytpl을 선택하기를 기다릴 수 없게 만들 수 있으며, 그때부터 페이지의 데이터 렌더링을 더 잘 파악하고 인생의 절정에 도달 할 수 있습니다!
laytpl 장점
• 성능의 왕으로 알려진 ArtTemplate 및 Dot보다 거의 1 배 빠르고 Baidutemplate, KissyTemplate 등보다 20-40 배 빠를수록 데이터 스케일과 렌더링 주파수가 클수록 더 분명합니다.
• 볼륨은 단순히 단순히 작고 극도로 1KB 미만이며 향후에는 작아 질 것입니다.
• 탈출과 같은 보안 메커니즘이 있으며 비교적 과학적 오류보고 기능이 있습니다.
• 템플릿의 유연성을 완전히 보장하기 위해 기본 JavaScript를 템플릿에 임의로 작성할 수 있습니다.
• node.js 플랫폼에서 응용 프로그램을 지원합니다
• 모든 고대 또는 현대 주류 브라우저를 지원합니다
사용 방법
코드 사본은 다음과 같습니다.
// 1 단계 : 템플릿을 작성합니다. 스크립트 태그를 사용하여 다음과 같은 템플릿을 저장할 수 있습니다.
<script id = "demo"type = "text/html">
<h1> {{d.title}} </h1>
<ul>
{{# for (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<span> 이름 : {{d.list [i] .name}} </span>
<Span> City : {{d.list [i] .city}} </span>
</li>
{{#}}}
</ul>
</스크립트>
// 2 단계 :보기를 만듭니다. 렌더링 결과를 렌더링하는 데 사용됩니다.
<div id = "보기"> </div>
// 3 단계 : 템플릿 렌더링
var data = {
제목 : '프론트 엔드 포위',
목록 : [{이름 : 'Xianxin', City : 'hangzhou'}, {이름 : 'Xie Liang', City : 'Beijing'}, {이름 : 'Qianqian', City : 'Hangzhou'}, {이름 : 'Dem', 'Beijing'}]
};
var gettpl = document.getElementById ( 'demo'). innerHtml;
laytpl (gettpl) .Render (데이터, 함수 (html) {
document.getElementById ( 'view'). innerHtml = html;
});
문서 설명
1. 템플릿 구문
html을 벗어나지 않고 일반 필드를 출력하십시오 : {{d.field}}
정상 필드를 출력하고 HTML을 탈출하십시오 : {{= d.field}}
JavaScript 스크립트 : {{## javaScript 문}}
2. 내장 방법
1) : laytpl (템플릿); // 핵심 함수, 객체를 반환합니다
var tpl = laytpl (템플릿);
tpl.render (데이터, 콜백); // 렌더링 메소드, 렌더링 결과를 반환하고 두 가지 모드를 지원합니다 : 비동기 및 동기식
a) : 비동기
tpl.render (data, function (결과) {
Console.log (결과);
});
b) : 동기
var result = tpl.render (데이터);
Console.log (결과);
2) : laytpl.config (옵션); // 구성을 초기화합니다
옵션은 객체입니다
{오픈 : '태그 시작', 닫기 : '닫기 태그'}}
3) : laytpl.v // 버전 번호를 얻습니다
주목해야 할 것
1. Laytpl.js를 직접 소개하면 SEAJS 및 기타 모듈 식 하중을 직접 사용할 수도 있습니다.
2. LAYTPL은 비즈니스 및 개인 플랫폼 모두에서 마음대로 사용할 수 있습니다.
3. 어떤 경우에 소스를 유지하고 Layoutpl.js 헤더 주석을 제거하지 마십시오.
공식 웹 사이트 : http://sentsin.com/layui/laytpl/
다운로드 : //www.vevb.com/codes/207072.html