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


Posted in Javascript onOctober 17, 2017

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'
   }
  ]);

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

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

Javascript 相关文章推荐
javascript document.compatMode兼容性
Feb 23 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
javascript学习小结之prototype
Dec 03 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 #Javascript
react中的ajax封装实例详解
Oct 17 #Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 #Javascript
Vue中封装input组件的实例详解
Oct 17 #Javascript
js获取文件里面的所有文件名(实例)
Oct 17 #Javascript
You might like
Zend的Registry机制的使用说明
2013/05/02 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
jquery tools之tooltip
2009/07/25 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
浅析Python数据处理
2018/05/02 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
单位领导证婚词
2014/01/14 职场文书
暑期培训心得体会
2014/09/02 职场文书
2014年电教工作总结
2014/12/19 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server