Question

我正在开发一个在我无法控制的框架内运行的小部件。我的小部件使用了jQuery的最新版本，其中框架使用了一些相当可怕的旧版本。

最近我的代码遇到了一些问题，我（最终）发现这是一个jQuery冲突问题。

窗口小部件格式有点奇怪，在此框架/模板中作为iframe运行。

它使用widget.onload函数而不是任何jQuery doc ready函数。我倾向于在那里运行一个或两个函数来初始化一个单独的类。

<script type="text/javascript">
//<![CDATA[

    MyClass = {
        init : function() {
            // Where I build my "pseudo-class"
        }
    }

    widget.onLoad = function(){
        /* My code goes here */

        MyClass.init();
    };

//]]>
</script>

这不是问题 - 它只是上下文 - 通常我可以正常运行jQuery，如下所示：

widget.onLoad = function(){
    /* My code goes here */

    var id = $('a.student_iframe_popup').attr("id");
    MyClass.init(id);
};

我也在javascript中正常引用我的小部件中的其他脚本：

<script type="text/javascript" src="/user/74/187887.js"></script> <!-- jQuery 1.10.2 -->
<script type="text/javascript" src="/user/74/188165.js"></script> <!-- jQuery bPopup -->
<script type="text/javascript" src="/user/74/188166.html"></script> <!-- Student Flags Iframe Popup -->

我链接的最后一个脚本只是一个简单的函数，我打算在我的一些小部件脚本中使用它：

  $('body').on("click", ".student_iframe_popup", function() {
        $('body').append('<iframe></iframe>');

    var student_id = 'student_' + $(this).attr("id");

    $('iframe').attr("width", 800);
    $('iframe').attr("height", 600);
    $('iframe').attr("id", student_id);
    $('iframe').attr("src", '/index.phtml?d=825090');

    $('iframe').bPopup({
        modalClose: true,
        escClose: true,
              opacity: 0,
        position: ['auto', 10]
    });
  });

这一切都很好 - 除了在IE浏览器中，我的一些小工具，我得到随机错误。如果我更改我的代码以使用以下内容...

widget.onLoad = function(){
    /* My code goes here */
    jQuery.noConflinct();

    var id = jQuery('a.student_iframe_popup').attr("id");
    MyClass.init(id);
};

将我引用的脚本从$更改为jQuery一切正常 - “错误”神奇地消失了。

但是，我在我的脚本中使用了很多美元符号，现在我CTRL+H用$替换jQuery一切都变得更多了难以阅读，输入新代码自然需要更长的时间。

如果我正在撰写普通的HTML / JS文档，我知道我可以使用以下代码继续使用$(blah)代替jQuery(blah)：

jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
});

但由于我没有使用文档就绪功能，我不知道如何实现noConflict的变体。

任何人都可以提供更好的替代方案，在我的小部件框架中工作吗？

Answer 1

您不必使用ready()，您只需创建一个闭包并将jQuery作为参数传递：

jQuery.noConflict();

(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

jQuery docs

另外需要注意：加载顺序在这里很重要，如果jQuery.bPopup正在加载jQuery的其他版本（根据你的解释，它听起来就是这样），它将覆盖jQuery（除非它正在加载jQuery）在noconflict模式本身）。您可能需要在加载jQuery 1.10之后执行某些操作，但之前加载插件的<script>标记：

// --- before jquery.bPopup is loaded
var jQ-1.10.2 = jQuery.noConflict(true); // alias jQuery-1.10.2

(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery-1.10.2
  });
})(jQ-1.10.2);

// --- after jQuery.bPopup is loaded
// outside of closure $ refers to jQuery.bPopup version of jQuery

使用两个版本的jQuery和最简单，最具代码效率的noConflict方法

1 个答案: