jQuery的观察者模式详解

投稿：hebedich

本文主要是介绍了jQuery中on方法及trigger方法，以及围绕这个方法来体验的观察者模式，是篇非常不错的文章，对我们理解观察者模式很有帮助。

undefined

undefined

■ 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 Tiny Pub/Sub - v0.7 - 10/27/2011

* http://benalman.com/

* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */ 

 (function($) { 

  var o = $({}); 

   $.subscribe = function() {

     o.on.apply(o, arguments);

   }; 

   $.unsubscribe = function() {

     o.off.apply(o, arguments);

   }; 

   $.publish = function() {

     o.trigger.apply(o, arguments);

   }; 

}(jQuery));

jQuery的观察者模式详解 转载的更多相关文章

  1. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  2. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  3. malloc 与 free函数详解<转载>

    malloc和free函数详解   本文介绍malloc和free函数的内容. 在C中,对内存的管理是相当重要.下面开始介绍这两个函数: 一.malloc()和free()的基本概念以及基本用法: 1 ...

  4. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  5. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  6. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  7. Java 反射 设计模式 动态代理机制详解 [ 转载 ]

    Java 反射 设计模式 动态代理机制详解 [ 转载 ] @author 亦山 原文链接:http://blog.csdn.net/luanlouis/article/details/24589193 ...

  8. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  9. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

随机推荐

  1. java数组实现买彩票（平移覆盖思想）

    package com.wh.shuzu; /** * 买彩票 * @author 贾相如同学 * 平移覆盖思想 */ public class Lotery3 { public static voi ...

  2. ubuntu14.04 + GTX980ti + cuda 8.0 ---Opencv3.1.0(基础+opecv_contrib)配置

    如果喜欢视频的话:YouTube 上有视频教程 https://www.youtube.com/watch?v=1YIAp3Lh5hI 后来我在mac上安装最新版的OpenCV 找到了一片非常详细的教 ...

  3. HUST 1698 - 电影院 组合数学 + 分类思想

    http://acm.hust.edu.cn/problem/show/1698 题目就是要把一个数n分成4段,其中中间两段一定要是奇数. 问有多少种情况. 分类, 奇数 + 奇数 + 奇数 + 奇数 ...

  4. Spark学习之在集群上运行Spark（6）

    Spark学习之在集群上运行Spark(6) 1. Spark的一个优点在于可以通过增加机器数量并使用集群模式运行,来扩展程序的计算能力. 2. Spark既能适用于专用集群,也可以适用于共享的云计算 ...

  5. 最新最强短视频SDK——来自RDSDK.COM

    北京锐动天地信息技术有限公司成立于2007年9月.多年来一直专注于音视频领域核心技术的研发, 拥有Windows.iOS.Android全平台自主知识产权的领先技术产品. 2011年获得新浪战略投资, ...

  6. IntelliJ IDEA导入JDK出现The selected directory is not a valid home for JDK问题的解决方法

    JDK版本与IDEA版本不兼容: JDK版本过高可能会造成这个问题,需与IDEA相兼容的JDK才行. 比如,用IDEA2016.3.8版本的,JDK用jdk-10.0.1_windows-x64_bi ...

  7. InChatter系统之本地化

    InChatter现在支持本地化了,其实这个只是很细节的东西,但是咱也是可以走走国际范.哈哈 其实最重要的原因只是想进行一次本地化的开发.这个概念相信大部分人都有,但是在实际项目中真的很少会涉及到,我 ...

  8. SQL Server xtype的介绍

    sysobjects 表 在数据库内创建的每个对象(约束.默认值.日志.规则.存储过程等)在表中占一行.只有在 tempdb 内,每个临时对象才在该表中占一行. 列名 数据类型 描述 name sys ...

  9. 【java_设计模式】建造者模式

    应用场景对生成对象进行链式配置好处:按需配置对象,灵活修改默认配置,比构造方法创建对象更直观. public static void init() {if (okHttpClient == null) ...

  10. Java 字符串格式化 String.format() 的使用

    常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得c语言的sprintf()方法,两者有类似之处.format()方法有两种重 ...