//简单模板模式包含三部分:字符串模板库、格式化方法、字符串拼接
/**
* 简单模板模式,一个很有趣的模式
* 定义似乎是 通过格式化字符串拼凑出现视图,避免创建视图时的大量节点操作,优化内存开销
* 大约是用字符串拼出来,然后用正则替换数字部分,最后把他丢进html里
*
* */
window.onload = function() {
var A = {
root: document.getElementById('container'),
formatString: function(str, data) {
return str.replace(/{#(\w+)#}/g,
function(match, key) {
return typeof data[key] === undefined ? '' : data[key];
});
},
listPart: function(data) {
var s = document.createElement('div');
var template = [
'<h1> this is a template create by {#name#} </h1>',
'<p> 今天的天气是{#weather#}</p>'
].join('');
s.innerHTML = this.formatString(template, data);
return s;
},
init: function(data) {
this.root.appendChild(this.listPart(data));
}
};
A.init({
name: 'xiaoT',
weather: '晴天'
});
};
/*****************************************************************/
// 模板渲染方法
A.formatString = function(str, data) {
return str.replace(/\{#(\w)#\}/g,
function(match, key) {
return typeof data[key] === 'undefined' ? '' : data[key];
});
}
// 模板生成器
A.view = function(name) {
var v = {
code: '<pre><code>{#code#}</code></pre>',
img: '<img src="{#src#}" alt="{#alt#}" title="{#title#}" />',
part: '<div id="{#id#}" class="{#class#}">{#part#}</div>',
theme: [
'<div>',
'<h1>{#title#}</h1>',
'{#content#}',
'</div>'
].join('')
}
if (Object.prototype.toString.call(name) === "[object Array]") {
var tpl = '';
for (var i = 0, len = name.length; i < len; i++) {
tpl += arguments.callee(name[i]);
}
return tpl;
} else {
return v[name] ? v[name] : ('<' + name + '>{#' + name + '#}</' + name + '>');
}
}
JavaScript设计模式(二十九)【简单模板模式】
最新推荐文章于 2022-09-01 11:51:58 发布