Laytpl exquisite and clever JavaScript template engine, laytpljavascript

Laytpl exquisite and clever JavaScript template engine, laytpljavascript

Laytpl is a revolutionary JavaScript template engine. It uses clever implementation methods to make its own volume small and exquisite, not only to achieve the ultimate performance, it also provides almost all functions of traditional front-end engines. All the transformer magic is created by less than 1 kb of code. It seems like a revolution, or not, but there is no doubt that laytpl is indeed presented to the world in the most lightweight way. If you have never been familiar with this application, it doesn't matter. The following describes how to choose laytpl, so that you can better grasp the page Data Rendering and embark on the peak of your life!

Advantages of laytpl

• Excellent performance: the execution speed is nearly twice faster than the artTemplate and doT of the so-called performance king, and 20-40 times faster than baiduTemplate and kissyTemplate. The larger the data scale and rendering frequency, the more obvious
• The size is almost small, less than 1 kb, and it will become smaller in the future.
• Provides escape and other security mechanisms and more scientific error reporting functions
• Native JavaScript can be written in any template to fully ensure the flexibility of the template
• Support applications on the Node. js Platform
• Supports all mainstream browsers in ancient or modern times

Usage

Copy codeThe Code is as follows:
// Step 1: Compile the template. You can use a script tag to store templates, such:
<Script id = "demo" type = "text/html">
<H1 >{{ d. title }}<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: render the Template
Var data = {
Title: 'front-end captors ',
List: [{name: 'xianxin', city: 'hangzhou'}, {name: 'xie liang', city: 'beijing'}, {name: 'shair ', city: 'hangzhou'}, {name: 'dem ', city: 'beijing'}]
};
Var gettpl = document. getElementById ('Demo'). innerHTML;
Laytpl (gettpl). render (data, function (html ){
Document. getElementById ('view'). innerHTML = html;
});

Document Description

I. template syntax

Output A common field without escaping html: {d. field }}
Output A common 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); // The rendering method that returns the rendering result. asynchronous and synchronous modes are supported.
A): asynchronous
Tpl. render (data, function (result ){
Console. log (result );
});

B): Synchronization
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 // obtain the version number.

Notes

1. You can directly introduce laytpl. js. You can also directly use Seajs and other modular loading methods.
2. Any commercial or personal platform can use laytpl
3. The source must be retained in any situation. Do not remove comments from the laytpl. js header.

Http://sentsin.com/layui/laytpl/

Download: http://www.bkjia.com/codes/207072.html

How to Use the doT template engine in express

There are too many js template engines. Fortunately, JavaScript template language shootoff is a constantly updated article that helps us use the real test results, we can see that the fastest template engine installed doT $ sudo npm install dot allows express to use dot to install the template engine Convention of express. The engine must have a compile method that accepts the str and options parameters, return a function object. The interface is roughly as follows: exports. compile = function (str, options) {// compile template str // return function} Obviously, you only need to implement the compile interface. // dot. express. js var dot = require ('dot '); exports. compile = function (str, options ){ Return dot. template (str) ;}; use dot. express. jsvar dot_express = require ('dot. express '); app. set ("view engine", "html"); app. register (". html ", dot_express); // render app. get ('/', function (req, res, next) {res. render ('index', {world: 'World'}) ;}); simpler var dot = require ('dot '); app. set ("view engine", "html"); app. register (". html ", {compile: function (str) {return dot. template (str );}}); Make your html template file pass the smart prompt to verify that the default dot Delimiter is {And}, so that the template file will be as follows // index.html hello {{! In this case, you cannot use the HTML smart prompt to check tenjin. You can change the delimiter to one that can be verified by the smart prompt. // index. js dot. templateSettings. begin ='

Open source javascript Game Engine

Game engines are divided into many types.
After HTML5 Canvas was launched on JS, many game engines, such as QuarkJS made in China, emerged one after another.
Some well-known game engines have also released JS versions, such as Box2D Web, Cocos2D, and Oak3D.