在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. c++实现二叉树的非递归创建以及非递归先序、中序、后序遍历
			
    二叉树的创建 思路:数组中从上到下依次放着二叉树中的元素,使用递归很容易实现,那么这里使用容器来存放之前的状态实现循环创建二叉树. TreeNode* createTree(int *arr, int ...
    
			
    2. 
						
  2. 题解-python-CodeForces 227A
			
    codeforces题目,用python写 本题输入三个点坐标,考察叉积,若大于0则right,小于0则left,等于0则towards 代码: a = raw_input().split() b = ...
    
			
    3. 
						
  3. spark集群安装［转］
			
    [转]http://sofar.blog.51cto.com/353572/1352713 ====================================================== ...
    
			
    4. 
						
  4. 第一篇CodeIgniter框架的下载及安装
			
    初次学习Php,网上搜了很多php框架,最后选择了CodeIgniter. 安装环境:php5+mysql6.5+iis7 我的电脑是用来办公写文档用的,win7系统,不想换系统,所以就安装了win7 ...
    
			
    5. 
						
  5. Kibana安装及简单使用
			
    Kibana安装 参照官方文档即可,这里只做相关操作记录: wget https://artifacts.elastic.co/downloads/kibana/kibana-5.5.0-linux- ...
    
			
    6. 
						
  6. tomcat中请求参数中文中乱码问题
			
    在server.xml中配置如下: <Connector connectionTimeout="20000" port="8080" protocol=& ...
    
			
    7. 
						
  7. ubuntu 安装 eslint
			
    1. 安装 npm install -g eslint 安装结束后记住 /usr/local/bin/eslint -> /usr/local/lib/node_modules/eslint/b ...
    
			
    8. 
						
  8. 20172304 实验二 《Java面向对象程序设计》 实验报告
			
    20172304 实验二 <Java面向对象程序设计> 实验报告 课程名称:<程序设计与数据结构> 学生班级:1723班 学生姓名:段志轩 学生学号:20172304 实验时间 ...
    
			
    9. 
						
  9. 理解Linux的进程，线程，PID，LWP，TID，TGID
			
    在Linux的top和ps命令中,默认看到最多的是pid (process ID),也许你也能看到lwp (thread ID)和tgid (thread group ID for the threa ...
    
			
    10. 
						
  10. Outlook数据提取工具readpst
			
    Outlook数据提取工具readpst   Outlook是Windows常用的邮件客户端.它将用户的信息保存到.pst文件中,如邮件.约会.日历.联系人等信息.为了便于查看这些信息,Kali Li ...
    
			
    11.