간단한 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

및

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

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

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

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

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