0

私たちのプロジェクトは、RequireJS と Backbone.js に基づく非常に巨大な単一ページのエンタープライズ アプリであり、一部の複雑な UI にはjqWidgetsを使用します。

特に、これらの jqWidgets が問題を引き起こしています。古い jqWidgets 3.3 を使用して実装された多くのアプリ機能があり、すべての新しい機能については 3.6 を使用したいと考えていますが、古い機能を 3.6 に移植するのは非常に難しく、現時点では時間がかかります。

この時間を節約するために私たちがやりたいことは、3.3 と 3.6 の両方を問題なく一緒に動作させ、後で可能であれば移植部分を行うことです。

私がこれまでに試したこと：

requirejs.config({
    paths: {
        "jquery": "vendor/jquery",
        "jqx": "vendor/jqwidgets/3.3",
        "jqx3.6": "vendor/jqwidgets/3.6",
        ... other libs...
    },
    shim: {
        ... other shims ...
        // jqWidgets3.3
        "jqx/jqxcore": {
             deps: ["jquery"]
        },
        "jqx/<<some_plugin>>": {
             deps: ["jqx/jqxcore"],
             exports: "$.fn.<<some_plugin>>"
        },
        // jqWidgets3.6
        "jqx3.6/jqxcore": {
             deps: ["jquery"]
        },
        "jqx3.6/<<some_plugin>>": {
             deps: ["jqx3.6/jqxcore"],
             exports: "$.fn.<<some_plugin>>"
        },
    }
});

古い機能での使用法:

require(["jquery", "jqx/<<some_plugin>>"], function($) {
     $('<<some_selector>>').<<some_plugin>>(...options...);
});

新機能での使用法:

require(["jquery", "jqx3.6/<<some_plugin>>"], function($) {
     $('<<some_selector>>').<<some_plugin>>(...options...);
});

両方のプラグインが同じ jQuery オブジェクトに適用されるため、異なる名前/パスでそれらを参照すると機能しますが、多くのバグが発生します。例: アプリで最初に使用した機能が jqWidgets 3.3 を使用して読み込まれた場合、次に 3.6 を使用して使用した機能はおそらく破損し、その逆も同様です。機能を使用するたびにページを更新する場合にのみ機能します。単一ページのアプリであるため、これは無意味です。

だから私の質問は: jqWidgets 3.3 と 3.6 の両方をそれぞれ独自の jQuery オブジェクトに依存させて一緒に動作させて、この競合が起こらないようにすることは可能ですか?

// 付録 1: 可能性のある解決策は、この質問のコメントにあると思います: RequireJS - 複数の jQuery バージョンを持つ jQuery プラグイン 詳細を調べて、解決策が見つかったらここに投稿します。

4

2 に答える 2

0

jqWidgets がすぐにサポートしていない場合は、次のようにします。

  • jQuery を読み込む
  • jqxWidget 3.3 を読み込む
  • jQuery を再度読み込みますが、その noConflict モードで、$2たとえば に割り当てます (RequireJS でそれができるかどうかはわかりませんが、jQuery.js ファイルをコピーして別の名前に変更して、もう一度読み込むことができます)。
  • 最初の jQuery を $1 に設定 ( window.$1 = $)
  • 2 番目の jQuery を $( window.$ = $2)に設定します
  • jqxWidget 3.6 を読み込む

これで、各 jqxWidget に独自の個別の jQuery が必要になります。明らかに、jQuery を 2 回ロードするのは理想的ではありませんが、アプリでもう少し多くのメモリを使用することを除けば、問題にはなりません。

于 2015-02-26T22:38:10.450 に答える
0

requirejs の「マップ」機能を使用できます。Map を使用すると、依存関係を使用するモジュールに基づいて、同じ依存関係を別のファイルにマップできます。したがって、ビルドファイルを次のように構成します。

requirejs.config({
    paths: {
        "jquery": "vendor/jquery",
        "jqueryForjqx3.6": "toNoConflictJQueryModule",
        "jqx": "vendor/jqwidgets/3.3",
        "jqx3.6": "vendor/jqwidgets/3.6",
    ... other libs...
    },
    map:{
        '*':{
             .....
        },
        'jqx':{
            'jquery' : 'jquery'
        },
        'jqx3.6':{
             // map jquery to no conlict jquery
            'jquery' : 'jqueryForjqx3.6'
        },
        'jqueryForjqx3.6':{
            'jquery' : 'jquery'
        }
    },
    shim: {
        ... other shims ...
        // jqWidgets3.3
        "jqx/jqxcore": {
             deps: ["jquery"]
        },
        "jqx/<<some_plugin>>": {
             deps: ["jqx/jqxcore"],
             exports: "$.fn.<<some_plugin>>"
        },
        // jqWidgets3.6
        "jqx3.6/jqxcore": {
             deps: ["jquery"]
        },
        "jqx3.6/<<some_plugin>>": {
             deps: ["jqx3.6/jqxcore"],
             exports: "$.fn.<<some_plugin>>"
        },
    }
});

この構成は、jquery の依存関係を、それを使用するモジュールに基づいて異なるファイルにマップします。

競合しないバージョンのコンテンツは次のようになります。

define(['jquery'], function($){
    return $.noConflict();
});

jquery no-conflict と requirejs の使用方法については、 http: //requirejs.org/docs/jquery.html#noconflictmap を使用できます。

于 2015-02-27T08:43:56.043 に答える