Home > Web Front-end > JS Tutorial > A brief analysis of Prototype's template class Template_prototype

A brief analysis of Prototype's template class Template_prototype

WBOY
Release: 2016-05-16 17:58:41
Original
1419 people have browsed it

Anyone who has used Prototype knows that there is a class called Template. The usage example is as follows:

Copy the code The code is as follows:

var str = '#{what} may have gone, but there is a time of #{how}';
var object = {
what : 'Swallows',
how : 'return'
}
var template_1 = new Template(str);
var result = template_1.evaluate(object);

console.log('result:',result );
//Output: 'Swallows may have gone, but there is a time of return'

This is very convenient, so let’s briefly analyze the implementation principle, which is also the source code A note on interpretation.

Let’s first take a look at some situations that will be used in general requirements. Let’s use the above example to decide our form first. The replacement part is content in the form #{what}, where what is an object A key to the object.
Now there is a question, if object is a nested object, how should we replace it?
That is:
Copy code The code is as follows:



There is a regular var in the source code pattern = /^([^.[] |[((?:.*?[^\])?)])(.|[|$)/; is used to achieve this purpose. By analogy, any deep nesting can be achieved.

To do the replacement, the most important thing we need is to have a method of replacing characters. The source code uses gsub. Here is the simplest version of gsub:
Copy code The code is as follows:



This calling method and principle are the same as what I mentioned earlier Similar to replace, they are basically interchangeable. http://www.cnblogs.com/xesam/archive/2011/12/05/2276783.html
Copy code Code As follows:



template is str in the original example, pattern is the matching rule, and object is the object in the original example; now the focus remains on the implementation of the evaluate method:
Directly call the gsub method, mainly the replacement method in gsub.
Possible situations,
First, object is an empty object, then we directly delete the part that needs to be replaced
For example,

var str = '#{what} may have gone, but there is a time of #{how}';
var object = {}
Then just return ' may have gone, but there is a time of '


Second , the escaped part is retained directly
Copy code The code is as follows:

var str = '\# {what} may have gone, but there is a time of \#{how}';
var object = {
what : 'Swallows',
how : 'return'
}

Then just return '\#{what} may have gone, but there is a time of \#{how}';

These situations must be handled in the code, specifically The code is as follows
Copy code The code is as follows:

Template.prototype.evaluate = function(object) {
//gsub(str,pattern, replacement)
return gsub(this.template,this.pattern,function(match){
var before = match[1];//match here[ 1] is the matching part of (^|.|r|n) in Template.Pattern
var content = match[2];//match[1] here is the (#{(.*? )})The matching part
var expr = match[3];//The match[1] here is the matching part of (.*?) in Template.Pattern
//Example:
// For s#{what}, before='s', content='#{what}', expr='what'

//First, object is an empty object, then we delete it directly Replacement part
if(object == null){
return (match[1] '');
}
//Second, the escape part is directly retained
if (before == '\'){
return content;
}

//In addition to the above two situations, the following is the normal replacement process.
var ctx = object;

//The following regular rule, as I said before, is for matching nested objects. Look at the last (.|[|$) to determine whether there are any nested sub-object matches.
//'.' in #{what.name}
//or '[' in #{what[name]}
//That is, the following match[3]

var pattern = /^([^.[] |[((?:.*?[^\])?)])(.|[|$)/;
match = pattern.exec( expr);

while (match != null) {
if(/^[/.test(match[1])){
var comp = match[2].replace(/ \\]/g, ']');
}else{
var comp = match[1];
}
ctx = ctx[comp];//If ctx[comp] is A string, then the next step can be done. If ctx[comp] is still an object, then sorry, keep working overtime.

if (null == ctx || '' == match[3]){//What needs to be replaced is not a nested sub-object of object, then interrupt the loop directly. Replacement successful, off work.
break;
}

//The following is just to strip out the keywords, other operations are used in the loop and repeated.
if('[' == match[3]){
expr = expr.substring(match[1].length)
}else{
expr = expr.substring(match[0 ].length)
}
match = pattern.exec(expr);
}

return before ctx;
});
};

Of course, the source code is not that simple. It also involves writing detection and judgment, such as replacing illegal characters of str, handling replacement as a string, etc. You can check the source code for details.
What may be a little complicated is to deal with the case where replacement is a string. There is a nested call between gsub and Template, but the meaning is the same. In the end, just throw back a function.
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template