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事件模型代码
Jul 01 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
js取得url地址参数实例
Feb 22 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
完美的js图片轮换效果
Feb 05 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
vue 实现动态路由的方法
Jul 06 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php获取根域名方法汇总
2014/10/28 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python的re模块应用实例
2014/09/26 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
最小二乘法及其python实现详解
2020/02/24 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
校园学雷锋活动月总结
2014/03/09 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
单位授权委托书范本
2014/09/26 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
计划生育汇报材料
2014/12/26 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
辩论赛新闻稿
2015/07/17 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
PHP基本语法
2021/03/31 PHP
python 中yaml文件用法大全
2021/07/04 Python
python识别围棋定位棋盘位置
2021/07/26 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python