Home >Web Front-end >JS Tutorial >laytpl Exquisite and clever JavaScript template engine_Others

laytpl Exquisite and clever JavaScript template engine_Others

WBOY
WBOYOriginal
2016-05-16 16:38:351678browse

laytpl is a subversive JavaScript template engine. It uses clever implementation methods to make its size small and exquisite. Not only does its performance approach the extreme, but it also has almost all the functions of traditional front-end engines. All transformation magic is created with less than 1KB of code. This seems to be a revolution, or it may not be, but there is no doubt that laytpl is indeed presenting it to the world in the lightest way. If you have never been exposed to applications in this area, it doesn’t matter. The following description will make you eager to choose laytpl. From now on, you can better grasp the data rendering of the page and reach the pinnacle of life!

laytpl advantages

•Excellent performance, the execution speed is nearly 1 times faster than artTemplate and doT, which are known as the king of performance, and 20-40 times faster than baiduTemplate, kissyTemplate, etc. The larger the data size and rendering frequency, the more obvious it is
•The size is extremely small, less than 1kb, and it will become even smaller in the future.
•Equipped with escape and other security mechanisms, and a more scientific error reporting function
•Native JavaScript can be written arbitrarily in the template to fully ensure the flexibility of the template
•Support application on Node.js platform
•Supports all major browsers, ancient or modern

How to use

Copy code The code is as follows:

//Step one: write the template. You can use a script tag to store the template, such as:

//Step 2: Create a view. Used to present rendering results.

//Step 3: Render template
var data = {
Title: 'Front-end siege division',
list: [{name: 'Xianxin', city: 'Hangzhou'}, {name: 'Xie Liang', city: 'Beijing'}, {name: 'Qianqian', city: 'Hangzhou'}, {name : 'Dem', city: 'Beijing'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
Document.getElementById('view').innerHTML = html;
});

Documentation Description

1. Template syntax

Output a normal field without escaping html: {{ d.field }}

Output a normal field and escape html: {{= d.field }}
JavaScript script: {{# JavaScript statement }}

2. Built-in methods

1): laytpl(template); //Core function, returns an object

 
var tpl = laytpl(template);
tpl.render(data, callback); //Rendering method, returns the rendering result, supports asynchronous and synchronous modes
a): Asynchronous
        tpl.render(data, function(result){
console.log(result);
        });
                             
           b): Synchronization
        var result = tpl.render(data);
console.log(result);

2): laytpl.config(options); //Initialization configuration
Options is an object
{open: 'Start tag', close: 'Close tag'}
 
3): laytpl.v //Get the version number

Notes

1. Just import laytpl.js directly, and you can also directly use Seajs and other modular loading.

2. Laytpl can be used on any business or personal platform
3. Be sure to retain the source under any circumstances and do not remove the laytpl.js header comments.

Official website:

http://sentsin.com/layui/laytpl/

Download:

http://www.jb51.net/codes/207072.html

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn