Javascript模板

1，什么是模板

模板规定了一定的数据呈现结构，并与动态的数据一起呈现出一个具有一定结构的信息。模板在服务器端使用频繁，MVC中的view往往都是通过一定的模板引擎来实现的（比如java的freemarker），业务上将数据统一交给view层，view层通过一定的模板引擎将数据放到模板的适当位置上。不同的模板引擎都会约定一个或者多个模板的写法，以便它来进行处理。前端的模板处理因为需求的不断加强也日渐活跃起来，世面上也出现了大量的模板引擎比如jade，实现原理基本与服务器上的模板引擎类似，都是字符串的处理，但是前端不同于服务器端的是前端可以处理DOM，这样便会开启了另外一种途径来进行数据填充或者替换。这样一个基本的模板处理方法应该具备一个模板的写法约定以及一个数据结构的约定，高级的模板处理还会引入标签的自定义能力以及引入其他模板文件的能力等。

2，尝试写一个基于字符串处理的简单模板处理实现

　　（1）约定模板写法：

<div class='templater'>
      <div data-config=\'{"aa":"aa"}\'>
            <% for(var i in data.data){%>
             <div class='list' data-config='{\"kk\":\"cc\"}'>
                   <div class='name'  data-config=\'{"aa":"<%=data.data[i].name%>"}\'><%=data.data[i].name%></div>
                   <div class='value'><%=data.data[i].value%></div>
             </div>
             <%}%>
      </div>
</div>

• "<%"与"%>"间可以放入任何javascript代码，必须加“;”结尾，并保证语法正确。
• "<%=%>"是赋值写法。

　　（2）约定数据结构

　　标准json格式即可，模板中访问json数据需要通过data命名空间进行，或者说data指向了传入的json。

　　（3）实现代码如下

    var template = function() {
        this.fn = null;
    };
    template.compile = function(temp) {
        var k = temp.replace(/&lt;%/g, "<%").replace(/%&gt;/g, "%>").replace(/&quot;/g, '"');
        var a = k.split(/<%|%>/g), fn = "var out='';", tfn = null;
        for (var i in a) {
            var t = a[i].replace(/[\t\n\r ]+/g, " ").trim();
            if ((/^=\w*/g).test(t)) {
                fn += "out+=" + t.substring(1, t.length) + ";";
            } else if (/\w*<\w*/g.test(t)) {
                fn += "out+='" + t.replace(/[\']/g, '"') + "';";
            } else if (!/^\s+$/.test(t)) {
                if (/[\{\}\(\)\[\]]/g.test(t)) {
                    fn += t;
                } else {
                    fn += "out+='" + t.replace(/[\']/g, '"') + "';";
                }
            }
        }
        fn += "return out;";
        try {
            tfn = new Function("data", "fn", fn);
        } catch (e) {
            console.log("[template error] " + e.message);
        }
        return tfn;
    };
    template.parselite = function(str, data) {
        str = str.replace(/&lt;%=\w+%&gt;/gi, function(matchs) {
            var returns = data[matchs.replace(/&lt;%=/g, "").replace(/%&gt;/g, "")];
            return returns ? returns : "";
        });
        return str;
    };
    template.prototype.parse = function(temp, data, fn) {
        var result = "";
        if (!this.fn) {
            this.fn = template.compile(temp);
        }
        if (this.fn) {
            try {
                result = this.fn(data, fn);
            } catch (e) {
                console.log("[template error] " + e.message);
            }
        }
        return result;
    };

　　（4）原理：动态Function，并执行。将模板字符串通过正则表达式将"<%%>"替换成合适的javascript语句，然后如果一切没有问题便可以创建出一个function对象，最后使　　之执行，该函数只返回替换数据后的html片段，这样便可以将其插入到dom的合适位置上。

• 优点：javascript文件不是很大，由于只是进行字符串操作而且更新页面只需一次重绘所以性能较好
• 缺点：无法定位模板中错误的位置，不便于调试。
• 注：个人认为前端的模板不应该是大范围的，这样模板本身不会过大，即使模板中出现错误也会较容易处理，所以在小范围实现上以上实现还是可以接受的。

　　上面的实现不能直接使用，可以稍作处理变成jQuery插件，如下：

(function($) {
    $.template = function() {
        var temp = new template(), ths = $(this);
        return {
            render: function(data, fn) {
                var str = ths.html();
                ths.html("[rending...]");
                ths.html(temp.parse(str, data, fn));
                return this;
            }
        };
    };
    $.template = function() {
        var temp = new template(), ths = $(this);
        return {
            parse: function(template,data, fn) {
                return temp.parse(template, data, fn);
            }
        };
    };
    //这里放上面的代码
})(jQuery);

　　使用时可以这样使用：

$("#xxx").template().render(data,fn);
$.template().parse(template,data,fn);

3，尝试写一个基于dom处理的模板实现

　　（1）约定模板写法

<div>
   <div key="tt">
       <div key="tt1"></div>
       <div key="tt2"></div>
       <div key="tt3"></div>
       <div key="tt4"></div>
   </div>
</div>

　　"key"值与json数据中的key值对应，如果出现同名key，根据json的数据层级进行dom复制插入。

　　（2）约定数据结构为json

　　（3）实现代码

var values = function(dom, json, hook) {
        if (util.isArray(json)) {
            json = {json: json};
        }
        for (var i in json) {
            var c = dom.find("*[key='" + i + "']");
            if (typeof json[i] === "object") {
                if (json[i] instanceof Array) {
                    var d = c;
                    for (var m in json[i]) {
                        if (m !== 0) {
                            d = c.clone().appendTo(c.parent());
                        } else {
                            d = c.parent().children(0);
                        }
                        arguments.callee(d, json[i][m], hook);
                    }
                } else {
                    arguments.callee(c, json[i], hook);
                }
            } else {
                if (c.length > 0) {
                    if (hook)
                        hook(i, json[i], c);
                    values.setnodevalue(c, json[i]);
                }
            }
        }
        return dom;
    };
    values.setnodevalue = function(node, value) {
        var name = node.get(0).nodeName.toLowerCase();
        if (values.setter[name]) {
            values.setter[name](node, value);
        } else {
            node.html(value);
        }
    };
    values.setter = {
        a: function(node, value) {
            node.attr("href", value);
        },
        img: function(node, value) {
            node.attr("src", value);
        },
        input: function(node, value) {
            node.val(value);
        },
        select: function(node, value) {
            node.val(value);
        }
    };

　　（4）原理：遍历待处理的整个dom遇到相同key进行数据赋值，根据json的层级自动clone局部dom并插入。

• 优点：清晰未引入浏览器不可识别的元素
• 缺点：大量的dom操作，导致性能不好
• 适用范围：局部的小范围的数据更新

4.在node.js中引入自定义结构以及引入外部模板文件的实现

　　（1）约定模板

<!DOCTYPE>
<html>
    <head>
        <title>xxxxx</title>
    </head>
    <%include("",data,fn)%>
    <body>
        <%for(var i in data){%>
        <div style="margin-bottom: 10px;border-bottom: 1px solid #D7D7D7;">
            <div><span>id:</span><span><%=data[i].id%></span></div>
            <div><span>title:</span><span><%=data[i].title%></span></div>
            <div><span>content:</span><span><%=data[i].content%></span></div>
        </div>
        <%}%>
    </body>
</html>

• "<%"与"%>"间可以放入任何javascript代码，必须加“;”结尾，并保证语法正确。
• "<%=%>"是赋值写法。
• "<%inclue(filename,includedata,functions)%>"引入外部文件并传入模板数据
• "<%username(arguments...)%>"用户自定义方法

　　（2）约定数据为json

　　（3）实现代码node.js module

var fs = require("fs");
var tag = {
    include: function(path, a, b, c, d, e, f, g, h, j, k) {
        try {
            var data = fs.readFileSync(path);
            return new template().parse(data.toString(), a, b, c, d, e, f, g, h, j, k);
        } catch (e) {
            return "";
        }
    }
};
var template = function() {
    this.fn = null;
    var k = function() {
    };
//    k.prototype=tag;
    for (var i in tag) {
        k.prototype[i] = tag[i];
    }
    this.tag = new k();
};
template.compile = function(temp) {
    var k = temp.replace(/&lt;%/g, "<%").replace(/%&gt;/g, "%>").replace(/&quot;/g, '"');
    var a = k.split(/<%|%>/g), fn = "var out='';", tfn = null;
    for (var i in a) {
        var t = a[i].replace(/[\t\n\r ]+/g, " ").trim();
        if ((/^=\w*/g).test(t)) {
            fn += "out+=" + t.substring(1, t.length) + ";";
        } else if (/\w*<\w*/g.test(t)) {
            var cp = t.replace(/[\']/g, '"');
            fn += "out+='" + cp + "';";
        } else if (!/^\s+$/.test(t)) {
            if (/[\{\}\(\)\[\]]/g.test(t)) {
                var istag = false;
                for (var m in tag) {
                    if (t.indexOf(m) === 0) {
                        if (t.split("(")[0].trim() === m) {
                            istag = true;
                            fn += "out+=this." + t + ";";
                            break;
                        }
                    }
                }
                if (!istag) {
                    fn += t;
                }
            } else {
                fn += "out+='" + t.replace(/[\']/g, '"') + "';";
            }
        }
    }
    fn += "return out;";
    try {
        tfn = new Function("data", "fn", fn);
    } catch (e) {
        console.log("[template error] " + e.message);
    }
    return tfn;
};
template.parselite = function(str, data) {
    str = str.replace(/&lt;%=\w+%&gt;/gi, function(matchs) {
        var returns = data[matchs.replace(/&lt;%=/g, "").replace(/%&gt;/g, "")];
        return returns ? returns : "";
    });
    return str;
};
template.prototype.parse = function(temp, data, fn) {
    var result = "", fnx = template.compile(temp);
    if (fnx) {
        try {
            result = fnx.call(this.tag, data, fn);
        } catch (e) {
            console.log("[template error] " + e.message);
        }
    }
    return result;
};
template.prototype.compile = function(temp) {
    return template.compile(temp);
};
template.prototype.simpleParse = function(temp, data) {
    return template.parselite(temp, data);
};

exports.template = function() {
    return new template();
};

　　（4）原理：在上面第一种实现的基础上会对“<%”其后字符串进行判断，判断其是否在tag对象中，如果存在则调用其对应的函数，这样的函数必须返回字符串。上面已经实现　　了在一个模板中引入外部模板文件的方法。

5，总结：

　　上面演示了基于浏览器以及基于node的javascript简单模板处理的实现方法，实际上只是提供了一个思路。成熟的实现会考虑更多的问题，比如异常定位等，简单的实现则需要更多的约定，与使用者间的约定，只有在约定满足的情况下程序才能正常工作或者减少麻烦。于是乎好像与一句话相遇了“约定优于配置，也称作按约定编程”，从某种程度上说约定的也许是更好的选择，比如在浏览器中运行的脚本，为了保证性能，极限的情况就是不让脚本做任何事情，那么也就是说要尽量减少脚本的工作，如果在可控的范围内可以通过增加人工的约定而减少计算机的运算从而提高性能也未必不是一个好的选择。