jQuery的观察者模式详解
在jQuery中，on方法可以为元素绑定事件，trigger方法可以手动触发事件，围绕这2个方法，我们来体验jQuery中的观察者模式(Observer Pattern)。
■ on方法绑定内置事件，自然触发
比如，我们给页面的body元素绑定一个click事件，这样写。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('被点击了~~');
});
});
</script>
</head>
<body>
<h1>hello</h1>
</body>
以上，我们只有点击body，才能触发click事件。也就是说，当给页面元素绑定内置事件后，事件的触发是在内置事件发生的那刻。
■ on方法绑定内置事件，手动触发
使用trigger方法，也可以手动触发元素绑定的内置事件。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('被点击了~~');
});
$('body').trigger('click');
});
</script>
以上，无需点击body，在页面加载完毕，body自动触发了click事件。
■ on方法绑定自定义事件，手动触发
我们知道，click是jquery内置的事件，那么，是否可以自定义事件，并手动触发呢？
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('someclick', function () {
console.log('被点击了~~');
});
$('body').trigger('someclick');
});
</script>
以上，我们自定义了一个someclick事件，得到的结果和上面一样。
于是，我们发现：我们可以为元素绑定自定义事件，并且用trigger方法触发该事件。
当然，自定义事件的名称可以按照"命名空间.自定义事件名称"的形式来写，比如app.someclick，这在大型项目中尤其有用，这样可以有效避免自定义事件名称冲突。
如果从"发布订阅"这个角度来看，on方法相当于订阅者、观察者，trigger方法相当于发布者。
■ 从"异步获取json数据"来体验jQuery观察者模式
在根目录下，有一个data.json的文件。
{
"one" : "Hello",
"two" : "World"
}
现在，通过异步的方式来获取json数据。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(data) {
console.log(data);
});
});
</script>
如果用一个全局变量来接收异步获取的json数据。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
var data;
$.getJSON('data.json', function(results) {
data = results;
});
console.log(data);
});
</script>
这次，我们得到的结果却是undefined，这是为什么？
--因为，当$.getJSON方法还在获取数据的时候，就已经执行console.log(data)，而此时data还没有数据。
如何解决这个问题呢？
--如果在$.getJSON方法之外先定义好需要执行的方法，然后在$.getJSON方法的回调函数里真正触发这个方法，不就解决了吗？
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(results) {
$(document).trigger('app.myevent', results); //相当于发布
});
$(document).on('app.myevent', function(e, results) { //相当于订阅
console.log(results);
});
});
</script>
以上，on方法就像一个订阅者，它订阅了自定义事件app.myevent；而trigger方法就像一个发布者，它发布事件和参数后，才真正让订阅者方法得以执行。
■ jQuery观察者模式的扩展方法
为此，我们还可以为jQuery观察者模式专门写一个扩展方法。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function (results) {
$.publish('app.myevent', results);
});
$.subscribe('app.myevent', function(e, results) {
console.log(results);
});
});
(function($) {
var o = $({});//自定义事件对象
$.each({
trigger: 'publish',
on: 'subscribe',
off: 'unsubscribe'
}, function(key, val) {
jQuery[val] = function() {
o[key].apply(o, arguments);
};
});
})(jQuery);
</script>
以上，定义了全局的publish和subscribe方法，我们在任何时候都可以调用。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function (results) {
$.publish('app.myevent', results);
});
$.subscribe('app.myevent', function(e, results) {
$('body').html(
results.one
);
});
});
总结：jQuery的观察者模式，实际上是让on方法绑定的自定义事件先不执行，直到使用trigger方法来触发事件。使用jQuery的观察者模式的好处是：一次发布，多次订阅。
相关推荐
-
IOS观察者设计模式
什么是观察者模式?我们先打个比方,这就像你订报纸.比如你想知道美国最近放生了些新闻,你可能会订阅一份美国周刊,然后一旦美国有了新的故事,美国周刊就发一刊,并邮寄给你,当你收到这份报刊,然后你就能够了解美国最新的动态.其实这就是观察者模式,A对B的变化感兴趣,就注册为B的观察者,当B发生变化时通知A,告知B发生了变化.这是一种非常典型的观察者的用法,我把这种使用方法叫做经典观察者模式.当然与之相对的还有另外一种观察者模式--广义观察者模式. 从经典的角度看,观察者模式是一种通知变化的模式,一般认为
-
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
[意图] 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新[GOF95] 又称为发布-订阅(Publish-Subscribe)模式.模型-视图(Model-View)模式.源-监听(Source-Listener)模式.或从属者(Dependents)模式 [观察者模式结构图] [观察者模式中主要角色] 1.抽象主题(Subject)角色:主题角色将所有对观察者对象的引用保存在一个集合中,每个主题可以有任意多个观察者. 抽象主题提供了增加和
-
ruby、javascript、php中的观察者模式实现代码
面试被问及到js中的观察者模式,这玩意儿早就了解过,可以说是动态语言中非常有用的一个设计模式,非常惭愧的没有系统的研究过.不过没关系,哪里不会补哪里,立刻动手,用所会的语言都实现一遍. 观察者模式 关于观察者模式,<松本行弘的程序世界>讲的非常清楚:观察者模式是当某个对象状态发生变化时,依存于该状态的全部对象自动得到通知,被观察者和观察者们是一对多的关系.书中还举了一个非常易懂的例子:获取系统当前时间并输出到命令行中.如果要硬编码也很简单,定义一个方法,先获取时间,然后再处理展示.这样获取时间
-
学习php设计模式 php实现观察者模式(Observer)
一.意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新[GOF95] 又称为发布-订阅(Publish-Subscribe)模式.模型-视图(Model-View)模式.源-监听(Source-Listener)模式.或从属者(Dependents)模式 二.观察者模式结构图 三.观察者模式中主要角色 抽象主题(Subject)角色:主题角色将所有对观察者对象的引用保存在一个集合中,每个主题可以有任意多个观察者.抽象主题提供了增加和删除观
-
Python设计模式之观察者模式实例
关于设计模式中的观察者模式,定义如下(维基百科): 觀察者模式(有時又被稱為發布/訂閱模式)是軟體設計模式的一種.在此種模式中,一個目標物件管理所有相依於它的觀察者物件,並且在它本身的狀態改變時主動發出通知.這通常透過呼叫各觀察者所提供的方法來實現.此種模式通常被用來實作事件處理系統.简单来说,一个被观察者有很多观察者,被观察者的状态的改变会引起所有观察者的响应操作. 那么我们用Python2.7来实现观察者模式. Python中的集合set 集合(set),类似于列表(list),但是它没有重
-
JavaScript观察者模式(经典)
Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种.Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对象之间保持状态同步. Observer模式的角色: Subject(被观察
-
Java中的观察者模式实例讲解
观察者模式是一种行为设计模式.观察者模式的用途是,当你对一个对象的状态感兴趣,希望在它每次发生变化时获得通知.在观察者模式中,观察另外一个对象状态的对象叫做Observer观察者,被观察的对象叫着Subject被观察者.根据GoF规则,观察者模式的意图是: 复制代码 代码如下: 定义对象之间一对多的依赖关系,一个对象状态改变,其他相关联的对象就会得到通知并被自动更新. Subject(被观察者)包含了一些需要在其状态改变时通知的观察者.因此,他应该提供给观察者可以register(注册)自己和u
-
jQuery的观察者模式详解
在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern). ■ on方法绑定内置事件,自然触发 比如,我们给页面的body元素绑定一个click事件,这样写. 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,
-
jQuery数组处理详解(含实例演示)
1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代
-
Jquery 效果使用详解
jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的! .hide() 隐藏匹配的元素. .hide() 这个方法不接受任何参数. .hide([duration][,complete]) duration 一个字符串或者数字决定动画将运行多久. complete 在动画执行完时执行的函数. .hide([duration][,easing][,compl
-
jQuery position() 函数详解以及jQuery中position函数的应用
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse
-
js监听键盘事件的方法_原生和jquery的区别详解
经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的
-
Java设计模式—观察者模式详解
观察者模式 包括这个模式在内的接下来的四个模式,都是类和类之间的关系,不涉及到继承,学的时候应该 记得归纳,记得本文最开始的那个图.观察者模式很好理解,类似于邮件订阅和RSS订阅,当我们浏览一些博客或wiki时,经常会看到RSS图标,就这的意思是,当你订阅了该文章,如果后续有更新,会及时通知你.其实,简单来讲就一句话:当一个对象变化时,其它依赖该对象的对象都会收到通知,并且随着变化!对象之间是一种一对多的关系. 先来看看关系图: 我解释下这些类的作用:MySubject类就是我们的主对象,Obs
-
vue双向绑定及观察者模式详解
在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value
-
Jquery Fade用法详解
jquery淡入淡出演示 感觉用法都差不多,目前看来还比较简单. fadeIn fadeOut fadeToggle fadeTo 一共4种用法 CSS代码 <style> div{background-color:#eaeaea;border:solid 1px #999999;width:100px;height:100px;text-align:center;line-height:100px;font-size:16px;display:none;margin:10px;} </
-
JS中自定义事件与观察者模式详解
目录 一.前言 二.观察者模式优缺点 三.代码实现 四.DOM自定义事件API 一.前言 观察者模式 也称发布-订阅模式 . 模型-视图模式 .当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知依赖它的对象.观察者模式属于行为型模式. 观察者模式: 类似我们在微信平台订阅了公众号 , 当它有新的文章发表后,就会推送给我们所有订阅的人. 我们作为订阅者不必每次都去查看这个公众号有没有新文章发布,公众号作为发布者会在合适时间通知我们