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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
类之Prototype.js学习
Jun 13 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
详解JavaScript中return的用法
May 08 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 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
基于mysql的论坛(3)
2006/10/09 PHP
PHP 开发工具
2006/12/06 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
js实现每日签到功能
2018/11/29 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python rstrip()方法实例详解
2018/11/11 Python
python实现超市商品销售管理系统
2019/10/25 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
小学教育毕业生自荐信
2013/11/18 职场文书
聘任书模板
2014/03/29 职场文书
电子专业自荐信
2014/07/01 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
先进学校事迹材料
2014/12/30 职场文书
商业计划书范文
2019/04/24 职场文书