Talking about template engine __ Template engine

Http://www.cnblogs.com/dojo-lzz/p/5518474.html
Template Principle

The template is created to separate the display from the data, and the template technology is diverse, but its essence is to generate the final HTML code from the template file and data through the template engine.

Template technology is not a mystical technique, it is the manual work of stitching strings. The template engine uses regular expressions to identify the template and replaces the identifier with the data. Like what:

Hello, <%= name%>

The data is {name: ' Tree of Wood '}, then through the template engine parsing, we want to get hello, wood tree. The first half of the template is a normal string, and the latter part is the template identity, and we need to replace the identifier with an expression. The rendering process for the template is as follows:

String replacement thought
function Tmpl (str, obj) {
    if (typeof str = = ' string ') {return
        str.replace (/<%=\s*) ([^%>]+ ) \s*%>/g, function () {
            var key = arguments[1];
            return Obj[key]

;} var str = "Hello, <%= name%>";
var obj = {name: "Lzz"};

Template engine Engine Core

The above demo is a simple string replacement, but for the template engine, the thing to do is more complicated. Typically, you need the following steps: A regular expression that decomposes normal strings and template identifiers,<%=%> is/<%=\s* ([^%>]+) \s*%>/g. Converts a template identifier to a normal language expression to generate a statement to be executed Fill the data into execution, generating the final string

The demo code is as follows:

Compiled thought
function Tmpl (str, obj) {
    if (typeof str = = ' string ') {
        var tm = str.replace (/<%=\s* ([^%>]+) \s *%>/g, function () {
            var key = arguments[1];
            Return "' + obj." + key; Use ' Wrap normal string} ' in function string
        ;

        TM = "return" + TM; "' Hello ' + obj.name"
        var compile = new Function (' obj ', TM);
        return compile (obj);
    }

var str = "Hello, <%= name%>";
var obj = {name: "Lzz"}; Hello, Lzz.

Template Compilation

The above code has the following sections:

        TM = "return" + TM; "' Hello ' + obj.name"
        var compile = new Function (' obj ', TM);

To be able to execute the build string with the data, we need to convert the original template string into a function object. This process is called template compilation. Template compilation uses the new function (), where it creates a function object with the following syntax:

New Function (arg1, arg2,..., functionbody)

The function () constructor takes more than one argument, and the last parameter acts as the contents of the body of the functions, all of which are the parameters of the new function that was generated. Note that the function parameters are all string types, functional body parts for string and function expressions must be distinguished, beginners often in the function body string in the common string and expression of the stitching error. Be sure to stitch the function body string and the inner string correctly, such as:

New Function (' obj ', ' return ' Hello, ' + obj.name ')

Or use the characters in the \ "

New Function (' obj ', ' strip ', "var tmp = \"; with (obj) {tmp = '; for (var i = 0; i < 3; i++) {tmp+= ' name is ' + strip (n) AME) + ';} tmp+= '; } return tmp; ")

The template compiles a function every time using function, wasting CPU. To do this, we can cache the function, and the code is as follows:

//Template precompiled var Tmpl = (function () {var cache = {};
        return function (str, obj) {if (!typeof str = = ' string ') {return;
        var compile = Cache[str]; if (!cache[str]) {var TM = str.replace (/<%=\s* ([^%>]+) \s*%>/g, function () {var key
                = Arguments[1];
            Return "' + obj." + key;
            }); TM = "return" + TM;
            "' Hello ' + obj.name" compile = new Function (' obj ', TM);
        CACHE[STR] = compile; return compile (obj); The compile function should be returned in the case of precompilation