时间戳

首页 > 解决方案 > $.fn 链方法 - 调用变量

jquery - $.fn 链方法 - 调用变量

问题描述

问题 - 简短

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

解释

我们有一个自定义函数

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

这将遍历一个对象和其中的console.log()每个项目。

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

<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 “选择”的对象上调用这些方法。

如果您必须首先使用 jQuery“选择”对象，有没有办法选择一个变量，而不是 DOM 的一个元素。

标签： jquery

解决方案

是否是变量都不是问题。问题是您正在与之交互的内容。

您已经添加example到jQuery.fn，这意味着它在 jQuery 对象上可用，而不是在其他类型的对象上，但这是因为您专门做了什么：将它添加到 jQuery 对象用作其原型的对象中。

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

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();

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

  • 始终将您要添加的新属性定义为不可枚举（上面通过使用 来做到这一点Object.defineProperty，默认情况下会添加不可枚举的属性）。
  • 始终选择未来 JavaScript 增强功能不太可能使用的名称。example不太可能用于未来的 JavaScript 增强，但通常最好使用某种完全唯一的前缀。
  • 如果你正在编写一个供其他人使用的库，最好不要修改内置原型

推荐阅读