// var html = ice("tpl",{
// trs: trs,
// href: "http://images.jb51.net/type4.jpg"
// },{
// title: function(){
// return "<p>这是使用视图helper输出的代码片断</p>"
// }
// });
var elem = document.getElementById('tpl');
var tpl = elem.innerHTML;
var html = ice(tpl,{
trs: trs,
href: "http://images.jb51.net/type4.jpg"
},{
title: function(){
return "<p>这是使用视图helper输出的代码片断</p>"
}
});
console.log(html);
$("#content").html(html);
</script>
</html>
简单的实现:
复制代码 代码如下:
(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 < arr.length; 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'];