一个简单的 JavaScript 的模板引擎

一个简单的 javaScript 的模板引擎

比较简单，直接贴代码吧：

(function (global) {    var _version = '1.0.0',        _setting = {            openTag: '<#',          /*逻辑代码的开始标签*/            closeTag: '#>',         /*逻辑代码的结束标签*/            maskOpenTag: '<!-',     /*注释的开始标签*/            maskCloseTag: '-!>'     /*注释的结束标签*/        },        _templateCache = {},        _escapeHTML = function (str) {            if (typeof str === 'string') {                var reg = /&(?!#?/w+;)|<|>|"|'|///g,                    rules = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '/': '/' };                return str.replace(reg, function (m) { return rules[m]; });            }            return str;        },        _compile = function (source, key) {            if (typeof key != 'undefined' && typeof _templateCache[key] === 'function') {                return _templateCache[key];            }            var code = (function () {/*剔除注释代码*/                var arr = (source || '').split(_setting.maskOpenTag);                arrayEach(arr, function (i, o) {                    var _arr = o.split(_setting.maskCloseTag);                    this[i] = _arr.length == 1 ?                        (i == 0 ? _arr[0] : _setting.maskOpenTag + _arr[0]) : _arr[1];                });                return arr.join('');            })();            return _templateCache[key] = (function () {                var codeArr = code.split(_setting.openTag),                    funArr = [                        'var $T = arguments[0];/n',                        'var $data = this || { };/n',                        'var $escapeHTML = $T.escapeHTML;/n',                        'var $htmlArr = [];/n',                        'var $write = function() { Array.PRototype.push.apply($htmlArr, arguments); };/n'];                arrayEach(codeArr, function (i, o) {                    var arr = o.split(_setting.closeTag);                    if (arr.length == 1) {                        funArr.push(html(arr[0]));                    } else {                        funArr.push(logic(arr[0]), html(arr[1]));                    }                });                funArr.push('return $htmlArr.join("");');                try {                    var fun = new Function(funArr.join(''));                } catch (e) {                    var fun = new Function('return "Template Error !"');                }                return function () {                    try {                        return Function.prototype.call.apply(fun, [arguments[0], _t]);                    } catch (e) {                        return e.name + ' : ' + e.message;                    }                };            })();            function arrayEach(arr, fun) {                if (Object.prototype.toString.call(arr) === '[object Array]') {                    if (typeof fun === 'function') {                        for (var i = 0, len = arr.length; i < len; i++) {                            Function.prototype.call.apply(fun, [arr, i, arr[i]]);                        }                    }                }            }            function html(code) {                code = code                    .replace(/"/g, '//"')                    .replace(//r/g, '//r')                    .replace(//n/g, '//n');                return '$write("' + code + '");/n';            }            function logic(code) {                code = code.replace(/^/s+/g, '');                if (code.indexOf('==') === 0) {                    return '$write(' + code.substring(2) + ');/n';                } else if (code.indexOf('=') === 0) {                    return '$write($escapeHTML(' + code.substring(1) + '));/n';                } else {                    return code + '/n';                }            }        },        _t = {            version: _version,            setting: _setting,            templateCache: _templateCache,            escapeHTML: _escapeHTML,            compile: _compile        };    global.T = global.T || {};    for (var it in _t) { global.T[it] = _t[it]; }})(this);

原理很简单，就是读取模版字符串，用字符串的 split 方法分解字符串然后解析处理，最终生成一个的Javascript方法代码，再通过 new Function 创建一个 function

就算编译模版，编译后的模版其实就是一个 function ,这个 function 接收数据参数，下面是个示例：

<script id="t_tmp" type="text/template">    <# if (Object.prototype.toString.call(this) === '[object Array]') { #>        <table>        <# for(var i = 0; i < this.length; i++) { #>            <tr>                <td><#= this[i]['name'] #></td>                <td><#= this[i]['age'] #></td>            </tr>        <# } #>        </table>    <# } #></script>

var data = [    { name: 'xiaoming', age: 23 },    { name: 'xiaohong', age: 20 }];var html = T.compile($('#t_tmp').html(), 't_tmp')(data);

用法也比较简单。