理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码
最近拜读了曾探所著的《JavaScript设计模式与开发应用》一书，在读到发布-订阅模式一章时，作者不仅给出了基本模式的通用版本的发布-订阅模式的代码，最后还做出了扩展，给该模式增加了离线空间功能和命名空间功能，以达到先发布再订阅的功能和防止名称冲突的效果。但是令人感到遗憾的是最终代码并没有给出足够的注释。这让像我一样的小白就感到非常的困惑，于是我将这份最终代码仔细研究了一下，并给出了自己的一些理解，鉴于能力有限，文中观点可能并不完全正确，望看到的大大们不吝赐教，谢谢！
下面是添加了个人注释的最终版代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8" />
</head>
<body>
<script type="text/javascript">
var Event = (function(){ //定义立即调用的对象
var global = this,
Event,
_default = 'default';
Event = function(){
var _listen,//私有变量
_trigger,
_remove,
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
namespaceCache = {},
_create,
find,
each = function( ary, fn ){
var ret;
for ( var i = 0, l = ary.length; i < l; i++ ){
var n = ary[i];
ret = fn.call( n, i, n);
//n(args)
}
return ret;
};
_listen = function( key, fn, cache ){
if ( !cache[ key ] ){
cache[ key ] = [];
}
cache[key].push( fn );
};
_remove = function( key, cache ,fn){ if ( cache[ key ] ){
var fns = cache[key];
if( fn ){
for( var i = fns.length - 1; i >= 0; i-- ){
//原文for( var i = cache[ key ].length; i >= 0; i-- ){
//if( cache[ key ] === fn )我认为不妥。
if( fns[i] === fn ){
fns.splice( i, 1 );
}
}
}else{
cache[ key ] = [];
}
}
};
_trigger = function(){
var cache = _shift.call(arguments),
key = _shift.call(arguments),
args = arguments,
_self = this,
ret,
stack = cache[ key ];
if ( !stack || !stack.length ){
return;
}
return each( stack, function(){
return this.apply( _self, args );//_self = object{} //n(args)
});
};
_create = function( namespace ){
var namespace = namespace || _default;
var cache = {},
offlineStack = [],
// 离线事件
ret = {
listen: function( key, fn, last ){
_listen( key, fn, cache );
if ( offlineStack === null ){
return;
}
if ( last === 'last' ){
offlineStack.length && offlineStack.pop()();
}else{
each( offlineStack, function(){
this();
});
}
offlineStack = null;
},
one: function( key, fn, last ){
_remove( key, cache );
//移除已存在的listen事件
this.listen( key, fn ,last );
},
remove: function( key, fn ){
_remove( key, cache ,fn);
},
trigger: function(){
var fn,
args,
_self = this;
_unshift.call( arguments, cache );
args = arguments;
fn = function(){
return _trigger.apply( _self, args );
//_self的作用是将—trigger方法绑定到ret里面来，从而能使用args };
if ( offlineStack ){
return offlineStack.push( fn );
}
return fn();
}
};
return namespace ?
( namespaceCache[ namespace ] ? namespaceCache[ namespace ] :
namespaceCache[ namespace ] = ret )
: ret;
};
return {
//所有方法均先创建一个离线空间 调用create方法，并传递空参数， 返回ret = object{};
create: _create,
one: function( key,fn, last ){
var event = this.create( );
event.one( key,fn,last );
},
remove: function( key,fn ){
var event = this.create( );
event.remove( key,fn );
},
listen: function( key, fn, last ){
var event = this.create( );
event.listen( key, fn, last );
},
trigger: function(){
var event = this.create( );
//event = ret ;
event.trigger.apply( this, arguments );
//将arguments传递给ret.trigger
}
};
}();
return Event;
})();
Event.trigger( 'click', 5 );
// 将其存入offlineStack等待调用
Event.listen( 'click', function( a ){
console.log( a );
});
Event.create( 'namespace1' ).listen( 'click', function( a ){
console.log( a );
});
// namespace的作用是，没有时，我们返回简单的ret对象。有时，我们返回namespase下的一个键值为namespase1的对象 Event.create( 'namespace1' ).trigger( 'click', 1 );
// 将调用namespase1的trigger方法
Event.one('click',function(a){
console.log("this is the one's "+a);
} ,"last");
Event.trigger('click',666);
Event.listen( 'click', function( a ){
console.log( "this is a simple" +a );
});
Event.listen( 'click', function( a ){
console.log( "this is also a simple " +a );
})；
Event.trigger('click',"hahaha");
Event.one('click',function(a){
console.log("this is the one's "+a + " and it's the only " + a);
} ,"last");
Event.trigger('click',"hahahahahahahaha");
</script>
</body>
</html>
我认为对于代码的理解可以分为两个阶段，第一个阶段：理解代码的含义，明白代码是怎么运行的；第二个阶段：深刻理解代码本质，并能够独立写出代码。当然作为小白的我还没有能力达到第二阶段，也只能讲讲自己第一阶段的理解了。
有同学曾和我讨论过这段代码里面one（）的作用，通过最后面添加的实例不难理解，它的作用是清除之前存在的(某个命名空间的）订阅事件，再添加唯一的一个订阅事件。然后对于一些细节的理解我通过注释添加在了代码中，如有感兴趣的同学，欢迎前来和我讨论，或者有觉得我的观点有失偏颇的，希望能不吝赐教。
最后我认为抛开个模块之间有点复杂的通信外，这段代码最让人难以理解的就是this的应用了，JavaScript里面的this被认为是一个巨大的坑，但运用得当，必会事半功倍。这里我先简要谈谈对this的理解：
JavaScript里面的this大致可以分为4种情况：第一种情况，方法调用模式：函数被保存为对象的一个方法，当这个方法被调用时，this指向该对象；第二种情况，函数调用模式：此模式下，this被绑定到全局对象，这被认为是一个设计错误；第三种情况，构造器调用模式：如果一个函数前面带上new来调用，那么将创建一个隐藏链接到该函数的prototype成员的新对象，同时this绑定到新对象上；第四种情况，call，apply调用模式：该模式类似于继承，将执行call，apply操作的对象绑定到第一个参数上，同时将this绑定到第一个参数上，例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var name = "I am window";
var obj = {
name:"sharpxiajun",
job:"Software",
ftn01:function(obj){
obj.show();
},
ftn02:function(ftn){
ftn();
},
ftn03:function(ftn){
ftn.call(this);
}
};
function Person(name){
this.name = name;
this.show = function(){
console.log("姓名:" + this.name);
console.log(this);
}
}
var p = new Person("Person");
obj.ftn01(p);
obj.ftn02(function(){
console.log(this.name);
console.log(this);
});
obj.ftn03(function(){
console.log(this.name);
console.log(this);
});
</script>
</body>
</html>
实例来源： 夏天的森林 《JavaScript技术难点（三）之this、new、apply和call详解》
输出结果为：
但是发布-订阅模式的的this应用依然让我感到费解：
这两处this的使用不像平常见到的那种隐式调用或者用做参数，而是直接当做函数使用（表述不定对），这让我有点难以理解，但是他们达到的效果就是类似的，起到的是传递参数的作用。那么这里的this我否可以理解为也是通过call，apply将其绑定到第一个参数上面呢？希望看到的大大能帮我解释一下，谢谢！
理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码的更多相关文章
- react 中发布订阅模式使用
react 中发布订阅模式使用 场景 怎么能将设计模式应用到我们的 React 项目中?以前一直在思考这个问题. 场景一 模块 A 模块 B 需要用到同一个数据 data,A 和 B 都会修改这份数据 ...
- javascript设计模式学习之八_发布订阅（观察者）模式
一.发布订阅模式定义 jQuery中的callbacks,defered,promise本质上就是发布订阅模式的实现.ES6的promise内部实现未开源,不了解具体机制 发布订阅模式又叫做观察者模式 ...
- JS设计模式（5）发布订阅模式
什么是发布订阅模式(观察者模式)? 定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 主要解决:一个对象状态改变给其他对象通知的问题,而且 ...
- js 设计模式：观察者和发布订阅模式
总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下. 观察者模式 观察者直接订阅目标,当目标触发事件时,通知观察者进行更新 简单实现 class Observer { constructor ...
- java设计模式之-观察者模式（发布-订阅模式）
1.观察者模式定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态上发生变化时,会通知所有观察者对象,让它们能够自动更新自己. 2.观察者模式结构 ...
- Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...
- [转] Javascript中理解发布--订阅模式
发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...
- 【转】Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...
- javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...
随机推荐
- ExchangeServeice获取在线outlook邮箱中的未读邮件
using Microsoft.Exchange.WebServices.Data; using System; using System.Collections.Generic; using Sys ...
- Golang学习 - fmt 包
------------------------------------------------------------ // Print 将参数列表 a 中的各个参数转换为字符串并写入到标准输出中. ...
- docker镜像的操作
在主机上列出镜像 sudo docker images 每从Docker Hub下载一个镜像就会启动相对的创建一个容器 在镜像列表中看到三个重要的东西: 来自什么镜像源,例如ubuntu 每个镜像都有 ...
- WPF 之 跳转
WPF的跳转有两种:一是windows窗体,另外一种是page页. 1.windows窗体跳转 1)先实例化目标窗体: 2)然后将目标窗体show(). 例如:有两个窗体Main和Login,要想点击 ...
- 顺丰接口 api对接说明
1 功能说明 物流轨迹查询-使用的物流单号和快递单号即可实现查询物流信息. 1.1 接口规则 (1).查询接口支持按照运单号查询(单个查询). (2).指定的物流运单号选择相应的快递公 ...
- [SEO] 网站标题分隔符
标题用什么分隔符对SEO最有利 我们在看同行的朋友对网站标题优化时,关键词分按照主次的顺序进行分布,在网站标题或者是关键词之间都会有一个符号,俗话来讲就称为关键词分隔符,网站标 题分隔符分为“-”(横 ...
- [Java] String.Split 方法的6个重载函数
String.Split 方法有6个重载函数: 程序代码 1) public string[] Split(params char[] separator) 2) public string[] Sp ...
- TCP/IP协议原理与应用笔记21：路由选择的方法
1. 路由选择的方法 (1)基本思想 不是收到IP分组后才能为其选路,而是预先获得所有的目的的路由(Routing Protocol) IP报文按预定的路由转发(route table) (2)预定路 ...
- WebStorm配置（2016/11/18更新）
目录: 1.主题设置 2.模板设置 3.代码段设置 4.快捷键设置 5.显示行号+自动换行 6.配置github 7.常用快捷键 8.软件下载(破解版及汉化包) 1.主题设置 1)ctrl+alt+s ...
- php 短信网关短信内容不能有空格
最近在做一个短信通知功能,接口参数都按文档写好了,就是不能发送短信,查了半天,原来是短信内容有空格,之前短信用的英文标点符号,符号后都有一个空格,用了date('Y-m-d H,i,s')函数,后来把 ...