本来想把之前对arttemplate源码解析的注释放上来分享下，不过隔了一年，找不到了，只好把当时分析模板引擎原理后，自己尝试
写下的模板引擎与大家分享下，留个纪念，记得当时还对比了好几个模板引擎来着。
这里所说的js的模板引擎，用的是原生的javascript语法，所以很类似php的原生模板引擎。
前端模板引擎的作用？
1. 可以让前端开发更简单，不需要为了生成一个dom结构而使用+运算符去拼接字符串，而只需要一个元素的（里面的html模板），或者一个变量（存储着模板），或者一个模板文件
2. 易于维护，减少耦合，假使你的dom结构变化了，不需要更改逻辑代码，而只需要更改对应的模板（文件）
3. 可以缓存，如果你的模板是一个类似.tpl的文件，那么完全可以用浏览器去加载，并且还存下来。说到.tpl文件，可以做的不仅仅是缓存了，你还可以做到通过模块加载器
    将.tpl作为一个模块，那就可以按需加载文件，不是更省宽带，加快页面速度吗？
4. 等等等
前端模板引擎的原理？
原理很简单就是 对象（数据）＋ 模板（含有变量） －> 字符串（html）
前端模板引擎的如何实现？
通过解析模板，根据词法，将模板转换成一个函数，然后通过调用该函数，并传递对象（数据），输出字符串（html）
（当然，具体的还要看代码的）
就像这样：
复制代码 代码如下:
var tpl = 'i am , years old'; // % 词法，标记为变量
var obj = {
    name : 'lovesueee' ,
    age : 24
};
var fn = engine.compile(tpl); // 编译成函数
var str = fn(obj);   // 渲染出字符串
例子：
复制代码 代码如下:
ice demo
tr = this.trs[i];
            if (tr.sex === 女) {
        %>
>
简单的实现：
复制代码 代码如下:
(function (win) {    // 模板引擎路由函数
    var ice = function (id, content) {
        return ice[
            typeof content === 'object' ? 'render' : 'compile'
        ].apply(ice, arguments);
    };
ice.version = '1.0.0';
    // 模板配置
    var iconfig = {
        opentag  : '        closetag : '%>'
    };
var isnewengine = !!string.prototype.trim;
    // 模板缓存
    var icache = ice.cache = {};
    // 辅助函数
    var ihelper = {
        include : function (id, data) {
            return irender(id, data);
        },
        print : function (str) {
            return str;
        }
    };
    // 原型继承
    var iextend = object.create || function (object) {
        function fn () {};
        fn.prototype = object;
        return new fn;
    };
    // 模板编译
    var icompile = ice.compile = function (id, tpl, options) {
        var cache = null;
        id && (cache = icache[id]);
        if (cache) {
            return cache;
        }
        // [id | tpl]
        if (typeof tpl !== 'string') {
            var elem = document.getelementbyid(id);
            options = tpl;
            if (elem) {
                // [id, options]
                options = tpl;
                tpl = elem.value || elem.innerhtml;
            } else {
                //[tpl, options]
                tpl = id;
                id = null;
            }
        }
        options = options || {};
        var render  = iparse(tpl, options);
        id && (icache[id] = render);
        return render;
    };
// 模板渲染
    var irender = ice.render = function (id, data, options) {
        return icompile(id, options)(data);
    };
var iforeach = array.prototype.foreach ?
        function(arr, fn) {
            arr.foreach(fn)
        } :
        function(arr, fn) {
            for (var i = 0; i                 fn(arr[i], i, arr)
            }
        };
// 模板解析
    var iparse = function (tpl, options) {
        var html = [];
        var js = [];
        var opentag = options.opentag || iconfig['opentag'];
        var closetag = options.closetag || iconfig['closetag'];
        // 根据浏览器采取不同的拼接字符串策略
        var replaces = isnewengine
            ?[var out='',line=1;, out+=, ;, out+=html[, ];, this.result=out;]
            : [var out=[],line=1;,  out.push(, );, out.push(html[, ]);, this.result=out.join('');];
        // 函数体
        var body = replaces[0];
        iforeach(tpl.split(opentag), function(val, i) {
            if (!val) {
                return;
            }
            var parts = val.split(closetag);
            var head = parts[0];
            var foot = parts[1];
            var len = parts.length;
            // html
            if (len === 1) {
                body += replaces[3] + html.length + replaces[4];
                html.push(head);
            } else {
                if (head ) {
                    // code
                    // 去除空格
                    head = head
                        .replace(/^\s+|\s+$/g, '')
                        .replace(/[\n\r]+\s*/, '')
// 输出语句
                    if (head.indexof('=') === 0) {
                        head = head.substring(1).replace(/^[\s]+|[\s;]+$/g, '');
body += replaces[1] + head + replaces[2];
                    } else {
                        body += head;
                    }
                    body += 'line+=1;';
                    js.push(head);
                }
                // html
                if (foot) {
                    _foot = foot.replace(/^[\n\r]+\s*/g, '');
                    if (!_foot) {
                        return;
                    }
                    body += replaces[3] + html.length + replaces[4];
                    html.push(foot);
                }
            }
        });
        body = var render=function(data){ice.mix(this, data);try{
            + body
            + replaces[5]
            + }catch(e){ice.log('rend error : ', line, 'line');ice.log('invalid statement : ', js[line-1]);throw e;}};
            + var proto=render.prototype=iextend(ihelper);
            + ice.mix(proto, options);
            + return function(data){return new render(data).result;};;
        var render = new function('html', 'js', 'iextend', 'ihelper', 'options', body);
        return render(html, js, iextend, ihelper, options);
    };
    ice.log = function () {
        if (typeof console === 'undefined') {
            return;
        }
        var args = array.prototype.slice.call(arguments);
        console.log.apply && console.log.apply(console, args);
    };
    // 合并对象
    ice.mix = function (target, source) {
        for (var key in source) {
            if (source.hasownproperty(key)) {
                target[key] = source[key];
            }
        }
    };
    // 注册函数
    ice.on = function (name, fn) {
        ihelper[name] = fn;
    };
    // 清除缓存
    ice.clearcache = function () {
        icache = {};
    };
    // 更改配置
    ice.set = function (name, value) {
        iconfig[name] = value;
    };
    // 暴露接口
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = template;
    } else {
        win.ice = ice;
    }
})(window);