javascript 中模板方法单例的实现方法

 更新时间:2017年10月17日 09:25:16   作者:res_min  
这篇文章主要介绍了javascript 中模板方法单例的实现方法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

javascript 中模板方法单例的实现方法

模板方法单例

模板方法的定义:父类中定义一组操作算法骨架,将一些实现步骤延伸到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。

代码块

html部分,例如:

<div id="content"></div>

js部分,例如:

  //格式化字符串方法
  function fromateString(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#}" rel="external nofollow" title="{#title#}">{#name#}</a>';
   //创建字符串
   this.html='';
   for (var i = 0; i < data.length; i++) {
    this.html += fromateString(this.item, data[i]);
   }
   return this.html;
  }
  //带有信息提示信息导航
  var NumNav = function (data) {
   //消息提醒小心组件模板
   var tpl = '<p>{#num#}</p>';
   for (var i = data.length -1; i >= 0; i--) {
    data[i].name += data[i].name + fromateString(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 + fromateString(tpl, data[i]);
   }
   return Nav.call(this, data);
  }

  //测试带有信息提示的导航
  var nav = document.getElementById('content');
  nav.innerHTML = NumNav([
   {
    href : 'www.baidu.com',
    title : '百度一下你就知道',
    name : '百度',    
    num : 10,
    link : 'www.baidu.com'
   },
   {
    href : 'www.taobao.com',
    title : '淘宝商城',
    name : '淘宝',    
    num : 2,
    link : 'www.taobao.com'
   },
   {
    href : 'www.qq.com',
    title : '腾讯首页',
    name : '腾讯',    
    num : 3,
    link : 'www.qq.com'
   }
  ]);

其实模板方法模式不仅仅在我们归一化组件的时候使用 有时候创建页面时也是很常用到的。通过上述代码可以衍生出的静态页面的封装以及业务逻辑的交互封装。

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • js实现图片加载淡入淡出效果

    js实现图片加载淡入淡出效果

    这篇文章主要为大家详细介绍了js实现图片加载淡入淡出效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    这篇文章主要介绍了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果,涉及javascript基于onscroll事件动态改变页面元素样式的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 老生常谈jacascript DOM节点获取

    老生常谈jacascript DOM节点获取

    下面小编就为大家带来一篇老生常谈jacascript DOM节点获取。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • js的函数的按值传递参数(实例讲解)

    js的函数的按值传递参数(实例讲解)

    下面小编就为大家分享一篇js的函数的按值传递参数的实例,具有很好的参考价值,一起跟随小编过来看看吧,希望对大家有所帮助
    2017-11-11
  • javascript fullscreen全屏实现代码

    javascript fullscreen全屏实现代码

    用了实现打开一个满屏的代码
    2009-04-04
  • 小试SVG之新手小白入门教程

    小试SVG之新手小白入门教程

    这篇文章主要给大家介绍了关于SVG的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • JS常用正则表达式总结【经典】

    JS常用正则表达式总结【经典】

    这篇文章主要介绍了JS常用正则表达式,总结分析了常见的数字、字符、邮箱、身份证、电话等的正则验证技巧,需要的朋友可以参考下
    2017-05-05
  • layer ui插件显示tips时,修改字体颜色的实现方法

    layer ui插件显示tips时,修改字体颜色的实现方法

    今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信JS接口大全

    微信JS接口大全

    这篇文章主要为大家分享了最全面详细的微信JS接口大全,希望对大家有帮助,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript中的面向对象

    javascript中的面向对象

    本文主要介绍了javascript中面向对象的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03

最新评论