将类方法绑定到类外部绑定的事件处理程序中的 AJAX 成功回调

Question

我的问题：

我创建了一个 JavaScript 类，供我们的开发团队在我们的网站上使用。它本质上是网格/表格结构的功能，允许用户选择项目并使用提供的操作按钮对这些项目执行操作。

操作按钮工作流程：

• 用户点击操作按钮
• 出现弹出窗口：“您确定要对这些项目执行此操作吗？”
  • 用户点击“是”：进行 AJAX 调用并在 AJAX 成功后关闭弹出窗口。
  • 用户点击“否”：弹出窗口关闭。

现在，这些操作按钮由我们的开发人员在 jQuery 中单独绑定在每个需要它的页面上。任何给定的页面都可能有一些事件绑定。

成功完成任何这些操作后，我想从任何给定的实例中运行Grid.afterActionComplete()。 我想在动作 AJAX 成功回调中运行 Grid.afterActionComplete()。 我知道我可以在课堂上公开（返回）afterActionComplete 并让开发人员自己运行该函数，但这并不理想.

我的要求：

• 希望将开发人员的额外代码量保持在最低限度
• 可以从任何给定页面（一些来自非操作按钮）发出许多 AJAX 请求，因此使用全局 ajaxSuccess 事件不一定有效。另外，我不想使用具有全局范围的事件。

我的问题有两个：

1. 如何将Grid.afterActionComplete() 动态绑定到任何给定操作的AJAX 成功回调？ （如果可能）
2. 如何在实例化时将动作绑定最好地合并到 Grid 类中以进一步封装我的代码？

我的示例代码：

/* [START] Pre-existing code */
var Grid = function(gridID){
    var gridID = $(gridID),
        afterActionComplete = function(){
            // Ideally, I'd like to bind the function here
        },
        refresh = function(){
            // Refresh grid
        },

        return {
            refresh : refresh
        }
}

var popup = function(){
    $('.popup').show();
    // Pops up a window with an Action button and Cancel button
    // Just a placeholder to help explain concept
}
/* [END] Pre-existing code */



/* 
    [START] Dev defined code
        Devs will be creating these event bindings across the
        site. 
*/
var myGrid = new Grid("#grid1");

$('#actionPopupButton').click(function(){

    popup();

    $('.popup #actionButton').click(function(){

        $.post( "ajax/test.html", function( data ) {

          myGrid.refresh();

          $('.popup').hide();

          // I'd like to inject Grid.afterActionComplete() here
          // Maybe create custom event and trigger() it here?
          // Ideally, I would love to not require the Devs insert additional code hre, but I'm not sure that's possible

        }); 

    });

});
/* [END] Dev defined code */

我已经考虑了一周左右的这些问题，希望有任何建议可以帮助我解决这个问题。谢谢！

Answer 1

假设所有“开发人员代码”都非常相似，我认为理想情况下您希望开发人员传递适当的参数，而不是创建一堆非常相似的代码。

例如，如果您将popup 方法作为Grid 的一部分并将url 和回调传递给函数，您可以执行以下操作：

popup = function(url, callback){
    var that = this;

    $('.popup').show();

    $('.popup #actionButton').click(function(){

        $.post( url, function( data ) {

            // call the passed in callback
            callback(data);

            // do your post-callback stuff
            that.refresh();      // assuming this happens in every callback

            $('.popup').hide();  // assuming this happens in every callback

            that.afterActionComplete();
        });
    });
}

那么您的示例开发人员代码将变为：

var myGrid = new Grid("#grid1");

$('#actionPopupButton').click(function(){

    myGrid.popup("ajax/test.html", function(data){
        // do instance-specific stuff here
    });

});

Answer 2

如果我错了，请纠正我。您希望仅在特定 AJAX 请求上调用Grid.afterActionComplete()，对吗？这就是为什么你不能使用.ajaxSuccess()？如果是这种情况，您能做的最好的事情就是触发自定义事件。

如果您觉得开发人员的工作量太大，您可以在 Grid 类的自定义函数中抽象出 $.post 功能。执行回调后，您可以调用Grid.afterActionComplete()。如果在这些请求之后必须调用Grid.afterActionComplete()，那么采用这条路线会更有意义，因为它似乎是合同的一部分。通过这种方式，您可以保护开发人员免受自己的伤害（即，如果他们忘记调用函数或触发自定义事件），让他们只能使用 Grid API 发布帖子。