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 textarea自动增高并隐藏滚动条
Dec 16 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jquery+json实现分页效果
Mar 07 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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解析html的实现代码
2011/08/08 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python实现朴素贝叶斯算法
2018/11/19 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python如何输出警告信息
2020/07/30 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
质检员的岗位职责
2013/11/15 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
接待员岗位责任制
2014/02/10 职场文书
党性观念心得体会
2014/09/03 职场文书
环卫工作个人总结
2015/03/04 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle