laytpl is a disruptive JavaScript template engine. It uses clever implementation methods to make its own size small and exquisite. Not only does it have the ultimate performance, but it also has almost all the functions of a traditional front-end engine. All transformation magic is created by less than 1KB of code, which seems like a revolution, or not, 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 this application, it doesn’t matter. The following story will make you unable to wait to choose laytpl, and from then on, you can better grasp the data rendering of the page and reach the peak of your life!
laytpl advantage
•Excellent performance, 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 scale and rendering frequency, the more obvious it is.
•The volume is simply small to the extreme, less than 1kb, and it will become smaller in the future.
•It has security mechanisms such as escape, and has relatively scientific error reporting functions.
•Native JavaScript can be written arbitrarily in the template to fully ensure the flexibility of the template
•Support application on Node.js platform
•Support all ancient or modern mainstream browsers
How to use
The code copy is as follows:
//Step 1: Write the template. You can use a script tag to store templates, such as:
<script id="demo" type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
<li>
<span>Name: {{ d.list[i].name }}</span>
<span>City: {{ d.list[i].city }}</span>
</li>
{{# } }}
</ul>
</script>
//Step 2: Create a view. Used to render rendering results.
<div id="view"></div>
//Step 3: Rendering the template
var data = {
title: 'Front-end siege',
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 method
1): laytpl(template); //Core function, return an object
var tpl = laytpl(template);
tpl.render(data, callback); // Rendering method, returns rendering results, supports two modes: asynchronous and synchronous
a): Asynchronous
tpl.render(data, function(result){
console.log(result);
});
b): Synchronous
var result = tpl.render(data);
console.log(result);
2): laytpl.config(options); //Initialize the configuration
options is an object
{open: 'start tag', close: 'close tag'}
3): laytpl.v //Get version number
Things to note
1. Just introduce laytpl.js directly, and you can also use Seajs and other modular loading directly.
2. Laytpl can be used at will, both in business and in personal platforms.
3. Be sure to keep the source in any occasion, and do not remove the layoutpl.js header comments.
Official website: http://sentsin.com/layui/laytpl/
Download://www.VeVB.COM/codes/207072.html