js 模板方法模式

Posted 2020-10-20 redn

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

例：导航的实现

//算法骨架
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"‘
    }
]);