간단한 HTML 템플릿 엔진

이전에 사용한 템플릿은 ejs 및 jade(나중에 pug로 이름 변경)입니다. 전자는 사용하기 쉽게 설계되었으며 구문은 비교적 HTML에 가깝습니다. 후자는 벅찬데, 내 기억이 맞다면 jade는 들여쓰기를 기준으로 태그의 계층적 관계를 판단하기 때문에 들여쓰기에 대한 엄격한 요구 사항이 있습니다. 이 디자인은 사람들이 Python을 작성할 때 거의 살얼음판을 걷게 만듭니다. caliper???) 그래서 그 당시에도 개발에는 ejs를 계속 사용했어요.

그래서 이번에는 ejs의 문법 사양을 대략적으로 따라 Leopard를 구현했습니다.

다운로드 및 사용

여기 github 주소가 있습니다. 읽어보신 후 문제에 대한 제안과 버그도 환영합니다.

npm을 통해 Leopard를 다운로드할 수도 있습니다:

<span style="font-size: 14px;">$ npm install leopard-template<br></span>

기능

현재 Leopard는 다음 기능 포인트를 구현합니다.

• 보간: 텍스트 보간 및 HTML 보간 포함

• 논리적 판단: <code><span style="font-size: 14px;">if</span>与<span style="font-size: 14px;">else</span>

• 循环：<span style="font-size: 14px;">for</span>循环，可以用来循环输出模板

• 过滤器：支持在插值里加入过滤器，同时过滤器可以串联使用。引擎内置了两个过滤器，<span style="font-size: 14px;">capitalize</span>与<span style="font-size: 14px;">reverse</span>。Leopard同时支持自定义过滤器，可以使用<span style="font-size: 14px;">Leopard.filter(filter, handler)</span>来全局注册一个过滤器。在过滤器上，Leopard可能跟ejs的不太同，跟Vue的比较相似。

举个栗子

<span style="font-size: 14px;">var Leopard = require('leopard-template')<br>var leo = new Leopard()<br><br>var template = '<% if (isOk) { %>' +<br>  '<span class=\"nickname\"><%= nickname | capitalize %></span>' +<br>  '<% } else { %>' +<br>  '<span class=\"realname\"><%= realname | capitalize %></span>' +<br>  '<% } %>'<br><br>var html = leo.compile(conditions, {<br>  isOk: false,<br>  nickname: 'leo',<br>  realname: 'leopard'<br>})<br><br>// html就是最终编译成功的的html了，可以直接通过document的方法渲染到页面上<br></span>

性能

其实字符串模板引擎的性能大家都知道的，在现在的硬件条件下，几乎可以说是非常快的。（饱受虚拟DOM服务端渲染性能上不去的孩子哭晕在厕所，鄙人的公司项目就是卡在了这里上不了线）

我做了一个简单的benchmark，循环输出50,000个<span style="font-size: 14px;">li</span>if 및 <em>else</em>

루프: for

Loop, 출력 템플릿을 반복하는 데 사용할 수 있습니다Filter: 보간에 필터 추가를 지원하며 필터를 직렬로 사용할 수 있습니다. 엔진에는 capitalize

및

<p class="article fmt article__content">reverse<a href="http://www.php.cn/js-tutorial-386349.html" target="_self"></a></p>이라는 두 가지 필터가 내장되어 있습니다. Leopard

는 사용자 정의 필터도 지원합니다. Leopard.filter(filter, handler)

를 사용하여 필터를 전역적으로 등록할 수 있습니다. 필터 측면에서 Leopard는

ejs🎜와 다를 수 있지만 🎜Vue🎜와 더 유사합니다. 🎜🎜🎜🎜🎜예를 들어🎜🎜

<span style="font-size: 14px;"># benchmark<br>$ npm run benchmark<br></span>

🎜🎜Performance🎜🎜🎜🎜사실 현재 하드웨어 조건에서는 거의 매우 빠르다고 할 수 있는 문자열 템플릿 엔진의 성능을 다들 아실 겁니다. (가상 DOM 서버의 렌더링 성능이 좋지 않아 고생한 아이가 화장실에서 울다가 기절했습니다. 회사 프로젝트가 여기서 멈춰서 온라인에 접속할 수 없었습니다.) 🎜🎜🎜🎜간단한 벤치마크를 만들어 50,000개 항목을 루프아웃했습니다 🎜🎜li🎜🎜약 60ms 정도 걸립니다. 물론 🎜Leopard🎜는 현재 🎜템플릿 문자열🎜을 🎜HTML 문자열🎜으로 구문 분석하고 컴파일하는 것만 지원하므로 여기서 루프 출력은 문자열 컴파일 단계를 나타냅니다. 🎜🎜

<span style="font-size: 14px;"># unit test<br>$ npm run test<br><br># coverage<br>$ npm run coverage<br></span>

🎜🎜오픈 소스🎜🎜🎜🎜바퀴 만들기 프로젝트이고 🎜ejs🎜와 거의 동일해 보이기 때문에 프로덕션 환경에 투입될 가능성은 거의 없습니다(게다가 모두 MVVM 프레임워크를 사용합니다) 현재) 프로젝트 개발 중), 그래도 오픈 소스 프로젝트인 🎜Leopard🎜의 사양에 따라 개발하고 싶습니다. 저는 🎜Leopard🎜에 대한 100% 커버리지 테스트 케이스를 작성했습니다. 커밋을 제출할 때마다 테스트를 실행하고 제출하기 전에 통과합니다. 또한 이 프로젝트가 너무 수월하지 않기를 바랍니다. 🎜🎜rrreee🎜관련 권장 사항: 🎜🎜🎜Node.js 템플릿 엔진 옥 예제 설명🎜🎜🎜🎜템플릿 엔진 기능을 구현하는 PHP의 간단한 예🎜🎜🎜🎜템플릿 엔진 기반 PHP 디자인 패턴 컨테이너 배포 프레임워크🎜🎜

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