javascript 中模板方法单例的实现方法
模板方法单例
模板方法的定义：父类中定义一组操作算法骨架，将一些实现步骤延伸到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。
代码块
html部分，例如：
<div id="content"></div>
js部分，例如：
//格式化字符串方法
function fromateString(str, data) {
return str.replace(/\{#(\w+)#\}/g, function(match, key){
return typeof data[key] === undefined ? '' : data[key]
});
}
//基础导航
var Nav = function (data) {
//基础导航样式模板
this.item = '<a href="{#href#}" rel="external nofollow" title="{#title#}">{#name#}</a>';
//创建字符串
this.html='';
for (var i = 0; i < data.length; i++) {
this.html += fromateString(this.item, data[i]);
}
return this.html;
}
//带有信息提示信息导航
var NumNav = function (data) {
//消息提醒小心组件模板
var tpl = '<p>{#num#}</p>';
for (var i = data.length -1; i >= 0; i--) {
data[i].name += data[i].name + fromateString(tpl, data[i]);
}
return Nav.call(this, data);
}
//带有链接地址的导航
var LinkNav = function (data) {
//消息提醒小心组件模板
var tpl = '<span>{#link#}</span>';
for (var i = data.length -1; i >= 0; i--) {
data[i].name += data[i].name + fromateString(tpl, data[i]);
}
return Nav.call(this, data);
}
//测试带有信息提示的导航
var nav = document.getElementById('content');
nav.innerHTML = NumNav([
{
href : 'www.baidu.com',
title : '百度一下你就知道',
name : '百度',
num : 10,
link : 'www.baidu.com'
},
{
href : 'www.taobao.com',
title : '淘宝商城',
name : '淘宝',
num : 2,
link : 'www.taobao.com'
},
{
href : 'www.qq.com',
title : '腾讯首页',
name : '腾讯',
num : 3,
link : 'www.qq.com'
}
]);
其实模板方法模式不仅仅在我们归一化组件的时候使用 有时候创建页面时也是很常用到的。通过上述代码可以衍生出的静态页面的封装以及业务逻辑的交互封装。
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
