Question

我的问题：

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

操作按钮工作流程

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

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

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

我的要求：

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

我的问题是双重的：

如何将Grid.afterActionComplete()动态绑定到任何给定操作的AJAX成功回调？（如果可能的话）
在实例化时如何最好地将动作绑定合并到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

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

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

Answer 2

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

例如，如果您将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
    });

});

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

我的问题：

我的要求：

我的问题是双重的：

我的示例代码：

2 个答案: