源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery的观察者模式详解

  • 时间:2020-06-30 09:05 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery的观察者模式详解
在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern)。 [b]■ on方法绑定内置事件,自然触发[/b] 比如,我们给页面的body元素绑定一个click事件,这样写。
[u]复制代码[/u] 代码如下:
 <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事件。也就是说,当给页面元素绑定内置事件后,事件的触发是在内置事件发生的那刻。 [b]■ on方法绑定内置事件,手动触发[/b] 使用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事件。 [b]■ on方法绑定自定义事件,手动触发[/b] 我们知道,click是jquery内置的事件,那么,是否可以自定义事件,并手动触发呢?
[u]复制代码[/u] 代码如下:
    <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方法相当于发布者。 [b]■ 从"异步获取json数据"来体验jQuery观察者模式[/b] 在根目录下,有一个data.json的文件。 {     "one" : "Hello",     "two" : "World" } 现在,通过异步的方式来获取json数据。
[u]复制代码[/u] 代码如下:
    <script src="Scripts/jquery-2.1.1.min.js"></script>     <script type="text/javascript">         $(function () {             $.getJSON('data.json', function(data) {                 console.log(data);             });         });          </script>
[img]http://files.jb51.net/file_images/article/201412/2014122214370930.png[/img]   如果用一个全局变量来接收异步获取的json数据。
[u]复制代码[/u] 代码如下:
    <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>
[img]http://files.jb51.net/file_images/article/201412/2014122214370931.png[/img] 这次,我们得到的结果却是undefined,这是为什么? --因为,当$.getJSON方法还在获取数据的时候,就已经执行console.log(data),而此时data还没有数据。 如何解决这个问题呢? --如果在$.getJSON方法之外先定义好需要执行的方法,然后在$.getJSON方法的回调函数里真正触发这个方法,不就解决了吗?
[u]复制代码[/u] 代码如下:
    <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>
[img]http://files.jb51.net/file_images/article/201412/2014122214371032.png[/img] 以上,on方法就像一个订阅者,它订阅了自定义事件app.myevent;而trigger方法就像一个发布者,它发布事件和参数后,才真正让订阅者方法得以执行。 ■ jQuery观察者模式的扩展方法 为此,我们还可以为jQuery观察者模式专门写一个扩展方法。
[u]复制代码[/u] 代码如下:
    <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>
[img]http://files.jb51.net/file_images/article/201412/2014122214371033.png[/img] 以上,定义了全局的publish和subscribe方法,我们在任何时候都可以调用。
[u]复制代码[/u] 代码如下:
    <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                 );             });         });
[img]http://files.jb51.net/file_images/article/201412/2014122214371034.png[/img] 总结:jQuery的观察者模式,实际上是让on方法绑定的自定义事件先不执行,直到使用trigger方法来触发事件。使用jQuery的观察者模式的好处是:一次发布,多次订阅。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部