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 相关文章推荐
理解js对象继承的N种模式
Jan 25 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JavaScript Array对象详解
Mar 01 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python中去空格函数的用法
2014/08/21 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python中new方法的详解
2019/01/15 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
给老师的检讨书
2014/02/11 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL