Question

我目前正在使用jQuery编写一个库，而我正面临着一个无法独自通过的墙。

首先，这是一些代码：

(function($) {
// default options
var defaults = {
    option1: "what ever",
    option2: "what ever"
};

// available methods
var methods = {
    method1: function(param1) {
        console.log(param1);
        /* ... */
    },
    method2: function(param1, param2) {
        console.log(param1);
        console.log(param2); // gives undefined
        /* ... */
    }
};

// Where magic happens
$.fn.pskChart = function(params) {
    if (methods[params] != undefined) {
        if (this.length > 0) {
            return $(this).each(function(i) {
                return methods[params].apply($(this), Array.prototype.slice.call(arguments, 1));
            });
        }
    } else {
        $.error("Method " + params + " doesn't exist for pskChart");
    }
}
})(jQuery);


$("#sample").pskChart("method1", "param1"); // will work
$("#sample").pskChart("method2", "param1", "param2"); // won't work

此代码适用于我只提供两个参数（方法和其他参数）但如果我有更多参数则无效

我理解Array.prototype.slice.call(arguments, 1)只返回一个包含所有剩余参数的对象。

在第二个示例中，只使用一个包含method2

的参数调用["param1","param2"]

我想“拆分”这个对象，以便提供尽可能多的参数。

我感觉像methods[params].apply($(this), Array.prototype.slice.call(arguments, 1));，但我不知道如何解决它。

请注意，我可以有一个无限（或至少大）个参数（除了方法之外，它总是第一个）。使用Array.slice并不是一个好的（也不是正确的）解决方案。

Answer 1

我不知道为什么即使只使用一个参数也能正常工作，因为您使用了错误的arguments对象。

相反（见评论）：

// Where magic happens
$.fn.pskChart = function(params) {
    var args; // **Change** We'll use this below
    if (methods[params] != undefined) {
        if (this.length > 0) {
            // **Change** Grab the arguments here, in the `pskChart` function
            args = Array.prototype.slice.call(arguments, 1);
            return $(this).each(function(i) {
                // **Change** Use them here; you can't use `arguments` here
                // because, it will be the arguments to this anonymouus
                // function, not the ones to `pskChart`
                return methods[params].apply($(this), args);
            });
        }
    } else {
        $.error("Method " + params + " doesn't exist for pskChart");
    }
}

旁注：params是您用作方法名称的参数的一个非常奇怪的名称。也许是methodName？

附注2：考虑使用变量，而不是反复查找methods[params]。大型套装可能会受益于减少的工作。

旁注3：each循环中的这一行几乎肯定是错误的：

return methods[params].apply($(this), args);

这会将方法的返回值返回给jQuery的each代码。 jQuery的each代码将完全忽略该它的=== false，在这种情况下，它将停止each循环。根本不可能是你的意思。

附注4：作为jQuery插件的pskChart函数应该返回this，除非它有充分的理由返回其他内容。现在，返回值是混乱的：如果集合没有元素，则返回undefined（隐式）;如果集合包含对象，则返回 new jQuery对象，而不是this，因为这行：

return $(this).each(function(i) {

没有理由在$()使用this，this.length 已经一个jQuery集（这就是前一行使用}的原因）。

附注5：您在赋值语句中缺少分号（例如，在函数表达式的结束// Where magic happens $.fn.pskChart = function(methodName) { var args, method = methods[methodName]; if (!method) { // Throws $.error("Method " + params + " doesn't exist for pskChart"); } if (this.length > 0) { args = Array.prototype.slice.call(arguments, 1); this.each(function() { method.apply($(this), args); }); } return this; };之后应该有一个分号）。

建议：

{{1}}

将对象拆分为数组

1 个答案: