javascript - Require.js 独立于其他网站

Question

我创建了一个使用 requirejs 的小部件。
该小部件可将其放置到任何网站中。
这意味着我无法控制此网站中加载的任何脚本。

实现我的小部件的代码如下所示:

<!-- Widget start -->
<script data-main="urlto/main" src="urlto/require.min.js"></script>
<div id="myWidget" data-auth="xxx-token-xxx"></div>
<!-- Widget end -->

现在我在测试用例中遇到了同样的错误。

Uncaught Error: Mismatched anonymous define() module: [object Object]
Uncaught TypeError: Cannot read property 'easing' of undefined 

现在我读到，requirejs 必须是网站中第一个加载的脚本。但我无法控制这一点。它依赖于 jQuery，这是通过 requirejs 加载到 Widget 本身中的。
问题是，几乎每个页面都使用自己的 jquery。

在我的小部件中，我使用 noConfilct 模式，但似乎未定义 jQuery(此处出现第二个错误)

现在我的问题是，是否可以使这个 requirejs Widget 独立，以便我可以将它放置在任何网站上而不破坏那里现有的代码？或者没有 requirejs 哪个更好。

这是我的 main.js 文件:

// require js config
requirejs.config({
    map: {
        '*': {
            'jquery': 'noconflict'
        },
        'noconflict': {
            'jquery': 'jquery'
        }
    },
    paths: {
        jquery: [
            'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
            'jquery-1.10.2.min'
        ],
        'moment': 'moment.min',
        'moment-timezone': 'moment-timezone.min',
        'moment-timezone-data': 'moment-timezone-data',
        'momentDe': 'moment.de.min',
        'pikaday': 'pikaday',
        'placeholder': 'placeholder.min',
        'spinner': 'spin.min',
        'get': 'get'
    },

});


// initialize widget
require(['get', 'widget'], function () {
    //var $ = require('jquery');

    var Widget = require('widget');
    var widget = new Widget();

    //widget.doSomething();
});

Answer 1

要隔离您的小部件功能，您应该使用匿名函数；这样您的代码就不会与主机页面上包含的任何其他 JavaScript 代码发生冲突

(function() {
    //  anonymous function

})();

检查jquery是否已加载

var jQuery;

if (window.jQuery === undefined || window.jQuery.fn.jquery !== 'version to check e.g.1.8.1') {
    var script = document.createElement('script');
    script.setAttribute("type","text/javascript");
    script.setAttribute("src",
        "url to your jquery file");
    if (script.readyState) {
      script.onreadystatechange = function () { //old versions IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script.onload = scriptLoadHandler;
    }
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // jQuery version is ok
    jQuery = window.jQuery;
    call your function();
}

引用这个不错的post用于文档