javascript - 使用 noConflict 初始化 jQuery 插件

Question

因此，我尝试在请求的限制范围内工作并取得了一些进展，但我仍然被锁定。场景如下:

目前，我正在使用一个依赖于 jQuery v1.4.2 的网站。由于我在后端获得的唯一访问权限是能够将内容注入(inject) CMS 驱动的页面，因此我一直在旁加载 jQuery 1.11 以支持一些急需的功能。

快进到昨天，我意识到客户的开发团队现在已经捆绑了 v1.4 和 v1.11，并且没有将 1.11 与 $$ 冲突。

(function() {
    $$ = $.noConflict( true );  // Move jQuery 1.11.0 into $$ and restore $ to jQuery 1.4.2
})();

// Use the following self-invoking anonymous function 
// when you need to run code that depends on $ = jQuery 1.11
// Otherwise, you can access jquery 1.11 with $$
//  (function( $ ){
// inside here $ is jQuery 1.11
// and jQuery 1.4.2 is out of scope
//  })( $$ );

由于我的脚本(以及我试图加载到页面中的插件)被注入(inject)到页面中间，而 jQuery v1.4 和 v1.11 位于页面底部，所以我正在加载它方式:

(function checkForJquery() {
    if ('$$' in window) {
        (function($) {
            console.log('success');
            $.getScript("myplugin.jquery.js", function() {
                $( ".devices").myplugin({
                    // devices - Array | productID
                    prop1: ["prod3960155", "prod3640151", "prod3640152", "prod5530141"],
                    prop2: "attribute",
                    prop3: "attribute"
                });
            });
        })($$);
    } else {
        console.log('not yet');
        window.setTimeout(checkForJquery, 1000);
    }
})();

所以我遇到的问题是，如果我使用:

(function( $ ){})( $$ );

我什么也没得到 - 插件从未初始化。但是，如果我使用:

(function( $ ){})( jQuery );

它确实有效，但我无法访问最新的 API。知道为什么一个会起作用而另一个不起作用吗？

为清楚起见，我使用的是 jQuery 插件样板，它是这样开始的:

;( function( $, window, document, undefined ) { } )( jQuery, window, document );

如有任何见解，我们将不胜感激!

谢谢，乔

Answer 1

您的脚本无法运行的原因不是您对插件的调用，而是创建。

解释一下，下面的代码只使用第二个实例 $$ 来搜索类 .devices 的所有元素并启动你的插件 myPlugin。没有别的。

(function($) {
    $(".devices").myplugin();
})($$);

但是您只为旧版本注册了您的插件。当您在上面的代码中使用 jQuery 而不是 $$ 时，这就是它起作用的原因。

要在您的插件中使用 $$ jQuery 实例，您也必须在创建时设置它。但是你已经传入了 jQuery。并且因为您使用了 noConflict，所以名称 jQuery 属于旧版本的 jQuery。

要将您的插件注册到正确的实例，您还必须在创建时将其更改为 $$。

;(function($, window, document, undefined){})($$, window, document);

要让您的插件在其他安装上运行，您可以添加 jQuery 作为后备。如果您也在其他网站上使用该插件并且不想每次都更改它，这将有所帮助。

;(function($, window, document, undefined){})($$ || jQuery, window, document);

就是这样。