主要强调正则replace的妙用,之前都没有这样使用过replace
上一篇文章链接:http://blog.csdn.net/xiaomogg/article/details/53270321
//格式化字符串方法
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() {
//链接地址模板
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("nav");
nav.innerHTML = NumNav([{
href: "http://www.baidu.com",title: "百度一下，百度会死人的",name: "百度",num: "100"
},{
href: "http://www.taobao.com",title: "淘宝商城",name: "淘宝",num: 2
},{
href: "http://www.qq.com",title: "腾讯首页",name: "腾讯",num: "3"
}
])
html调用:
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>`</title> </head> <body> <div id="nav"></div> <script src="template2.js"></script> </body> </html>