在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. IntelliJ IDEA + Maven + Tomcat 本地开发、部署、调试。
			
    1.maven 下载 解压 配置下 远程仓库( 用阿里云的 比较快).本地仓库 (可以本地C盘建立个文件夹当仓库).环境变量(方便使用maven命令)就可以了. 2.tomcat 下载 解压 配置下  ...
    
			
    2. 
						
  2. Mac OS 下安装mysqlclient报“mysql_config not found”的解决
			
    如问题所示,应该是你没有将mysql_config所在文件夹加入系统的PATH路径,解决方案下: 1.第一步找到你的mysql_config所在位置 1.1. 如果是直接安装mysql,所在位置应该是 ...
    
			
    3. 
						
  3. django 建立一个简单的应用
			
    本人的用的版本是python 2.7.3和django 1.10.5,Windows10系统 1.首先通过命令建立项目和app 找到django的安装路径,我的路径是:C:\Python27\Lib\ ...
    
			
    4. 
						
  4. C#基础系列 - 反射基础
			
    反射用于在程序运行过程中,获取类里面的信息或发现程序集并运行的一个过程.通过反射可以获得.dll和.exe后缀的程序集里面的信息.使用反射可以看到一个程序集内部的类,接口,字段,属性,方法,特性等信息 ...
    
			
    5. 
						
  5. JavaScript闭包与变量的经典问题
			
    许多人第一次接触闭包大概都是从高程里这段代码开始的: function createFunctions() { var result = new Array(); for(var i=0; i< ...
    
			
    6. 
						
  6. day1作业：编写登录窗口一个文件实现
			
    思路: 1.参考模型,这个作业我参考了linux的登录认证流程以及结合网上银行支付宝等锁定规则: 1)认证流程参考的是Linux的登录:当你输入完用户名密码后再验证用户名是否存在用户是否被锁定,然后在 ...
    
			
    7. 
						
  7. js处理局部scroll事件禁止外部scroll滚动解决办法，jquery.mousewheel.js处理时禁止办法说明
			
    js Code: <script> window.onload = function() { for (i = 0; i < 500; i++) { var x = document ...
    
			
    8. 
						
  8. java 里的内部类
			
    java里的内部类通常能帮我们隐藏一些具体实现,体现良好的封装效果. 内部类又分几种: 1.普通内部类 2.局部内部类 3.匿名内部类 4.静态内部类 普通内部类 先来看第一种普通的内部类,这种内部类 ...
    
			
    9. 
						
  9. 牛客网 桂林电子科技大学第三届ACM程序设计竞赛 A.串串-后缀自动机模板题
			
    链接:https://ac.nowcoder.com/acm/contest/558/A来源:牛客网 A.串串 小猫在研究字符串. 小猫在研究字串. 给定一个长度为N的字符串S,问所有它的子串Sl…r ...
    
			
    10. 
						
  10. source Insight 软件使用注意点
			
    1. 需要将 tab键转为 4个空格 首先通过路径(Options->Document Options)进入以下界面: step 1:将 Visible tabs 打勾. step 2 :将 E ...
    
			
    11.