在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的观察者模式的好处是：一次发布，多次订阅。
												


											
jQuery中的观察者模式(Observer Pattern)的更多相关文章
	

    
								
  1. 设计模式 - 观察者模式(Observer Pattern) 详细说明
		
    观察者模式(Observer Pattern) 详细说明 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26583157 版权全部 ...
    
		
    2. 
						
  2. 设计模式 - 观察者模式(Observer Pattern) 详细解释
		
    观察者模式(Observer Pattern) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26583157 版权全部 ...
    
		
    3. 
						
  3. 设计模式-观察者模式(Observer Pattern)
		
    观察者模式(Observer Pattern):定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使他们能够自动更新自己. 观察者 ...
    
		
    4. 
						
  4. 乐在其中设计模式(C#) - 观察者模式(Observer Pattern)
		
    原文:乐在其中设计模式(C#) - 观察者模式(Observer Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 观察者模式(Observer Pattern) 作者:weba ...
    
		
    5. 
						
  5. 设计模式 - 观察者模式(Observer Pattern) Java内置 用法
		
    观察者模式(Observer Pattern) Java内置 用法 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26601659 ...
    
		
    6. 
						
  6. 二十四种设计模式：观察者模式(Observer Pattern)
		
    观察者模式(Observer Pattern) 介绍定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新. 示例有一个Message实体类,某些对象 ...
    
		
    7. 
						
  7. 使用C# (.NET Core) 实现观察者模式 (Observer Pattern) 并介绍 delegate 和 event
		
    观察者模式 这里面综合了几本书的资料. 需求 有这么个项目: 需求是这样的: 一个气象站, 有三个传感器(温度, 湿度, 气压), 有一个WeatherData对象, 它能从气象站获得这三个数据. 还 ...
    
		
    8. 
						
  8. 十一个行为模式之观察者模式(Observer Pattern)
		
    定义: 定义对象之间一种一对多的关系,当被观察者状态变化时,可以自动地通知观察者并执行相关的业务操作.观察者模式又被称为发布-订阅模式等. 结构图: Subject:抽象主题类,定义了所有被观察类的通 ...
    
		
    9. 
						
  9. [设计模式] 19 观察者模式 Observer Pattern
		
    在GOF的<设计模式:可复用面向对象软件的基础>一书中对观察者模式是这样说的:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.当一个 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PowerMock+SpringMVC整合并测试Controller层方法
			
    PowerMock扩展自Mockito,实现了Mockito不支持的模拟形式的单元测试.PowerMock实现了对静态方法.构造函数.私有方法以及final方法的模拟支持,对静态初始化过程的移除等强大 ...
    
			
    2. 
						
  2. 最大子段和(Max Sum)
			
    Max Sum. The following is an instance. a)    (-2,11,-4,13,-5,-2) 思路: 最大子段和:给定一个序列(元素可正可负),找出其子序列中元素和 ...
    
			
    3. 
						
  3. node模拟socket
			
    什么是Socket?网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket通信流程 基于net模块实现socket 服务端SocketServer.j ...
    
			
    4. 
						
  4. 拉格朗日（Lagrange）插值算法
			
    拉格朗日插值(Lagrange interpolation)是一种多项式插值方法,指插值条件中不出现被插函数导数值,过n+1个样点,满足如下图的插值条件的多项式.也叫做拉格朗日公式.  这里以拉格朗日 ...
    
			
    5. 
						
  5. RelativeLayout
			
    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...
    
			
    6. 
						
  6. 【LOJ】#2062. 「HAOI2016」地图
			
    题解 我对莫队真是一无所知 这个东西显然可以用圆方树转成一个dfs序列 然后呢,用莫队计算每个询问区间的每个数出现的次数,从而顺带计算每个数字的奇偶性 但是我们要查的数字也用一个范围,可以直接用分块维 ...
    
			
    7. 
						
  7. USACO  5.3 Big Barn
			
    Big BarnA Special Treat Farmer John wants to place a big square barn on his square farm. He hates to ...
    
			
    8. 
						
  8. scp和rsync的区别和常用参数
			
    一.scp 命令 1.scp 是 secure copy 的缩写,用于远程的文件的复制. 2.参数: -r: 递归复制整个目录. 3.实例: scp /home/space/music/1.mp3 u ...
    
			
    9. 
						
  9. JAVA特性-跨平台/面向对象
			
    JAVA特点概述 一,跨平台 这无疑是java最大的特点了,我相信大多数人第一次听说java语言大都从跨平台开开始的.实际上java跨平台特性主要体现在两个方面:编码和运行机制. 1,编码 java语 ...
    
			
    10. 
						
  10. Json格式String类型字符串转为Map工具类
			
    package agriculture_implement.util; import com.google.gson.Gson; import com.google.gson.JsonSyntaxEx ...
    
			
    11.