溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
