《Javascript设计模式与开发实践》关于设计模式典型代码的整理:单例模式、策略模式、代理模式、迭代器模式、发布-订阅模式、命令模式、组合模式
1、单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点。
使用闭包封装私有变量
// 使用闭包创建单例
var user = (function () {
var _name = 'sven',
_age = 29;
return {
getUserInfo: function () {
return _name + '-' + _age;
}
}
})();
惰性单例(只在合适的时候创建对象,并且之创建唯一的一个,试用于dom重复生成、事件绑定等场景)
// 惰性单例生成
var getSingle = function (fn) {
var result;
return function () {
return result || (result = fn.apply(this, arguments));
}
};
2、策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
// 策略模式
var strategies = {
"S": function (salary) {
return salary * 4;
},
"A": function (salary) {
return salary * 3;
},
"B": function (salary) {
return salary * 2;
},
};
var calculateBonus = function (level, salary) {
return strategies[level](salary);
}
// 测试
console.log(calculateBonus('S', 20000));
console.log(calculateBonus('A', 10000));
3、代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问。
// 虚拟代理
var myImage = (function () {
var imgNode = document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc: function (src) {
imgNode.src = src;
}
}
})();
var proxyImage = (function () {
var img = new Image;
img.onload = function () {
myImage.setSrc(this.src);
}
return {
setSrc: function (src) {
myImage.setSrc('file:// /C:/Users/svenzeng/Desktop/loading.gif');
img.src = src;
}
}
})();
// 测试
proxyImage.setSrc('http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );
// 缓存代理
var mult = function () {
console.log('开始计算乘积');
var a = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];
}
return a;
}
var proxyMult = (function () {
var cache = {};
return function () {
var args = Array.prototype.join.call(arguments, ',');
if(args in cache) {
return cache[args];
}
return cache[args] = mult.apply(this, arguments);
}
})();
// 测试
proxyMult(1,2,3,4);
proxyMult(1,2,3,4);
4、迭代器模式:提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。
// 迭代器模式
var each = function(ary, callback) {
for (var i = 0, l = ary.length; i < l; i++) {
callback.call(ary[i], i, ary[i]);
}
};
// 测试
each([1, 2, 3], function(i, n) {
alert ([i, n]);
});
5、发布-订阅模式:它定义对象间的一种一对多的依赖关系,当一个对象的状 态发生改变时,所有依赖于它的对象都将得到通知。
// 发布-订阅模式
var event = {
clientList: [],
listen: function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
},
trigger: function () {
var key = Array.prototype.shift.call(arguments);
fns = this.clientList[key];
if (!fns || fns.length === 0) { // 如果没有绑定对应的消息
return false;
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
},
remove: function (key, fn) {
var fns = this.clientList[key];
if (!fns) { // 如果 key 对应的消息没有被人订阅,则直接返回
return false;
}
if (!fn) { // 如果没有传入具体的回调函数,表示需要取消 key 对应消息的所有订阅
fns && (fns.length = 0);
} else {
for (var l = fns.length - 1; l >= 0; l--) {
var _fn = fns[l];
if (_fn ===fn) {
fns.splice(l, 1); // 删除订阅者的回调函数
}
}
}
}
};
// 安装发布—订阅功能
var installEvent = function (obj) {
for (var i in event) {
obj[i] = event[i];
}
};
// 测试
var salesOffices = {};
installEvent( salesOffices );
salesOffices.listen( 'squareMeter88', fn1 = function( price ){
console.log( '价格= ' + price );
}); // 小明订阅消息
salesOffices.listen( 'squareMeter88', fn2 = function( price ){
console.log( '价格= ' + price );
}); // 小红订阅消息
salesOffices.remove( 'squareMeter88', fn1 );
salesOffices.trigger( 'squareMeter88', 2000000 ); // 输出:2000000
6、命令模式:用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系。
// 命令模式
var bindClick = function (button, func) {
button.onclick = func;
};
var MenuBar = {
refresh: function () {
console.log('刷新菜单界面');
}
};
var SubMenu = {
add: function () {
console.log('增加子菜单');
},
del: function () {
console.log('删除子菜单');
}
};
// 测试
bindClick(button1, MenuBar.refresh);
bindClick(button2, SubMenu.add);
bindClick(button3, SubMenu.del);
7、组合模式:将对象组合成树形结构,以表示“部分-整体”的层次结构。
// 组合模式
var closeDoorCommand = {
execute: function () {
console.log('关门');
}
};
var openPcCommand = {
execute: function () {
console.log('开电脑');
}
};
var openQQCommand = {
execute: function () {
console.log('登录 QQ');
}
};
var MacroCommand = function () {
return {
commandsList: [],
add: function (command) {
this.commandsList.push(command);
},
execute: function () {
for (var i = 0, command; command = this.commandsList[i++];) {
command.execute();
}
}
}
};
// 测试
var macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand);
macroCommand.execute();
转自:https://blog.csdn.net/QQsilhonette/article/details/84943932
《Javascript设计模式与开发实践》关于设计模式典型代码的整理:单例模式、策略模式、代理模式、迭代器模式、发布-订阅模式、命令模式、组合模式的更多相关文章
- JavaScript设计模式与开发实践 - 观察者模式
概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- JavaScript设计模式与开发实践 - 策略模式
引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...
- JavaScript设计模式与开发实践 - 单例模式
引言 本文摘自<JavaScript设计模式与开发实践> 在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返 ...
- 《javascript设计模式与开发实践》--- (单一职责原则)
看的这本书叫<JavaScript设计模式与开发实践> 先规划一下看书的顺序,基础知识我已经大概的浏览了一遍了,没有留下笔记,以后有时间还会补上.本来打算顺着看的.但是我感觉我很难短时间内 ...
- JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...
- 《JavaScript设计模式与开发实践》读书笔记-基础知识
笔记内容多摘录自<JavaScript设计模式与开发实践>(曾探著),侵删. 面向对象的JavaScript 1. 动态需要类型和鸭子类型 鸭子类型 如果它走起路来像鸭子,叫起来也是鸭子, ...
- 《Javascript设计模式与开发实践》--读书笔记
第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...
- 《JavaScript设计模式与开发实践》知识点笔记
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...
- JavaScript设计模式与开发实践——JavaScript的多态
“多态”一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的对象上面,可以产生不 ...
随机推荐
- PHP 距离我最近排序+二维数组按指定列排序
思路: 1.获取我的位置,即:我的经纬度 2.各站点须有位置 即:排序对象有位置经纬度 3.查询要排序的站点列表 4.循环遍历计算 与我的距离 5.二维数组按 指定列(距离)排序 具体如下: ...
- Nginx https服务器证书安装步骤
本文档指导您如何在 Nginx 服务器中安装 SSL 证书. 说明: 本文档以证书名称 www.domain.com 为例. Nginx 版本以 nginx/1.16.0 为例. 当前服务器的操作系统 ...
- Java-集合第三篇List集合
1.List集合 有序可重复集合,集合中的每个元素都有其对应的顺序索引. 2.List相对于Collection额外提供的方法: 1>void add(int index,Object elem ...
- 微信小程序 Mustache语法详解
最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究 ...
- [2019杭电多校第七场][hdu6655]Just Repeat
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6655 题意是说两个人都有一些带有颜色的牌,两人轮流出牌,但是不能出对面出过的颜色的牌,最后谁不能出牌谁 ...
- python内置函数sorted()及sort() 函数用法和区别
python内置函数sorted(),sort()都有排序的意思,但是两者有本质的区别,sort 是应用在 list 上的方法,sorted 可以对所有可迭代的对象进行排序操作,list 的 sort ...
- 问题 B: 傻鸡抓大闸蟹
问题 B: 傻鸡抓大闸蟹 时间限制: 1 Sec 内存限制: 128 MB提交: 94 解决: 39[提交] [状态] [命题人:jsu_admin] 题目描述 背景又到了吃大闸蟹的季节,黄老师想 ...
- H5白屏问题
前言 前阵子弄了灰度环境,H5这边需要给灰度环境的接口加上Cookie,配置的期间遇到一些Cookie问题以及白屏在此记录下 1.H5请求接口带不上Cookie 解决方法:前端使用了 webpack ...
- PS使用记录:人像(证件照)更换背景
PS使用记录:人像(证件照)更换背景 参考:非常干净的抠羽毛ps教程抠图羽毛 (1)准备2019PS,原图 (2)选择人像:选择->主体 (3)边缘处理:选择 ->选择并遮住 ->选 ...
- ListView鼠标拖
private Point Position = new Point(0, 0); private void treeFileView_ItemDrag(object sender, ItemDrag ...