jquery - MooTools 导致 jQuery Web 应用程序外部崩溃

Question

应用程序构建于 jQuery , require.js , html , css - 一些使用此应用程序的网站也有 MooTools.js，该框架与我的应用程序冲突，无法与 jQuery 结合。

当应用程序启动时，它需要工作的所有外部源(例如脚本和CSS)都会进入主机网页的head标签和HTML到<div id="widget"/> .

注入(inject)代码如下:

<script language="javascript" type="text/javascript" src="code.jquery.com/jquery-1.8.2.js"></script>
<link href="@(ConfigurationSettings.AppSettings["AppPathFE"] + "outside-ip/widget.css")" />
<script src="@(ConfigurationSettings.AppSettings["AppPathFE"] + "outside-ip/widget.js")"></script>

<div id="widget"></div>

<script>      
    $(function () {
        WG.initialize({
            urlFE: '@(ConfigurationSettings.AppSettings["AppPathFE"])',
            urlBE: '@(ConfigurationSettings.AppSettings["AppPathBE"])',
            theme: 'base',
            lang: 'en-en',
            cache: false,
            logging: true,
            talk: {
                url: '@(ConfigurationSettings.AppSettings["AppTalk"])',
                logging: true,
            },
            air: {
                url: '@(ConfigurationSettings.AppSettings["AppAir"])',
                logging: true,
            },
        });
    });       
</script>

Answer 1

您需要使用 jQuery 而不是 $。

MooTools 使用 $ 作为 document.id 的别名，它基本上是 document.getElementById 但具有 MooTools 的功能。

因此，如果您将代码更改为以下内容，您应该是安全的:
(当然，您还必须将脚本文件中的所有 $ 更改为 jQuery):

    jQuery(function () {
        WG.initialize({

而不是

    $(function () {
        WG.initialize({

您还可以在脚本代码中将所有代码包装在 (function($){ code here })(jQuery); 中。因此，如果您的脚本将 WG 导出到全局空间，您可能会:

var WG;
(function($){ 
    // all script code here, removing the var declaration inside the wrap function
})(jQuery);

或者只是到脚本中的window.WG。