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。

在我的Widget中我使用noConfilct模式，但似乎没有定义jQuery（此处第二个错误）

现在我的问题是，是否有可能使这个要求独立于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

要隔离你的widget功能，你应该使用匿名功能;这样，您的代码就不会与主页上包含的任何其他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以获取文档

Require.js独立于其他网站

1 个答案: