0

シナリオ: 使用されるフレームワークはバックボーンと要求です。私は、ユーティリティ、モデル、およびビュー js にいくつかの依存関係を持つ main.js を持っています。これらは相互に依存しています。循環依存もあります。この main.js は、requirejs オプティマイザーを使用して 1 つのファイルにコンパイルされています。

問題: 実行時に特定のビューとモデルをオーバーライドする方法は? (私はメインの単一のコンパイル済みバージョンを持っているので、コンパイル時にモデルまたはビューの js を除外することについて話しているわけではありません)。

コンパイル時に、モデル/ビューがオーバーライドされるかどうかはわかりません。したがって、オプティマイザーを実行すると、すべてのモデルとビューを含む単一の js ファイルが作成されます。そのファイルを変更しないように、その単一の js ファイル内の特定のクラス定義をオーバーライドする必要があります。

その単一のコンパイルされたjsファイルではなく、別のファイルからモデル/ビューをロードするように「要求」するように指示する構成はありますか?

または、最小限の変更でこれを達成できる方法はありますか?

    //models/ - folder

//mymodel.js - filename
define([
    'jquery',
    'underscore',
    'backbone'
], function($, _, Backbone) {
    var mymodel2 = Backbone.Collection.extend({
       //some code
    });
    return mymodel2;
});

//mymodel2.js - filename
define([
    'jquery',
    'underscore',
    'backbone',
    'mymodel'
], function($, _, Backbone, mymodel) {
    var mymodel2 = Backbone.Collection.extend({
       //some code
    });
    return mymodel2;
});

//views/ - folder


//view1.js - filename
define([
    'jquery',
    'underscore',
    'backbone',
    'runtime/util/logmanager',
    'runtime/util/logger'
], function($, _, Backbone, LogManager, Logger) {
    var view1 = Backbone.View.extend({

        _configure: function(options) {
            //some code
        },

        initialize: function() {
            //some code
        },

        endsWith: function(str, suffix) {
            //some code
        }

    });
    return view1;
});

//like this i have view2.js, view3.js... etc

//Similarly i have util folder with util1.js, util2.js... etc

//main.js
;(function(){

    if (!window.console) window.console = {};
    if (!window.console.log) window.console.log = function () { };
    var paths = {
        jquery: 'libs/jquery/jquery',
        underscore: 'libs/underscore/underscore',
        initializer: 'runtime/initializer/initializer',
        backbone: 'libs/backbone/backbone',
        json2: 'libs/json/json2',
        text: 'libs/require/text',
        jqueryform: 'libs/jqueryform/jqueryform',
        jqueryui: 'libs/jqueryui/jquery-ui',
        slimscroll: 'libs/slimscroll/slimScroll',
        i18next: 'libs/i18next/i18next',
    common: 'libs/commons/common',

    utility1 : 'util/util1',
    utility2 : 'util/util2',
    .
    .
    model2 : 'model/mymodel2',
    .
    .
    .
    view2 : 'view/view1'
};

window.configData = window.configData || {};
window.configData.serverPath = location.protocol + "//" + window.location.host;

require.config({
    paths: paths,
    shim: {
            'underscore': {
                exports: '_'
            },
            'backbone': {
                deps: ['underscore', 'jquery'],
                exports: 'Backbone'
            },
            'i18next': {
                deps: ['jquery', 'json2'],
                exports: 'i18n'
            }
        }
});

require(['router'],
    function(Router) {
        Router.initialize();
    });
})();

コンパイル/結合されたファイルは次のようになります。

    *! jQuery v1.7.1 jquery.com | jquery.org/license */
(//jquery-def file code)(window);

//     Underscore.js 1.3.3
//     (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc.
//     Underscore is freely distributable under the MIT license.
//     Portions of Underscore are inspired or borrowed from Prototype,
//     Oliver Steele's Functional, and John Resig's Micro-Templating.
//     For all details and documentation:
//     http://documentcloud.github.com/underscore

(function() {

    //uderscore code
}).call(this);

define("underscore", (function (global) {
    return function () {
        var ret, fn;
        return ret || global._;
    };
}(this)));
.
.
.
all lib definition 
.
.
then depending on the dependencies models, views, utils, routers, definition
.
.
and finally main
;(function(){

    if (!window.console) window.console = {};
    if (!window.console.log) window.console.log = function () { };
    var paths = {
        jquery: 'libs/jquery/jquery-min',
        underscore: 'libs/underscore/underscore',
        initializer: 'runtime/initializer/initializer',
        backbone: 'libs/backbone/backbone',
        json2: 'libs/json/json2',
        text: 'libs/require/text',
        bootstrap: 'libs/bootstrap/bootstrap',
        jqueryform: 'libs/jqueryform/jqueryform',
        jqueryui: 'libs/jqueryui/jquery-ui',
        slimscroll: 'libs/slimscroll/slimScroll',
        i18next: 'libs/i18next/i18next',
        common: 'libs/commons/common',

        utility1 : 'util/util1',
        utility2 : 'util/util2',
        .
        .
        model2 : 'model/mymodel2',
        .
        .
        .
        view2 : 'view/view1'
    };

    window.configData = window.configData || {};
    window.configData.serverPath = location.protocol + "//" + window.location.host;

    require.config({
        paths: paths,
        shim: {
                'underscore': {
                    exports: '_'
                },
                'backbone': {
                    deps: ['underscore', 'jquery'],
                    exports: 'Backbone'
                },
                'i18next': {
                    deps: ['jquery', 'json2'],
                    exports: 'i18n'
                }
            }
    });

    require(['router'],
        function(Router) {
            Router.initialize();
        });
})();


define("main", function(){});
4

3 に答える 3

1

その単一のコンパイルされたjsファイルではなく、別のファイルからモデル/ビューをロードするように「要求」するように指示する構成はありますか?

次のように、require を使用して Javascript ファイルをロードするには、いつでも (オプティマイザーが実行された後でも) 呼び出すことができます。

myModule = require('myJavascriptFile');

最適化されたファイルは、操作するようには設計されていません。ソースを変更してから、再度最適化してください。

また、注意: Require は Javascript をコンパイルしません。

于 2012-12-05T06:36:13.953 に答える
0

実行時に特定のビューとモデルをオーバーライドする方法は?

Javascript では、いつでも変数を再割り当てできます。例：

var x = 1; // the value of x is 1
x = 2; // the value of x is now 2

同様に、実行時にバックボーン モデルとビューを次のようにオーバーライドできます。

var myModel = new Backbone.Model({x: 1});// create myModel
myModel = new Backbone.Model({x: 2});// now, myModel is a different model
myModel = "something else entirely";// now, myModel is a string
于 2012-12-05T05:32:49.140 に答える
0

それ自体をオーバーライドrequire()して、通常の方法でモジュールをロードする前に、最初にディレクトリ内のモジュールを検索するようにすることができます。

これはおそらく簡単なことではありません。

于 2012-12-05T07:24:26.887 に答える