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 相关文章推荐
document.createElement()用法
Mar 13 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 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 已经成熟
2006/12/04 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python函数装饰器用法实例详解
2015/06/04 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
django正续或者倒序查库实例
2020/05/19 Python
大学生毕业自我鉴定范文
2013/09/19 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
销售团队口号大全
2014/06/06 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
年度考核个人总结
2015/03/06 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python