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 的Document属性和方法集合
Jan 25 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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读取目录及子目录下所有文件名的方法
2014/10/20 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
财政局长自荐信范文
2013/12/22 职场文书
聘任书模板
2014/03/29 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
道士塔读书笔记
2015/06/30 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
django上传文件的三种方式
2021/04/29 Python
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Python 线程池模块之多线程操作代码
2021/05/20 Python
Python中else的三种使用场景
2021/06/16 Python