首页 > 代码库 > 一个简单的 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 = http://www.mamicode.com/this || { };/n‘,"");‘); 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 = http://www.mamicode.com/[>
用法也比较简单。
一个简单的 JavaScript 的模板引擎
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。