javascript - 了解常见的 jQuery 插件样板

Question

我试图理解下面代码的第 10 行和第 12 行，并尝试进行解释。请酌情更正我。

//Line 10
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
//Line 12
return methods.init.apply(this, arguments);

第 10 行。如果提供给 samplePlugin 的参数是一个方法，则使该方法具有与当前脚本位置(即第 10 行)相同的 this，并且...帮助! arguments 在哪里定义？ call() 有什么用？编辑。好吧，看起来 Array.prototype.slice.call(arguments, 1) 用除了第一个参数之外的所有参数组成了一个真正的数组，但是，仍然有点神秘。

第 12 行。否则，如果提供给 samplePlugin 的参数是一个对象或为空，则使 init 方法具有与当前脚本位置相同的 this (即第 12 行)，以及……看起来更简单，但仍然需要帮助……

(function($){
    var methods = {
        init    : function (options) {return this.each(function () {/* ... */});},
        method1 : function ()        {return this.each(function () {/* ... */});},
        method2 : function ()        {return this.each(function () {/* ... */});}
    };

    $.fn.samplePlugin = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));   //Line 10
        } else if (typeof method === 'object' || ! method) {
            return methods.init.apply(this, arguments);                                     //Line 12
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.samplePlugin');
        }    
    };
    }(jQuery)
);

Answer 1

您自己解开了一些部分，但其中涉及 JavaScript 函数欺骗的重要部分。让我们把它们分开:

arguments是函数体内的一个“魔法”变量，它提供对函数参数的访问。它只是存在而没有声明，并且像数组一样工作但不是数组(稍后会变得很重要)。

如果你想访问函数的第一个参数，arguments[0] 就是你要找的地方。在您的特定函数中，它始终与变量 method 相同。

如果你想获得任何额外的参数(请记住，你可以使用任意数量的参数调用 JS 函数，而不仅仅是声明的参数)，第一遍可能如下所示:

arguments.slice(1)

但是，请记住，arguments 不是数组，它只是看起来像一个数组。缺少所有 Array 方法。所以我们需要borrow them来自 Array.prototype，其中“真正的”数组从:

Array.prototype.slice

要让 slice 与 arguments 一起工作，必须使用 arguments 作为 this 调用它:

Array.prototype.slice.call(arguments, 1)

( Read up on Function.prototype.call )

到目前为止一切顺利。

现在，想象一下 jQuery 插件是这样调用的:

$('body').samplePlugin('method1', 'foo', 'bar');

变量 method 现在是 "method1"。第一个if被触发，因为在methods中是一个method1键，它是一个函数。因此该函数使用所有剩余参数调用:

methods['method1'].apply(this, ['foo', 'bar']);

第二个分支:如果插件是这样调用的:

$('body').samplePlugin({ foo: 'bar' });

然后 method == { foo: 'bar' } 我们将到达分支 2，因为它是一个对象。样板作者的想法是，在这种情况下，应该调用 init 方法:

methods['init'].apply(this, arguments);

(methods['init'] 与 JS 中的 methods.init 相同。)我们不需要上面的拼接技巧，因为 arguments [0] 不是任何方法名称。