Baidu JS template engine

Source: Internet
Author: User

1. Application Scenarios

Front-end use of template systems or backend JavaScript environment publishing pages

2. Function description

Provides a set of template syntax, users can write a template block, each time according to the incoming data, generate the corresponding data generated HTML fragments, rendering different effects.

3. Features

1), simple syntax, low learning cost, high development efficiency, cost-effective (using JavaScript native syntax);
2), default HTML Escape (anti-XSS attack), and support including URL escape and other escape;
3), variable undefined automatic output is empty, prevent page confusion;
4), powerful function, such as the delimiter can be customized and other functions;

4. Steps to use

1) Introduce the JS file in the page.

<type= "Text/javascript"  src= "./baidutemplate.js"> </script>

2) Defining template fragments

page, the template block can be placed in <script>, set the Type property to Text/template or text/html, identified by ID, such as:

<IDtype= "text/template"><!--   -<!---   </script  >

or stored in <textarea>, the general setting of its CSS style display:none to hide the textarea, the same ID is identified, such as

<IDstyle= ' display:none; ' > <!--  -<!---   </textarea  >

Templates can also be stored directly in a variable

var TPL = "<!----<!--";

3) Prepare template data, usually in JSON format

Single variable var data = {username: "username"}//array var data={testarr:[' test data 1 ', ' Test Data 2 ', ' Test data3 ']}//object var data = {per Son: "id": 4, "username": "King", "Password": "123456", "Age": 19}}//list set var data = {list: [{"id": 1, "username": "King", " Password ":" 1 "," Age ": 25},{" id ": 2," username ":" King "," Password ":" One "," Age ": 19},{" id ": 3," username ":" King "," Password ":" One "," Age ": 19},{" id ": 4," username ":" King "," Password ":" 123456 "," Age ": 19}]}

4) Data incoming template, generate HTML fragment

Method One: Pass in the template at the same time, also incoming data

If the template fragment is script or defined in textarea, the ID is used to pass in the method,

' Test1 ' represents the ID number in the template fragment, and data represents the prepared template

If you are saving in a variable like a TPL, the format is similar, as follows

TPL represents a defined template variable
var data_html = baidu.template (TPL, data)

Method Two: After passing the template, do not pass data, can be used as a function, so it is divided into two steps.

The incoming template var fun1 = baidu.template (' test1 '); var fun2 = Baidu.template (TPL);//Use the above function var data_html = fun1 (data) var data_html = fun2 (data)

In both methods, method two encapsulates a template as a function that can be called multiple times.

So if a generic template is recommended using method two, otherwise use method one. Specific according to the actual situation.

If you think baidu.template is longer, you can also define an alias such as var bt = baidu.template;

5) using the generated HTML fragment

use HTML fragments in//js to populate the following Divdocument.getelementbyid (' Div_1 '). innerhtml=data_html;//define an empty div container <   = ' div_1 ' ></div > 

5. How to write a template

The format of the definition template is briefly explained in 4.2, and the following is an example of how to define a template, using script as below

The <%%> represents the delimiter, and the syntax in the delimiter is JS syntax:

//Output a single variable<%=title%>//if judgment<%if(list.length) {%>    <H2><%=List.length%></H2><%}Else{%>    <H2>List length is 0<H2><%}%>//for cycle<% for(var i=0; I<List.length;i++){%>     <Li><%=List[i]%></Li><%}%>//About escape, default HTML escape, if not escaped, use the following<%:=title%>Or<%-title%>////There is also a global escape variable control//Set default output variable whether automatic HTML escape, True auto escape, false not escape Baidu.template.ESCAPE = false;

In-template annotations
<!-- 模板中可以用HTML注释 -->  或  <%* 这是模板自带注释格式 *%>

To this end, it is very simple. These are all excerpts from the official website.

General application in the lightweight front-end development, the simple use of JS to develop the front-end page, such as the development of mobile H5, avoid using jquery and other heavyweight front-end framework to affect performance.

Baidu.template.js (not sure if it's official): http://baidufe.github.io/BaiduTemplate/

Baidu JS template engine

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.