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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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
什么是短波收听SWL
2021/03/01 无线电
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JavaScript错误处理
2015/02/03 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
基于python实现从尾到头打印链表
2019/11/02 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
若干个Java基础面试题
2015/05/19 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery