个人中心
gpt4 book ai didi

jQuery的观察者模式详解

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery的观察者模式详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

在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>

  。

jQuery的观察者模式详解

如果用一个全局变量来接收异步获取的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>

  。

jQuery的观察者模式详解

这次，我们得到的结果却是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>

  。

jQuery的观察者模式详解

以上，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>

  。

jQuery的观察者模式详解

以上，定义了全局的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的观察者模式详解

总结：jQuery的观察者模式，实际上是让on方法绑定的自定义事件先不执行，直到使用trigger方法来触发事件。使用jQuery的观察者模式的好处是：一次发布，多次订阅.

最后此篇关于jQuery的观察者模式详解的文章就讲到这里了,如果你想了解更多关于jQuery的观察者模式详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： jQuery异步获取json数据方法汇总
文章推荐： 解决vue+webpack项目接口跨域出现的问题
文章推荐： SpringBoot开发实战之自动配置
文章推荐： vue 导航锚点_点击平滑滚动,导航栏对应变化详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com