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 cookies实现简单统计访问次数
Nov 24 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
js数据类型检测总结
2018/08/05 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python新手如何理解循环加载模块
2020/05/29 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
拓展培训心得体会
2014/01/04 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
中考标语大全
2014/06/05 职场文书
消防安全宣传标语
2014/06/07 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
小学领导班子对照材料
2014/08/23 职场文书
先进班组事迹材料
2014/12/25 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
辩护意见书
2015/06/04 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL