3

我有一种情况,我必须在同一页面上运行两个版本的 jQuery(基本上,有一个运行 1.4.2 的网站,我有一个运行需要 1.8.2 的脚本的书签,我知道这不是一个好主意但我现在坚持下去)。

现有版本是 1.4.2 合一,需要的较新版本是 1.8.2。

我正在使用 require.js 并在这里看到了这个问题的帖子,但不太明白最好的方法是什么:

就我而言,我有一个模块 main.js:

(function () {
var root = this;

require.config({
    baseUrl: "http://localhost:9185/scripts/app/"      
});

define3rdPartyModules();
loadPluginsAndBoot();

function define3rdPartyModules() {
    define('jquery', [], function () { return root.jQuery.noConflict(true); });              
    define('ko', [], function () { return root.ko; });       
}

function loadPluginsAndBoot() {      
    requirejs([], boot);
}

function boot() {        
    require(['bootStrapper'], function (bs) { bs.run(); });
}
})();

然后是一些与此类似的其他模块:

define('bootStrapper', ['jquery', 'presenter', 'repository', 'dataPrimer'],
function ($, presenter, repository, dataPrimer) {
    //some stuff here

我是 requirejs 的新手,并且在使用 1.4.2 版本加载 main.js 之前加载它,如下所示:

 $.getScript("http://localhost:9185/bundles/jsextlibs?v=GOyDBs-sBDxGR5AV4_K-m-   OK9DoE0LGrun5FMPyCO9M1", function () {     
    $.getScript("http://localhost:9185/Scripts/lib/require.js", function () {        
        $.getScript("http://localhost:9185/bundles/jsapplibs?v=9TJUN0_624zWYZKwRjap4691P170My5FUUmi8_fzagM1");
        $.getScript("http://localhost:9185/Scripts/main.js");
    });
});

有人可以告诉我如何修改我的代码,以便我的所有模块都能够使用 1.8.2 版本,而不会干扰已经在 1.4.2 上运行的代码。

谢谢

戴维

4

2 回答 2

4
var reqOne = require.config({
context: "version1",
baseUrl: 'scripts/',
paths: {
    jquery: 'lib/jquery.min',
}
});

var reqTwo = require.config({
    context: "version2",
    baseUrl: 'scripts/',
    paths: {
        jquery: 'lib/jquery.modern',
    }
});

reqOne(["helper/util"], function(require,util) {
        //This function is called when scripts/helper/util.js is loaded.
            //If util.js calls define(), then this function is not fired until
                //util's dependencies have loaded, and the util argument will hold
                    //the module value for "helper/util".
//                    intheutil(); //This was done
                    console.log('util loaded');
});


reqOne(['require','jquery'],function(require,$){
    console.log( $().jquery );
});

reqOne(['require','jquery'],function(require,jq){
    console.log( jq().jquery );
});


reqOne(['require','jquery'],function(require,$){
    console.log( $().jquery);
});

reqTwo(['require','jquery'],function(require,$){
    console.log( $().jquery );
});

console.log('If no errors mean success!');

以上是我在 main.js 中使用的。有关完整的实现细节,请参阅我在 github 中的实现。github.com

这里 jquery.min 是 jquery 版本 1.x 和 jquery.modern 是 jquery 版本 2.x

我用过console.log。因此,请检查启用浏览器控制台的示例。以上答案基于 Require.js 的文档。所以我认为这一定是你的情况的解决方案。

这是我的参考。 需要.js

于 2015-01-28T13:05:42.023 回答
1

我有一个几乎相同的问题,我设法使用与 Ajeeb KP 类似的方法解决了该问题,但有一些关键区别。(Ajeeb 的过程实际上对我不起作用,并且在使用 jQuery CDN 时始终失败)。

本质上,我创建了 2 个 require.config 实例,每个实例在属性中定义了不同版本的 jQuery(使用我将每个特定实例合并到的公共 require.config 对象保持 DRY)。当调用任一 require.config 实例时(即 RequireJS API 所说的“传递给 require”),回调函数中的代码运行一个接收 jQuery.noConflict(true) 作为 $ 参数的 IIFE。任何在 IIFE 中运行的代码——包括需要的模块——运行最初传递给 require 的 require.config 实例中定义的 jQuery 版本。

这是代码:

/*
 * For merging each separate require.config object with a "common RequireJS config
 * properties" object. Meant to avoid e.g. baseUrl, common libs etc. between the 2 
 * (lodash cannot be used for this, as it's not yet loaded until all this completes)
 */ 
var mergeObjs = function mergeObjs(objIn1, objIn2) {
    var conglomerateObj = {};
    Object.keys(objIn1).forEach(function(item) {
        conglomerateObj[item] = objIn1[item];
    });

    return (function mergeIn(o1, o2) {
        Object.keys(o2).forEach(function(key) {
            if (typeof o1[key] === 'undefined') {
                o1[key] = o2[key];
            } else if (typeof o1[key] === 'object' && typeof o2[key] === 'object') {
                o1[key] = mergeIn(o1[key], o2[key]);
            }
        });
        return o1;
    }(conglomerateObj, objIn2));
};


// 'Common' RequireJS config properties object. Both config objects use these values.
var reqCommon = {
    baseUrl: '../scripts',
    paths: {
        lodash: '../public/lodash/lodash',
        bootstrap: '../public/bootstrap/js/bootstrap.min'
    }
};

// RequireJS config properties object 1. Configures section run with it to use an
// older version of jQuery (1.11.3) loaded using a CDN, for use with Bootstrap.
var req1 = require.config(mergeObjs({
    context: 'version1',
    paths: { jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min' }
}, reqCommon));

// RequireJS config properties object 2. Configures section run with it to use a 
// newer version of jQuery. Used for almost everything except Bootstrap.
var req2 = require.config(mergeObjs({
    context: 'version2',
    paths: { jquery: '../public/jquery' } //new, local version of jQuery
}, reqCommon));


//
// 1st require'd block; runs with req1 RequireJS properties object used & thus 
// jQuery 1.11.3. Mainly for running Bootstrap.
//
req1(['lodash', 'jquery'], function(main, ta, _) {

    // This IIFE is intended to load the older jQuery version in regardless of the presence of jQuery v2.1.4
    (function($) {
        console.log('1st block 1st section jQuery version: ' + $.fn.jquery); 
          //--> shows 1.11.3 as version
        window.jQuery = this.jQuery = $; // needed - Bootstrap uses jQuery on the window object.

        //Load Bootstrap after jQuery 1.11.3 confirmed loaded
        req1(['bootstrap'], function(bootstrap) {
            console.log("1st block 2nd section: bootstrap loaded!");
            console.log("1st block 2nd section: jQuery version: " + $.fn.jquery); 
          //--> still shows 1.11.3, even though block 2 has usually run by now
        });

    }(jQuery.noConflict(true)));
});


//
// 2nd require'd block; runs with req2 RequireJS properties object used & thus 
// jQuery 2.1.4. For almost everything except Bootstrap.
//
req2(['main', 'testaddedjsfile', 'lodash', 'jquery'], function(main, ta, _) {
    //this IIFE keeps the newer jQuery version separated from the old version.
    (function($) {
        console.log('2nd block jQuery version: ' + $.fn.jquery);
          //--> shows 2.1.4 as version
    }(jQuery.noConflict(true)));
    // the bind helps ensure calls to $ don't inadvertently call window.$. which will be occupy.
});

底部第 1 和第 2 个必需块中的 IIFE 对完成这项工作至关重要。

在添加合并对象(函数mergeObjs)和我自己文件中的默认对象的功能之前,我的需求配置对象(req1 和req2)变得重复且混乱。

下面包含 Bootstrap 来证明这个概念:我使用的特定 Bootstrap 模板需要 jQuery 的旧版本才能出现在窗口对象上......而我在应用程序中的其余代码使用 2.1.4。

上述设置允许 Bootstrap 和我自己的代码毫无问题地运行,每个块始终使用适当版本的 jQuery,但有一个警告:第二个块无法显式调用 window.$(无论如何都是个坏主意)。

我为篇幅道歉 - 这是一个令人惊讶的棘手问题。

于 2015-08-26T09:24:33.950 回答