【问题标题】:Loose coupling of custom callbacks in jQueryjQuery 中自定义回调的松散耦合
【发布时间】:2011-11-07 14:21:36
【问题描述】:

我想知道是否存在允许在 jQuery 中松散耦合回调的设计模式/框架。

基本上,我有一个 ajax 调用,它检索回调函数中所需的设置。我有许多函数希望在 ajax 调用完成后触发,但希望避免执行以下操作:

$.getJSON('/webservice/config', function(data) {
    functionA();
    functionB();
}

我希望它是松散耦合的。有人知道这是如何实现的吗?

谢谢, 齿轮。

解决方案

这是我最后使用的:

function initConfig(callbacks) {

    $.getJSON('/webservices/config', function(data) {       

        $.each(data.config, function(key, value) { 
          config[data.config[key].paramName] = data.config[key].paramValue; 
        });

    }).done(function() {
        //callbacks
        callbacks.forEach(function(callback) {
           if (eval('typeof ' + callback) == 'function') {
            window[callback]();
        });
    });
}

然后我的代码非常松散耦合,因为我可以将任意数量的回调函数传递给原始函数,它们将按顺序运行,例如:

initConfig('setLocationData', 'setUserData');

【问题讨论】:

    标签: jquery jquery-callback loose-coupling


    【解决方案1】:

    jqXHR 对象是所有 AJAX 查询的返回值,它支持 done 方法,该方法允许您绑定在请求完成时执行的任意函数;

    jQuery.getJSON('/foo.json').done(function () {
     // One success handler
    }).done(function () {
     // Another success handler
    });
    

    这是因为 AJAX 模块在 jQuery 1.5 中被重写为使用 Deferred interface,这保证了在回调触发之前或之后绑定的处理程序的执行。

    编辑:解释我的评论

    function initConfig() {
        return $.getJSON('/webservices/config', function(data) {       
            $.each(data.config, function(key, value) { 
              config[data.config[key].paramName] = data.config[key].paramValue; 
            });
        });
    }
    
    initConfig().done(setLocationData, setUserData);
    

    【讨论】:

    • 谢谢,这就是我所追求的。有关我使用的实际解决方案,请参阅我的问题。
    • @Gearóid:看起来不错。我会考虑从函数中返回 jqXHR 并让被调用者根据需要添加它们(请参阅我的回答中的编辑!)
    • 嗯,当我尝试您的方法时,我似乎收到了“initConfig() is undefined”错误...
    • @Gearóid:您可能需要将您的initConfig 声明移出jQuery.ready() 块。
    【解决方案2】:

    $.ajax 函数可以接受多个成功回调。引用http://api.jquery.com/jQuery.ajax/:

    从 jQuery 1.5 开始,成功设置可以接受一个函数数组。每个函数都会被依次调用。

    简短示例:(参见http://jsfiddle.net/JhTDW/

    $.ajax({
      url: '/echo/json/',
      success: [
        function(data) {
          document.write('First callback: ' + data + '<br/>');
        },
        function(data) {
          document.write('Second callback: ' + data + '<br/>');
        }
      ]
    });
    

    【讨论】:

    • 我似乎找不到传递函数数组的代码示例。你能创建一个jsfiddle吗?
    • 在你的例子中,数据是ajax调用返回的参数正确吗?回调与返回的数据无关,我希望将它们传递给 ajax 成功方法,而不是让方法返回它们。
    【解决方案3】:

    不确定需要多松散地耦合,但在成功回调中,您始终可以将 data 对象发送到另一个函数。但我不确定这将如何解耦。在一种情况下,您从成功回调中调用functionA()functionB();在另一种情况下,您将数据发送到运行functionA()functionB()utilityFunction()

    在任何一种情况下,您都可以设置一个或多个条件来运行functionA() functionB()(或任何其他函数)。但同样,这可以在成功回调或实用程序函数中完成,所以我仍然不确定解耦会发生在哪里。

    问题的核心是:你得到了data,并且可能你想对这些数据采取行动,或者至少根据响应运行逻辑。它几乎是解耦的,从那里开始,这只是你想如何构建它的问题。

    【讨论】:

    • 你说得对,我希望对返回的数据采取行动。但是,我想用 ajax 调用来构造我的函数,以便可以将许多函数传递给它 - 即。该函数不知道它的回调。
    猜你喜欢
    • 2020-10-26
    • 2017-06-05
    • 2011-02-22
    • 2013-10-11
    • 2010-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-15
    相关资源
    最近更新 更多