模板方法单例分享
来源:互联网 发布:明代鸟铳 数据 编辑:程序博客网 时间:2024/05/16 12:59
模板方法单例
模板方法的定义:父类中定义一组操作算法骨架,将一些实现步骤延伸到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。
代码块
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#}" 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的一些项目常用总结,欢迎大家提出问题,以及探讨。
1 0
- 模板方法单例分享
- 单例模式分享
- (6)单例模式和模板方法模式
- [学习笔记]Java模板方法和单例设计模式
- 黑马程序员--单例模式与模板方法模式
- [学习笔记]Java模板方法和单例设计模式
- 单例模式、工厂模式、抽象模式、模板方法模式
- 单例模板一则
- 单例模式 模板
- 单例模式模板
- C++单例模板
- 单例模板
- 单例模板类
- 单例模板
- c++单例模板
- C++ 单例模板
- java 模板 单例
- JAVA模板 单例
- javax.servlet.jsp cannot be resolved to a type
- nginx+tomcat 共享session
- 转:solr中facet及facet.pivot理解(整合两篇文章保留参考)
- MySQL数据库/视图
- 【Android】简介
- 模板方法单例分享
- 博客以及作者说明
- Elasticsearch(二)-数据
- 视图
- iOS应用内跳转至App Store 以及获取App Store内最新版本号
- swustoj经典矩阵(1173)
- 51Nod 1432 独木舟 (贪心
- 设计模式之装饰器模式
- android wifiservice enable流程