Question

我在使用requirejs，jquery和我编写的可嵌入小部件时遇到了一些麻烦。该小部件通过javascript（包含jQuery的缩小版本）加载。

问题是主机站点正在使用requirejs并尝试加载jquery。不知何故，requirejs似乎认为已经加载了jquery（因为加载器脚本中的缩小版本）并且跳过了jquery的加载。它使用加载器脚本包含的版本。这会（由于时间问题？）使加载引导失败，因为它找不到jquery。

如何在主机站点上获取requirejs以加载jquery？为什么它受我的embeddable小部件包含的jquery版本的影响？

带有reqiurejs的主机站点和加载小部件的脚本：

<body>
    ...
    <script async="" src="http://example.com/WidgetLoaderScript.js"></script>
    ...
    <script src="/Scripts/require.js"></script>
    <script>
        requirejs.config({
            baseUrl: "../../Scripts",
            paths: {
                jquery: "jquery-1.10.2.min",
                bootstrap: "bootstrap.min"
            },
            shim: {
                bootstrap: {
                    deps: ["jquery"]
                }
            }
        });

        require(["jquery", "bootstrap"], function ($) {
            // Do stuff
        });
    </script>
</body>

加载程序脚本的一部分：

(function (window, document, undefined) {

    // Load minified version of jQuery
    (function(e,t){var n,r,i ......;

    var $abc = $.noConflict();

    // Use $abc to append widget into host site
    ...
 })(window, document);

Answer 1

Require.js基本上是一个脚本加载器，所以为什么不使用它来加载你的小部件。有关示例，请查看路径回退部分中的docs。您还可以为插件指定JQuery依赖项。

requirejs.config({
    paths: {
        ....(other script definitions).....
        'myWidget': 'http://example.com/WidgetLoaderScript'
    },
    shim: {
       'myWidget': ['jquery']
    }
});

Answer 2

检查this

(function () {

    var paths = { ... };

    //HANDLE JQUERY IF LOADED ALREADY TO AVOID OVERWRITING EXISTING JQUERY PROPERTIES AND PLUGINS
    //CHECK FOR OLD VERSIONS OF JQUERY
    var oldjQuery = !!(window.jQuery && !!window.jQuery.fn.jquery.match(/^1\.[0-4]/));

    //LOAD JQUERY IF NOT AVAILABLE OR BELOW MIN
    if (!window.jQuery || oldjQuery) {
        paths.jquery = [
            '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
            //If the CDN location fails, load from this location
            'libs/jquery/jquery.min'
        ];
    } else {
        //REGISTER THE CURRENT JQUERY
        define('jquery', [], function () { return window.jQuery; });
    }

    //CONFIGURE REQUIRE JS
    require.config({
        ...
        paths: paths,
        ...
    });

    //START REQUIRE JS
    require([
        'jquery',
        'app'
    ], function ($, App) {
        //HANDLE MULTIPLE JQUERY VERSIONS IF NECESSARY
        if (oldjQuery) $.noConflict(true);

        //INITIALIZE APP
        App.init();
    });
})();

Answer 3

我遇到的问题是由于jQuery将自己注册为AMD模块，这将使主机站点混乱（如果它使用像RequireJs这样的AMD加载器）。因此，我不希望jQuery在我的小部件加载器脚本中执行此操作。

我的解决方案如下：

// Set define.amd to false while loading jQuery, so that it won't register itself as an AMD module.
var tempDefineAmd = false;
if (typeof define === "function") {
    tempDefineAmd = define.amd;
    define.amd = false;
}

// Load minified version of jQuery
(function(e,t){var n,r,i ......;

// Done loading jQuery. Restore the value of define.amd for targets sites using an AMD loader
if (typeof define === "function" && tempDefineAmd !== false) {
    define.amd = tempDefineAmd;
}

如果页面上的widget已经加载了JQuery，则RequireJS不会加载JQuery

3 个答案: