这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
跨沙箱监听 YUI 的 IO 事件
2013年11月15日 JavaScript ⁄ 共 1632字 等你评论

复杂的 web 应用往往构建在大量 ajax 交互之上,前端通常会根据接口返回的各种 code 处理请求,并约定 code 规范,例如云空间的每个接口都可能返回以下 code,前端需要做相应处理:

  • 200 请求正常
  • 401 用户未登录
  • 404 api 不存在
  • 50* 各种系统级错误

除了200之外,其他 code 对应的回调完全相同,401弹出登录浮层,50*系统级错误弹出重试浮层……,这些回调不应该在每一个回调中重复书写,否则后期维护将及其困难。

jQuery 中的 ajax 做法

在 jQuery 中,将全局配置中的 global 设置为 true 后,通过调用 ajaxStart , ajaxStop :

$.ajaxSetup({
    global: true
});

$(document).ajaxSuccess(function(event, xhr, settings) {
    // ...
});

YUI 中的 IO 事件

YUI 中的 IO 事件默认从当前 IO 实例传播至沙箱内的 YUI 实例上,前者并且只会在拥有该事件的回调函数的时才会触发,后者在每一次 IO 时,都会触发,并且事件名以 io 作为前缀:

YUI().use("io-base", function(Y) {
    Y.io('/foo.php', {
        on: {
            // 只对本次 io 生效的 complete 事件回调
            complete: function(id, xhr) {
                // ...
            }
        }
    });
});

YUI().use("io-base", function(Y) {
    function complete(id, xhr, args) {
        // ...
    };

    // 在这个沙箱内的 io 都可以在 Y 这个实例上监听
    Y.on('io:complete', complete, Y, ['lorem', 'ipsum']);
    Y.io('/foo.php');
    Y.io('/bar.php', {
        on: complete: function(id, xhr) {
            // ...
        }
    });
}); 

因此,如果业务场景足够简单的话,我们可以通过在同一个沙箱内监听 YUI 实例上的 IO 事件(Y.on)实现我们全局监听 io 事件的需求。但是遇到复杂应用时,例如:我们需要在一个名为 handle-io 模块中处理所有沙箱中的 IO 请求。默认情况下,不同沙箱之间的 IO 事件是无法传播的,这时候,我们需要将事件传播到全局共享的 Y.Global 上

通过设置事件传播等级跨沙箱通信

分别看上个例子中的事件等级:

  • 第一个只能当前 IO 实例上触发,其传播等级为0
  • 第二个可在当前 IO 实例和 YUI 沙箱内的 YUI 实例上触发,其传播等级为1

除此之外,YUI 为了解决跨沙箱通信的问题,在所有 YUI 沙箱内都共享了一个 Y.Global 对象,其本身也是一个 EventTarget 对象,我们只要将事件传播等级设置为2,我们就可以在 Y.Global 上监听该事件

YUI.add('my-app', function(Y) {

    // 我们在这里创建了一个 io 实例,并将 broadcast 设置为2
    new Y.IO().publish({
        'io:complete': {
            broadcast: 2
        }
    });

    Y.io('foo.php');
    Y.io('bar.php');
    // ...
}, '1-0-0', {
    requires: ['io-base']
});

YUI().use('app-app', function(Y) {

    // 在 Y.Global 上监听 mp-app 模块中的 io 事件
    Y.Global.on('io:complete', function(id, xhr) {
         var result = Y.JSON.parse(xhr.responseText);

         switch(result.code) {
             case 401:
                 // ...
                 break;
             case 404:
                 // ...
                 break;
             case 500:
             default:
                 // ...

         }
    });
});
 本文来源:http://f2e.yunos-inc.com/2013/10/listening-global-yui-io-event/

友荐云推荐
×