您的位置：首页 > Web前端 > JavaScript

js 模板方法模式

2016-09-17 16:29 253 查看

模板方法模式：父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content"></div>
<script>
function formateString(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#}" title="{#title#}">{#name#}</a>';
this.html = '';
for (var i = 0, len = data.length; i < len; i++) {
this.html +=formateString(this.item, data[i]);
}
return this.html;
}
var NumNav = function (data) {
var tpl = '<b>{#num#}</b>';
for (var i = data.length - 1; i >= 0; i--) {
data[i].name = data[i].name + formateString(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 + formateString(tpl, data[i]);
}
return Nav.call(this, data);
}
var nav = document.getElementById('content');
nav.innerHTML = NumNav([{
href: 'https://www.baidu.com/',
title: '百度一下，你就知道',
name: '百度',
num: '10'
}, {
href:'http://www.qq.com/',
title:'腾讯首页',
name:'腾讯',
num:'2'
}, {
href : 'http://www.taobao.com/',
title:'淘宝商城',
name:'淘宝',
num:'3'
}]);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 设计模式

相关文章推荐

新的分享

章节导航