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模块化和命名空间管理的问题说明
Dec 06 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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 session安全问题分析
2011/06/24 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python实现加密的方式总结
2020/01/19 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
selenium如何定位span元素的实现
2021/01/13 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
保健品市场营销方案
2014/03/31 职场文书
卖车协议书
2014/04/21 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014年司法所工作总结
2014/11/22 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书