$ .fn链方法-调用变量

Question

问题-简短

您可以从变量中调用链中的jQuery方法，还是只能在jQuery对象/元素上使用这些方法？

说明

我们有一个自定义功能

$.fn.example = function(){
    $.each(this, (index, item) => {
        console.log(item);
    }
    return this;
}

这将循环遍历一个对象，并console.log()中的每个项目。

假设HTML中有3个<p>标签。

<p>One</p>
<p>Two</p>
<p>Three</p>

如果我们调用$('p').example()，则<p>One</p>，<p>Two</p>，<p>Three</p>元素将一个接一个地记录到控制台。

问题-继续

这种类型的方法链接仅只能与jQuery对象一起使用，就像上面一样，还是有一种方法可以在变量上调用此方法？

例如

let someArray = ["one", "two", "three"];

someArray.example();

上面的代码不起作用，因为example()不是someArray的方法

问题-决赛

是否有正确的方法可以从链中，从变量或对象中依次调用jQuery方法，还是只能在已被jQuery“选中”的对象上调用这些方法。 / p>

如果必须首先使用jQuery“选择”对象，则可以选择变量而不是DOM元素。

Answer 1

是否为变量不是问题。问题是您正在与之交互。

您已将mysql添加到example，这意味着它可以在jQuery对象上使用，而不能在其他类型的对象上使用，但这是由于您专门做的事情：将其添加到了jQuery对象用作其原型的对象。

您也可以使用数组来做到这一点：

jQuery.fn

实时示例：

Object.defineProperty(Array.prototype, "example", {
    value: function() {
        // Your code here
    },
    writable: true,
    configurable: true
});

但是，修改内置原型带有一些主要警告：

• 始终将要添加的新属性定义为不可枚举（上面通过使用Object.defineProperty(Array.prototype, "example", { value: function() { this.forEach(entry => { console.log(entry); }); return this; }, writable: true, configurable: true }); var array = ["one", "two", "three"]; array.example();来实现，默认情况下会添加不可枚举的属性）。
• 始终选择将来的JavaScript增强不太可能使用的名称。 Object.defineProperty不太可能用于将来的JavaScript增强，但通常最好使用某种完全唯一的前缀。
• 如果您要编写供其他人使用的库，则最好不要完全修改内置原型

Answer 2

如果我没记错的话，您可以通过$(someArray).example();完成。

请尝试以下操作。

$.fn.example = function(){
    $.each(this, (index, item) => {
        console.log(item);
    });
    return this;
}

let someArray = ["one", "two", "three"];

$(someArray).example();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Answer 3

您需要将数组包装在$()中，因为$.fn['methodName']仅链接到jQuery对象

$.fn.example = function(){
    $.each(this, (index, item) => {
        console.log(item);
    })
    return this;
}

let someArray = ["one", "two", "three"];

$(someArray).example();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

我喜欢@Karan的建议。这是最好的方法。但是，如果要向Array原型添加方法，则可以执行此操作。但是请注意。首先阅读为什么不应该这样做：Why is extending native objects a bad practice?

这是您想要的代码：

Array.prototype.example = function () {
    this.forEach(function (item) {
        console.log(item);
    });
}

let someArray = ["one", "two", "three"];

someArray.example();

但这不是一个好主意！