JS template implementation method_javascript skills-JS Tutorial-php.cn

JS template implementation method_javascript skills

WBOY

Release： 2016-05-16 17:38:19

Original

1264 people have browsed it

Overview

When we use JS to render DOM, we usually use strings to create DOM and then attach it to the parent element. If the attached DOM is dynamic and volatile, a lot of logic needs to be written in the function. If it is during the control implementation process, the problems this brings are more serious.

A common solution to this problem is to use templates and pass them into controls as configuration items to separate data and rendering. The specific implementation methods are as follows:

String replacement, use regular matching to replace data into a string.
Rendering function, the function returns a string.
Template engine, which can execute functions in strings (built-in or custom)

Substitute

String replacement is the simplest way to implement templates. Take a look at the specific implementation:

1. Define replacement function

Copy code The code is as follows:

/**

* Replace fields in string.

* @param {String} str template string

* @param {Object} o json data

* @param {RegExp} [regexp] Regular expression matching string

function substitute(str,o,regexp){

return str.replace(regexp || /\?{([^{}] )}/g, function (match, name) {

return (o[name] === undefined) ? '' : o[name];

});

}

2. Use configuration items:

Copy code The code is as follows:

var config = {

data : {value : '123',text:'abc'},

template : '{text}'

};

3. In the process of creating DOM, we call it like this:

Copy code The code is as follows:

var str = substitute(template,data);

$(str).appendTo('body');

Through the above example, we have completed the decoupling of data and strings, which can be flexibly used in controls. Most current JS frameworks provide templates in this way.

On this basis, the following extensions can be made. If you are interested, you can implement them yourself:

1. Use numbers instead of parameter names:

Such as '{0}'

2. Nested use of object attributes:

Such as '{obj.name}'

Advantages: Simple to implement and easy to understand.

Disadvantages: It can only perform simple data structures and cannot handle loops and conditional statements.

Rendering method (Render)

We can handle very complex logic in the rendering function and pass the rendering function as a parameter into the configuration item.

Configuration items:

Copy code The code is as follows:

var config = {

data : [{value : '0',text:'abc'},{value : '1',text:'bcd'}],

renderer : function(obj){

if(obj.value === '0'){

return obj.text;

}else{

return ' ' obj.text ' ';

}

};

When in use:

Copy code The code is as follows:

for(var i = 0; i< data.length ; i ){

var obj = data[i],

str = config.renderer(obj);

$(str).appendTo('body');

}

This is a great solution when dealing with loops, conditional statements.

Advantages: Relatively simple implementation, flexible implementation, able to meet complex data structures, easy to debug

Disadvantages:

The rendering function is a configuration item and is difficult to understand.
When the function is long, the configuration items will be bloated.
Each scene needs to implement its own rendering function.

Template engine (XTemplate)

Every JS UI library will have a powerful template engine. A template engine needs to implement the following functions:

1. String replacement

2. Process complex statements, conditions, loops

3. Use built-in functions

4. Allow users to pass in custom functions

There are currently two common implementation methods of template engines:

1. Use regular expressions to analyze the string, execute the special statement logic, and replace the corresponding data

Let’s take a look at an example of the KISSY template:

'Hello, {{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}.'

The above is a template that can handle loops and conditional statements.

2. Perform syntax analysis on the string, generate a syntax tree, and replace the corresponding tags or data.

The following is how to use Ext’s xtemplate:

Copy code The code is as follows:

var tpl = new Ext.XTemplate(
'

{name}'s favorite beverages:

',
'',
'

- {.}',
''
);
tpl.overwrite(panel.body, data);

Advantages: powerful functions and high flexibility

Disadvantages: It is complicated to use and even harder to understand. Not easy to debug.

Thinking about problems

1. Using templates in controls can separate data and DOM. However, if a control contains a large number of templates, it will increase the user's workload and make it difficult to debug, so a balance needs to be weighed.

2. If a large number of controls use the same template and the same data structure, it is inconvenient to configure each control individually. A better solution is to allow the parent control to configure the template.