一个简单的javascript前端模版引擎
2013-03-21 21:07
621 查看
(function(window,undefined){ var cache = {}; window.etic = function (str, data){ if (!cache[str] ){ var tpl = $(str)[0].innerHTML var fCon = 'var p = [];' while (true){ var pst = tpl.indexOf('<?') if (pst < 0) { fCon += "p.push('"+ tpl.replace(/[\r\t\n]/g, " ") +"');return p.join('');" break } var pend = tpl.indexOf('?>' ,pst) var preHtml = tpl.substr(0,pst) .replace(/[\r\t\n]/g, " ") var scCon = tpl.substring(pst+2 , pend) .replace(/\n/g,';') tpl = tpl.substr(pend+2) if ('=' == scCon.charAt(0) ) scCon = ";p.push("+ scCon.substr(1) +");" fCon += "p.push('"+ preHtml +"');" + scCon } cache[str] =new Function('',fCon) } var fn = cache[str] return data ? fn.apply( data ) :fn } })(this)
或者更简单的(这个速度略快,基本代码来自John Resig)
(function(window,undefined){ var cache = {}; window.etic = function (str, data){ if (!cache[str] ){ var tpl = $(str)[0].innerHTML tpl = tpl .replace(/[\r\t\n]/g, " ") .split("<\?").join("\t") .replace(/((^|\?>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)\?>/g, "',$1,'") .split("\t").join("');") .split("\?>").join("p.push('") .split("\r").join("\\'") cache[str] = new Function("", "var p=[];p.push('" + tpl + "');return p.join('');"); } return data ? cache[str].apply( data ): fn } })(this)
模版内容:
<script type=text/plain id=ul> <ul> title: <?= this.title ?> <? var i = 0 ,j = this.ul.length; for (;i < j ;i++){ ?> <li>= <?= this.ul[i] ?></li> <? }?> </ul> </script>
调用方法
var dul = {ul:['a','b'] , title:'tt'} console.log(etic('#ul' ,dul))
=》
<ul> title: tt <li>= a</li> <li>= b</li> </ul>
相关文章推荐
- jtemplate 为javascript前端html模版引擎
- 实现一个最简单的模版引擎
- 教你使用javascript简单写一个页面模板引擎
- 一个简单的前端JavaScript手机号码输入验证方案
- 一个前端攻城狮的全栈之路第四弹:jade模板引擎的简单介绍和使用
- 自创的 TplTool,一个简单易用的前端模版JS组件(2016年小小成果)
- 简单JavaScript模版引擎优化
- 自己写一个简单的模版引擎 推荐
- 教你使用javascript简单写一个页面模板引擎
- 简单JavaScript模版引擎优化
- 一个前端html模板处理引擎(javascript) - pure
- 一个简单的ObjC和JavaScript交互工具
- 一个简单的用javascript实现的页面内容过滤显示小程序源码
- 最简单的JS模版引擎
- javascript模版引擎-tmpl的bug修复与性能优化
- html 如何引入一个公共的头部和底部(不使用模版引擎如jsp、freemarker、velocity的方式)
- 一个基于JavaScript的简单网页计算器
- 如何实现一个简单的工作流审批引擎——请看
- 一个简单的 .Net Vim 引擎 LibNVim 开发记录 (三)
- V8 JavaScript Engine 入门指南 3 -- 一个简单的V8应用