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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
substr()函数中文版
2006/10/09 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python实现简单图片物体标注工具
2019/03/18 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
元旦活动感言
2014/03/08 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
营销计划书范文
2015/01/17 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
2015年暑期见闻
2015/07/14 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python