zoukankan      html  css  js  c++  java
  • 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"'
    }
    ]);
  • 相关阅读:
    机器学习笔记1
    Matlab学习日记之基础知识
    Matlab学习日记之操作界面
    Matlab学习日记之绘图
    Matlab学习日记之数学应用
    Matlab学习日记之映像
    机器学习笔记4
    机器学习笔记2
    在线CHM阅读器(2)——文件提取及关键文件解析
    一步一步打造WebIM(1)
  • 原文地址:https://www.cnblogs.com/redn/p/8119419.html
Copyright © 2011-2022 走看看