jQuery插件开发 - 将参数传递给用户定义的回调函数 [英] jQuery Plugin Development - passing parameters to user defined callback function

问题描述

提前谢谢大家。这是我第一次开发一个jQuery插件（并且第一次在javascript中开发实际上也是如此），我不得不说我非常了不起（它可能对你经验丰富的js / jquery开发人员有很多可怕的事情，但这是我的第一次尝试 - 请忍受我:)。我欢迎对任何代码进行任何建设性的批评。

Thank you all ahead of time. This is my first time developing a jQuery plugin (and first time developing in javascript as well actually), and I have to say I'm pretty geeked (It probably has many hideous things to you seasoned js/jquery developers, but this is my first attempt - please bear with me :). I welcome any constructive criticism of any of the code too.

这是一个模型盒插件（是的，还有其他的，但工作要求规定我自己编写代码避免第三方依赖）显示给定的文本，来自ajax调用的文本，或者从ajax调用给出/获取的表单，然后通过ajax处理表单提交。这需要尽可能自定义，所以我试图提供一些钩子（?? - 匿名函数），用户可以使用它来将自定义代码传递给插件。

This is a model box plugin (yes, there are others, but job requirements dictate that I code my own to avoid third-party dependency) that displays text given, text from an ajax call, or a form given/taken from an ajax call and then handles the form submission via ajax. This needs to be as customizable as possible, so I am attemping to provide some hooks ( ?? - anonymous functions ) the user can use to pass custom code to the plugin.

我遇到的问题是为用户功能提供参数。如果我使用关键字'this'，我可以传递'msg'变量，用户函数可以使用它。但是当我传递'msg'而不是'this'时，用户会得到一个空白变量。我想传递的不仅仅是msg - 也是在ajax调用中传递的数据数组，模型框的jQuery对象是我真正想做的。

The problem I am having is providing parameters to the user function. If I use the keyword 'this', I can pass the 'msg' variable fine and the user function can use it. But when I pass 'msg' instead of 'this' the user gets a blank variable. I would like to pass more than just the msg - also an array of data passed in the ajax call and a jQuery object of the model box is what I would really like to do.

下面是代码片段 - 该函数位于插件内部并在其中调用;我只是将一些代码分组到用于组织/开发目的的函数中。

Below is the snippet - the function is inside of and called within the plugin; I just grouped some code into functions for organization/development purposes.

    // Submits the form inside of the model box
    // and calls the user hooks of onFormSuccess and
    // onFormFailure for ajax success and error
    function submitForm() {
        var URL = $('form',$contentNode).attr('action'), 
        method = $('form',$contentNode).attr('method'),
        data = $('form',$contentNode).formSerialize();

        $.ajax({
            url: URL,
            type: method,
            data: data,
            success: function(msg) {
                // Doesn't work, but I would like it too
                //settings.onFormSuccess.call(msg, breakData(data) );
                // Does work
                settings.onFormSuccess.call(this);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                setings.onFormFailure.call(errorThrown);
            }
        });
        closeModel();
    }

推荐答案

参见 调用语法。第一个参数确定这个将在回调函数本身内。 不作为参数传递给回调函数。

See the call syntax. The first parameter determines what this will be inside the callback function itself. It is not passed as a parameter to the callback function.

要将参数传递给回调，请使用<$ c $的其余参数c>致电：

To pass parameters to the callback you use the remaining parameters of call:

settings.onFormSuccess.call(thisArg, msg, dataArray);

然后回调将接收两个参数，并以运行指向 thisArg ：

The callback will then receive two parameters, and run with this pointing to thisArg:

function successHandler(msg, dataArray) {}

你的代码的另一个问题是这个<的值/ code>在里面成功处理程序是没有意义的。从它看起来它只会指向窗口对象。所以你调用的回调也将运行 this == window 。

Another issue with your code is the value of this inside your success handler is meaningless. From what it looks like it will just point to the window object. So the callbacks you call will also be running with this == window.

这篇关于jQuery插件开发 - 将参数传递给用户定义的回调函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！