A simple HTML template engine-JS Tutorial-php.cn

A simple HTML template engine

小云云

Release： 2018-02-10 15:00:15

Original

3048 people have browsed it

The templates I have used before are ejs and jade (later renamed pug). The former is designed to be easy to use, and its syntax is relatively close to HTML. The latter is daunting, and if I remember correctly, jade has strict requirements on indentation, because it judges the hierarchical relationship of tags based on indentation. This design makes it almost impossible to write. Writing Python was like walking on thin ice (where is my vernier caliper???), so I still used ejs for development at that time.

So, this time I roughly followed the syntax specifications of ejs to implement Leopard.

Download and use

This is the github address. You are welcome to make suggestions and bugs in the issue after reading it. PRs are also welcome. .

You can also download it through npmLeopard：

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

Copy after login

Features

Currently, Leopard has implemented the following functional points:

##Interpolation: including text interpolation and HTML interpolation
##Logical judgment:
if and else 
Loop:
for loop, which can be used to loop the output template
Filter: Supports adding filters to interpolation, and filters can be used in series. The engine has two built-in filters,
capitalize and reverse. Leopard also supports custom filters. You can use Leopard.filter(filter, handler) to register a filter globally. In terms of filters, Leopard may be different from ejs, but more similar to Vue.

For example

<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>

Copy after login

Performance

In fact, string Everyone knows the performance of the template engine. Under current hardware conditions, it can almost be said to be very fast. (The child who suffered from the inability to improve the rendering performance of the virtual DOM server cried and fainted in the toilet. My company project is stuck here and cannot be online)

I made a simple For benchmark, the time it takes to output 50,000

li in a loop is about 60ms. Of course, Leopard currently only supports parsing and compiling template string into HTML string, so the loop output here refers to the string compilation step .

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

Copy after login

Open Source

Although it is a wheel-making project, and it looks almost the same as

ejs, Therefore, it is unlikely to be put into use in a production environment (besides, the MVVM framework is now used to develop projects), but I still hope to develop Leopard in accordance with the specifications of open source projects. I wrote test cases with 100% coverage for Leopard. Every time I submitted a commit, I ran the test and passed it before submitting it. I also hoped that this project would not be too watery.

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

Copy after login

Related recommendations:

Node.js template engine jade example explanation

A simple example of php implementing the template engine function

PHP design pattern container deployment framework based on template engine

The above is the detailed content of A simple HTML template engine. For more information, please follow other related articles on the PHP Chinese website!