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一点特殊用法
May 28 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
详解PHP归并排序的实现
2016/10/18 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
python封装对象实现时间效果
2020/04/23 Python
用python写asp详细讲解
2013/12/16 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python执行get提交的方法
2015/04/29 Python
python使用turtle绘制分形树
2018/06/22 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
会计应聘求职信范文
2013/12/17 职场文书
关于爱情的广播稿
2014/01/16 职场文书
简单租房协议书
2014/04/09 职场文书
银行求职信范文
2014/05/26 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
公司保洁员管理制度
2015/08/04 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
决心书格式及范文
2019/06/24 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python