Javascript - 传递和查找回调函数

发布于 2024-10-20 14:19:17 字数 873 浏览 2 评论 0原文

我正在编写一个小模块,它将有几个不同的方面,所有方面都基于 ajax 调用。我想允许主要的 ajax 功能,即 beforeSend、success、complete 等(我使用 jQuery)是可定制的。

最好的方法是什么?

我目前在模块中有一个选项对象,可以使用传递给 init 函数的选项对象进行扩展。在这里,我为每个不同类型的操作传递一个带有嵌套对象的“回调”对象,如...

        var insertCallbacks = {

        before : function() {

        },
        success : function() {

        },
        error : function() {

        },
        complete : function() {

        }
    };

    var updateCallbacks = {
        before : function() {

        },
        success : function() {

        },
        error : function() {

        },
        complete : function() {

        }
    };

    var callbacks =  {
        insert : addCallbacks,
        update : removeCallbacks    
    };

   MY_MODULE.init( {callbacks : callbacks} );

问题是这变得有点混乱,测试 ajax 回调上每个方法的存在。

任何人都可以为此提供有关良好/更好模式的任何建议。

I am writing a small module which will have several different aspects to it, all based around ajax calls. I want to allow the main ajax functions i.e beforeSend, success, complete etc (I am using jQuery) to be customizeable.

What is the best way to do this?

I currently have an options object in the module which can be extended with an options object passed to an init function. In here, I am passing a 'callbacks' object with nested ojects for each different type of action as in...

        var insertCallbacks = {

        before : function() {

        },
        success : function() {

        },
        error : function() {

        },
        complete : function() {

        }
    };

    var updateCallbacks = {
        before : function() {

        },
        success : function() {

        },
        error : function() {

        },
        complete : function() {

        }
    };

    var callbacks =  {
        insert : addCallbacks,
        update : removeCallbacks    
    };

   MY_MODULE.init( {callbacks : callbacks} );

The problem is this then becomes a bit messy, testing for the existence of each of these methods on the ajax callbacks.

Can anyone offer any advice on a good/better pattern for this.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

轻许诺言 2024-10-27 14:19:17

我会选择自定义事件而不是回调。因此,在您的模块中,您将具有如下代码:

MY_MODULE.trigger('updateComplete');

在模块外部的所有部分(以及内部,如果需要),您绑定处理程序(现在它们是回调):

 MY_MODULE.bind('updateComplete', function() { 
    alert('update completed'); 
 } );

jQuery 中的自定义事件打开了复杂行为的大门,或谷歌任何其他文章。自定义事件将帮助您保持代码结构化,并且更容易测试

ADD ON: 使用回调,您需要始终检查是否有回调,这样您的代码就可以

if ( callbacks && callbacks.insert ) {
    callbacks.insert();
}

改进模块功能并增强它,一有一天,您遇到这样的情况:对于相同的情况,应该传递很少的回调(例如,两个实体或 UI 组件对模块“更新”感兴趣)...这将使您的工作变得太困难。对于事件,您总是有一个代码行,

MY_MODULE.trigger('updateComplete');

没有任何条件来检查是否有任何附加的处理程序(对事件感兴趣),并且您可以为同一事件拥有所需数量的处理程序。

I would go with custom events rather than callbacks. So in your module you will have code like:

MY_MODULE.trigger('updateComplete');

and in all parts outside of module (as well as inside if needed), you bind handlers (now they are callbacks):

 MY_MODULE.bind('updateComplete', function() { 
    alert('update completed'); 
 } );

Custom events in jQuery open doors to complex behaviors, or google any other article. Custom events will help you to keep code structured, and easier to test

ADD ON: with callbacks you need always to check if there is any, so you code becomes

if ( callbacks && callbacks.insert ) {
    callbacks.insert();
}

improving your module functionality, and enhancing it, one day you get a situation that few callbacks should be passed for the same situation (e.g. two entities or UI components are interested in module 'updating')... It will make your job too difficult. With events you always have one code line

MY_MODULE.trigger('updateComplete');

with no conditions to check if there is any handler attached (interested in an event), and you can have as many as needed handlers for the same event.

桃扇骨 2024-10-27 14:19:17

只需执行与 jQuery 相同的操作即可。让您的模块触发事件(通过 trigger()),并在必要时将处理程序附加到这些事件(通过 bind())。这样您就不必在模块内部检查哪些函数正在侦听(或者如果有的话)。

由于您的代码不包含我可以用于示例的任何内容,因此很难向此答案添加代码。

Just do the same thing jQuery does. Let your module fire events (via trigger()) and attach handlers to these events when necessary (via bind()). This way you do not have to check inside your module what functions are listening (or if at all).

Since your code does not contain anything I could use for a sample, it's kind of hard to add code to this answer.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文