在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. HttpRunner接口自动化测试框架
			
    简介 2018年python开发者大会上,了解到HttpRuuner开源自动化测试框架,采用YAML/JSON格式管理用例,能录制和转换生成用例功能,充分做到用例与测试代码分离,相比excel维护测试 ...
    
			
    2. 
						
  2. IntelliJ IDEA 里 查看一个函数注释的方法是 ctrl+q
			
     ctrl + q 也可以看到 官方的文档注释,java真是个强大的东西,官方的每个函数都有注释,这些注释 自动生成了官方的文档,所以看官方的注释 就是 看 官方的文档.
    
			
    3. 
						
  3. C/C++之static
			
    C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...
    
			
    4. 
						
  4. 分析Windows的死亡蓝屏（BSOD）机制
			
    这篇文章本来是投Freebuf的,结果没过.就贴到博客里吧,图懒得发上来了 对于Windows系统来说,被人们视为洪水猛兽的蓝屏也是一种有利于系统稳定的机制.蓝屏其实是Windows系 统的一种自查机 ...
    
			
    5. 
						
  5. Android Activity、Service、BroadcastReceiver 的生命周期
			
    Activity.Service.BroadcastReceiver这三个组建是Android开发中最常使用到的组件,在它们的生命周期的各个阶段我们需要针对性的做些事情,了解这些组件的生命周期有利于我 ...
    
			
    6. 
						
  6. Ionic入门五：表单
			
    一.输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本框及其标签. 1.输入框属性:placeholder 以下实例中,默认为100%宽度(左右两侧没 ...
    
			
    7. 
						
  7. 【运维实战】一次linux日志分割之路——将日志按照每小时进行分割，并按照“日期-小时”格式保存
			
    是这样的,现在需要对nginx的access.log进行按照每小时进行分割,并且最好还要能够以 “日期+时间”的形式,命名保存. 两点,一个是按照每小时进行分割,一个是将日志以“日期+时间”的形式进行 ...
    
			
    8. 
						
  8. CSUOJ 1011 Counting Pixels
			
    Description Did you know that if you draw a circle that fills the screen on your 1080p high definiti ...
    
			
    9. 
						
  9. awk 基本函数用法
			
    gsub函数有点类似于sed查找和替换.它允许替换一个字符串或字符为另一个字符串或字符,并以正则表达式的形式执行.第一个函数作用于记录$0,第二个gsub函数允许指定目标,然而,如果未指定目标,缺省为 ...
    
			
    10. 
						
  10. [CC-SEINC]Sereja and Subsegment Increasings
			
    [CC-SEINC]Sereja and Subsegment Increasings 题目大意: 有长度为\(n(n\le10^5)\)的序列\(A\)和\(B\). 在一次操作中,可以选择一个区间 ...
    
			
    11.