在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. css同时满足两个类名才有效果的写法
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
    
			
    2. 
						
  2. js数组基本操作
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...
    
			
    3. 
						
  3. nginx防止DDOS攻击
			
    防御DDOS是一个系统工程,攻击花样多,防御的成本高瓶颈多,防御起来即被动又无奈.DDOS的特点是分布式,针对带宽和服务攻击,也就是四层流量攻击和七层应用攻击,相应的防御瓶颈四层在带宽,七层的多在架构 ...
    
			
    4. 
						
  4. linux c获取本地时间
			
    在标准C/C++中,我们可通过tm结构来获得日期和时间,tm结构在time.h中的定义如下: #ifndef _TM_DEFINED struct tm { int tm_sec; /* 秒–取值区间 ...
    
			
    5. 
						
  5. HBase（一）HBase入门简介
			
    一 HBase 的起源 HBase 的原型是 Google 的 BigTable 论文,受到了该论文思想的启发,目前作为 Hadoop 的子项目来开发维护,用于支持结构化的数据存储. Apache H ...
    
			
    6. 
						
  6. 【51nod】1773 A国的贸易
			
    题解 FWT板子题 可以发现 \(dp[i][u] = \sum_{i = 0}^{N - 1} dp[i - 1][u xor (2^i)] + dp[i - 1][u]\) 然后如果把异或提出来可 ...
    
			
    7. 
						
  7. 安装loadrunner11，卸载360浏览器后提示“无效的应用程序路径！请检查应用程序是否存在！”
			
    我安装的loadrunner是11版本的,安装之前我的电脑上有安装了很多的浏览器,结果一开始录制脚本的时候,页面直接跳转到360浏览器上面了,但是显示正在录制的脚本为0个,于是就把360给卸载了,进行 ...
    
			
    8. 
						
  8. URLconf+MTV：Django眼中的MVC
			
    MVC是众所周知的模式,即:将应用程序分解成三个组成部分:model(模型),view(视图),和 controller(控制 器).其中:              M 管理应用程序的状态(通常存储 ...
    
			
    9. 
						
  9. pct_free
			
    SQL> select table_name,pct_free,pct_used from user_tables; TABLE_NAME PCT_FREE PCT_USED---------- ...
    
			
    10. 
						
  10. thinphp中auth认证方法使用
			
    一.获取Auth类1.ThinkPHP3.1.3完整版:http://www.thinkphp.cn/down/338.html2.OneThink1.0正式版:https://github.com/ ...
    
			
    11.