js 模板方法模式

父类中定义算法骨架，子类中实现和改变一些算法

例：导航的实现

//算法骨架
var formateStr=function (param, data) {
 ???return param.replace(/\{#(\w+)#\}/g,function (match, key) {
 ???????return typeof data[key]===undefined? "":data[key]
 ???})
};
var Nav=function (data) {
 ???var _this=this;
 ???_this.item=‘<li><a href="{#hrefUrl#}" title="{#title#}" {#sign#}>{#content#}</a></li>‘;
 ???_this.html=‘<ul>‘;
 ???for (var i=0,l=data.length;i<l;i++){
 ???????_this.html+=formateStr(_this.item,data[i])
 ???}
 ???_this.html+=‘</ul>‘;
 ???return _this.html;
};

//基础导航
 ???var obNav=document.getElementById(‘nav‘);
 ???obNav.innerHTML=Nav([
 ???????{
 ???????????hrefUrl : ‘http://www.baidu.com‘,
 ???????????content : ‘百度一下‘
 ???????},
 ???????{
 ???????????hrefUrl : ‘http://www.zhihu.com‘,
 ???????????content : ‘知乎一下‘
 ???????}
 ???]);

//带提示消息的导航
var infoNav=function (data) {
 ???var _this=this;
 ???_this.info=‘<i>{#num#}</i>‘;
 ???for (var i=data.length-1;i>=0;i--){
 ???????data[i].content+=formateStr(_this.info,data[i])
 ???}
 ???return Nav.call(this,data)
};
var objNav=document.getElementById(‘nav‘);
objNav.innerHTML=infoNav([
 ???{
 ???????hrefUrl : ‘http://www.baidu.com‘,
 ???????content : ‘百度一下‘,
 ???????title : ‘百度‘,
 ???????num : ‘10‘,
 ???????sign : ‘sign="1"‘
 ???},
 ???{
 ???????hrefUrl : ‘http://www.zhihu.com‘,
 ???????content : ‘知乎一下‘,
 ???????title : ‘知乎‘,
 ???????num : ‘10‘,
 ???????sign : ‘sign="2"‘
 ???}
]);