jQuery 可以复制现有的 jQuery 方法或非 DOM 对象以进行扩展

Question

基本上，我正在使用现有的 jQuery 插件，我希望有 2 个实例可供 Jquery 使用。

对于这个 html:

<div id="div_1"></div>
<div id="div_2"></div>

我可以做到这一点:

$('#div_1').myplugin();
$('#div_2').copy_of_myplugin();

现在 myplugin 正在由我从 html 文件顶部的外部源拉入的脚本加载。

如果我 console.log($()); 我可以看到所有 native jQuery 方法以及插件脚本添加的方法的列表。

基本上，经过一番研究后，我认为这样的事情应该可行，但我无法确切地弄清楚如何做到这一点。

$.fn.copy_of_my_plugin = function () {
    return this.each(function () {
        var instance = $(this);
        if (instance.data('copy_of_my_plugin')) {
            return;
        }
        var copy_of_my_plugin = new $.extend(true, {}, $.fn.myplugin);
        instance.data('copy_of_my_plugin', copy_of_my_plugin);
    });
};

我可以再次console.log($());并看到copy_of_my_plugin被添加到jquery中，但看起来myplugin函数的任何内容都没有被实际复制。

有人知道我做错了什么吗？

Answer 1

很难弄清楚你想在代码中做什么。您确实意识到您的变量“instance”实际上被设置为示例中的 dom 元素 id="div_2"。您是否正在尝试获取同一插件的 2 个实例，或者只是尝试使用 2 个插件名称获取相同的功能？你确定你不只是想这样做吗？

$.fn.a_copy_of_my_plugin = $.fn.myplugin;

如果你使用你的代码，当你执行 console.log() 并能够“查看你的插件”时 - 它实际上并不是任何东西的副本，它只是指向你分配给 $ 的函数的指针。上面代码中的 fn.copy_of_my_plugin 。仅当您执行 $('#div_2').copy_of_myplugin(); 时那么它是否正在运行该函数，可以这么说，尝试“创建第二个实例”。

如果你想立即运行该函数，你可以替换 };与 }($);作为你的最后一行代码。

根据您的代码， this.each 仅在您使用 $('#div_2').copy_of_myplugin(); 时运行；然后尝试将新对象的副本存储在 jQuery 的数据缓存中 $('#div_2')。

您可能想看看这个。我认为它应该做你所追求的Best Way to Extend a jQuery Plugin