javascript - 如何向某些 jQuery 对象添加函数，而不向其他对象添加函数？

Question

假设我有一个 <ul>列表:

<ul class="products">
    ...
</ul>

我想用 jQuery 选择它，然后向该对象添加一些函数。例如，我想添加一个 addProduct(productData)功能和一个deleteProduct(productId)功能。但是，我希望只将函数添加到选择器返回的对象中。例如，像这样:

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

我如何使用 jQuery 来做到这一点？这里的关键点是我只想将函数添加到 jQuery 选择器返回的实例中。换句话说，我不想修改 jQuery 的原型(prototype)或创建插件，因为这些将使函数在所有地方都可用，而我只想将函数添加到一个特定实例。

Answer 1

如果您只希望addProduct 和deleteProduct 方法在单个 jQuery 对象上发挥作用，那么您所拥有的将可以正常工作;但是您必须保留对该 jQuery 对象的引用/仅使用它一次，以保留 addProduct 和 deleteProduct 方法的存在。

但是，这些 addProduct 和 deleteProduct 方法对于特定的 jQuery 对象是唯一的；这些方法不会存在于您创建的任何其他 jQuery 对象上；

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

// Using this particular jQuery object (productList) will work fine.
productList.addProduct();
productList.removeProduct();

// However, addProduct() does not exist on new jQuery objects, even if they use
// the same selector.
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct'

最好的方法是回归基础并定义单独的 addProduct 和 deleteProduct 函数，它们接受 jQuery 对象。如果您想将这些功能限制为它们仅适用于 ul.products 选择器，您可以这样做；

function addProduct(obj) {
    obj = obj.filter('ul.products');

    // do something with `obj` (its a jQuery object)
}

推荐使用这种方法，因为它使 jQuery.fn API 保持一致；否则你会添加 addProduct 和 removeProduct 到 some jQuery.fn 实例而不是其他实例，或者使他们的在其他人中使用多余。然而，通过这种方法，addProduct 和 removeProduct 始终存在，但如果他们不想使用它们，请不要妨碍任何人。

---

历史记录

这个答案最初写于 2011 年 11 月，当时 jQuery 1.7 发布。从那时起，API 发生了很大变化。上面的答案与 当前 2.0.0 版的 jQuery 相关。

在 1.9 之前，使用了一个名为 jQuery.sub 的方法曾经存在，这与您正在尝试做的事情相关(但除非您改变方法，否则不会帮助您)。这将创建一个新的 jQuery 构造函数，因此您可以这样做；

var newjQuery = jQuery.sub();
newjQuery.fn.addProduct = function () {
    // blah blah
};
newjQuery.fn.deleteProduct = function () {
    // blah blah
};

var foo = newjQuery('ul.products');
foo.deleteProduct();
foo.addProduct();

var bar = jQuery('ul.products');
bar.deleteProduct(); // error
bar.addProduct(); // error

不过要小心，$ 方法别名会引用旧的 jQuery 对象，而不是 newjQuery 实例。

jQuery.sub 在 1.9 中从 jQuery 中移除。现在可用 as a plugin .