jQuery 插件可以是模块的本地插件吗？

Question

我真的很喜欢 JavaScript 模块模式来封装数据和逻辑。我也在广泛使用 jQuery。我的问题是这样的：

如果我在一个模块中定义一个 jQuery 扩展/插件，它会像其他函数一样是该模块的本地吗？ （我怀疑答案是否定的……）

例子：

var igPartListManager = (function () {
    // Define a jQuery plug-in I'd like to be local to igPartListManager 
    (function ($) {
        $.fn.myExtension = function () {
            // Do something with this.each()...
        }
    })(jQuery);

    var doSomethingCore = function () {
        // Use my jQuery plug-in
        $("selector").myExtension();
    };

    return {
        doSomething
            : doSomethingCore
    };
})();

在 igPartListManager 之外，这会成功吗？

...
$("some_unrelated_selector").myExtension();

如果是这样，我如何最好地将“本地”jQuery 扩展/类似插件的功能封装在一个模块中？

Answer 1

为了更好地解释这一点，我举了一个小例子来说明你定义扩展时实际发生的情况：

(function ($) {
    // $ = window.jQuery;
    $.fn.myExtension = function () {
        // Do something with this.each()...
    }
})(window.jQuery); // Note window.jQuery is basically the same as just jQuery from your example code

每当您尝试访问一个变量时，javascript 引擎都会在所有封装范围内冒泡，一直到 window 范围。具有该变量的第一个作用域是正在使用的作用域。由于在您的情况下，窗口范围包含您的 jQuery 变量，您可以将其称为“全局”。

调用$("some_unrelated_selector).myExtension(); 时，引擎会查找变量$。如果此时此变量指向window.jQuery，则实际上您使用的是与以前相同的对象。所以是的，在这种情况下会成功。但前提是您在尝试调用 $().myExtension(); 之前执行了 igPartListManager 函数。

为扩展创建本地范围的唯一方法是在向其添加扩展之前将window.jQuery 变量深复制到本地变量。

示例： Javascript deep copying object