为啥将两种模式放在一起呢?因为这样文章比较长啊。

写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系。知识成为个人的知识,就在于能够用自己的话表达同一种意义。

本文是设计模式系列文章的第二篇文章,第一篇:。

1,代理模式,只是学习了虚拟代理以及缓存代理,具体案例

1)虚拟代理

  //业务代码
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
console.log();
imgNode.src = src;
}
}
})();
// 设计模式代码
var ProxyImage = (function() {
var img = new Image();
//这个img只是用来判断图片是否加载完成,加载完成之后修改图片链接
img.onload = function() {
console.log(this);
myImage.setSrc(this.src);
};
return {
setSrc: function(src) {
console.log();
myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");
img.src = src;
}
}
})();

这个例子好吧,拿来主义。说一下自己的理解:上面的业务代码实现的是将一个图片dom插入到dom树之中,代理模式则是通过创建一个新的img元素,通过判断onload判断是否加载完成,然后替换原有链接。

2)下面是缓存代理:

   //缓存代理
// 计算乘法
var mult = function() {
var a = ;
for (var i = , ilen = arguments.length; i < ilen; i += ) {
a = a * arguments[i];
}
return a;
}; // 代理函数
var proxyFunc = function(fn) {
var cache = {}; // 缓存对象
return function() {
//利用闭包
var args = Array.prototype.join.call(arguments);
if (args in cache) {
return cache[args]; // 使用缓存代理
}
return cache[args] = fn.apply(this, arguments);
}
};
var proxyMult = proxyFunc(mult);
console.log(proxyMult(, , , )); //
console.log(proxyMult(, , , )); // 缓存取 24

就是利用闭包实现原有计算数据的缓存。

2,订阅发布模式

 var Event = (function(){
var list = {},
listen,
trigger,
remove;
//添加订阅对象
listen = function(key,fn){
if(!list[key]) {
list[key] = [];
}
list[key].push(fn);
};
//触发订阅内容
trigger = function(){
var key = Array.prototype.shift.call(arguments),
fns = list[key];
if(!fns || fns.length === ) {
return false;
}
for(var i = , fn; fn = fns[i++];) {
fn.apply(this,arguments);
}
};
//删除订阅内容
remove = function(key,fn){
var fns = list[key];
if(!fns) {
return false;
}
if(!fn) {
fns && (fns.length = );
}else {
for(var i = fns.length - ; i >= ; i--){
var _fn = fns[i];
if(_fn === fn) {
fns.splice(i,);
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
// 测试代码如下:
Event.listen("color",function(size) {
console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",);

本质上,上述的发布订阅只是一个数组的增删改查。缓存下增删改查。

本文结束。

js设计模式之代理模式以及订阅发布模式的更多相关文章

  1. RabbitMQ下的生产消费者模式与订阅发布模式

    所谓模式,就是在某种场景下,一类问题及其解决方案的总结归纳.生产消费者模式与订阅发布模式是使用消息中间件时常用的两种模式,用于功能解耦和分布式系统间的消息通信,以下面两种场景为例: 数据接入   假设 ...

  2. Kafka下的生产消费者模式与订阅发布模式

    原文:https://blog.csdn.net/zwgdft/article/details/54633105   在RabbitMQ下的生产消费者模式与订阅发布模式一文中,笔者以“数据接入”和“事 ...

  3. 设计模式---订阅发布模式(Subscribe/Publish)

    设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...

  4. js设计模式——1.代理模式

    js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...

  5. Publisher/Subscriber 订阅-发布模式

    Publisher/Subscriber 订阅-发布模式 本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WC ...

  6. AngularJS的简单订阅发布模式例子

    控制器之间的交互方式广播 broadcast, 发射 emit 事件 类似于 js中的事件 , 可以自己定义事件 向上传递直到 document 在AngularJs中 向上传递直到 rootScop ...

  7. saltstack系列(三)——zmq订阅/发布模式

    zmq订阅发布模式 server端代码: #coding=utf-8 ''''' 服务端,发布模式 ''' import zmq from random import randrange contex ...

  8. 订阅发布模式eventEmiter

    // 订阅发布模式 class EventEmitter { constructor() { this._events = {}; } on(name, callback) { if (this._e ...

  9. ionic2踩坑之订阅发布模式的实现

    原文地址:http://www.cnblogs.com/eccainiao/p/6429536.html 转载请说明. 在ionic2中实现订阅发布模式,需要用到Events. Events下面有三个 ...

随机推荐

  1. java中子类会继承父类的构造方法吗?

    参考: https://blog.csdn.net/wangyl_gain/article/details/49366505

  2. python学习——模块和包

    在之前常用模块中我们已经初步了解了模块的导入,今天来说学习一下模块和包.我们可以把模块理解成每一个python文件.而包就是多个能解决一类问题的python文件全部放在一起.OK

  3. day2-exercise

    # Author: 刘佳赐-Isabelle October 22,2018 """ 1.有变量name = "aleX leNb" 完成如下操作: ...

  4. SQL盲注

    一.首先输入1和-1 查看输入正确和不正确两种情况 二.三种注入POC LOW等级 ... where user_id =$id 输入      真  and  假 = 假 (1)...where u ...

  5. C语言程序设计:现代方法(第2版)第二章全部习题答案

    前言 本人在通过<C语言程序设计:现代方法(第2版)>自学C语言时,发现国内并没有该书完整的课后习题答案,所以就想把自己在学习过程中所做出的答案分享出来,以供大家参考.这些答案是本人自己解 ...

  6. 解决brew下载php(不存在libphp7.so)

    我是一名PHP的初学者,在mac上安装php7参考作者 coolma <在mac中如何安装php7>: 1. 安装Homebrew(mac ox不可或缺套件管理器,方便快捷的安装插件等) ...

  7. [Real World Haskell翻译]第23章 GUI编程使用gtk2hs

    第23章 GUI编程使用gtk2hs 在本书中,我们一直在开发简单的基于文本的工具.虽然这些往往是理想的接口,但有时图形用户界面(GUI)是必需的.有几个Haskell的GUI工具包是可用的.在本章中 ...

  8. 厦门Uber优步司机奖励政策(12月28日到1月3日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. 三 Hive 数据处理 自定义函数UDF和Transform

    三  Hive 自定义函数UDF和Transform 开篇提示: 快速链接beeline的方式: ./beeline -u jdbc:hive2://hadoop1:10000 -n hadoop 1 ...

  10. python学习五

    打包代码与数据 数据结构要与数据匹配,数据结构影响代码的复杂性   列表 集合 字典 #创建与初始化 cleese={} cleese2=dict() cleese["name"] ...