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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
javascript数组去重小结
Mar 07 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
js微信支付实现代码
Dec 22 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
React服务端渲染(总结)
Jul 01 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
Javascript事件实例详解
2013/11/06 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
微信小程序实现美团菜单
2018/06/06 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue项目中引入Sass实例方法
2019/08/27 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
男方父母证婚词
2014/01/12 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
公司欠款证明
2015/06/24 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
2016银行求职自荐信
2016/01/28 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL