0

requirejs を使用して JavaScript をバンドルし、その上にビルドしようとしています。UI 操作とライブラリの使用のために開発された既存の js ファイルがいくつかあります。

これらの js ファイルは、jquery インクルードの直後にインクルードする必要があり、サイト内のソーシャル メディア ウィジェットに対しても処理を行います。以下のコードを書いて、サイトがロードされたときに実行されるようにバンドルしようとしましたが、何らかの理由で、firebug ネットワークにロードされているのを見ることができます。しかし、複数回実行されているため、コード内のコードは失敗しています..

以下は私の構成とrequireステートメントです。誰でもこの動作が起こっている理由についてアドバイスできますか?

'use strict';

require.config({
    paths: {
        jquery: '../vendors/jquery/jquery-1.10.2.min',
        underscore: '../vendors/underscore/underscore-min-1.5.1',
        backbone_query: '../vendors/backbone-query-parameters/backbone.queryparams',
        backbone: '../vendors/backbone/backbone-min-1.0.0',
        theme: '../vendors/theme/v1.9/scripts/'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'theme/base': {
            deps: ['jquery']
        },
        'theme/message': {
            deps: ['jquery', 'theme/base']
        },
        'theme/input_counter': {
            deps: ['jquery', 'theme/base', 'theme/message']
        },
        'theme/placeholder': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter']
        },
        'theme/scrollbar': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder']
        },
        'theme/fields': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder', 'theme/scrollbar']
        },
        'theme/validate': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder', 'theme/scrollbar', 'theme/fields']
        },
        'theme/main': {
            deps: ['jquery', 'theme/base', 'theme/message', 'theme/input_counter', 'theme/placeholder', 'theme/scrollbar', 'theme/fields', 'theme/validate']
        }
    }
});


require(['jquery', 'theme/base', 'theme/message', 'theme/input_counter',
    'theme/placeholder', 'theme/scrollbar', 'theme/fields', 'theme/validate', 'theme/main']);
4

1 に答える 1

1

ここで気になったのは次の2点です。

  1. あなたの require() 関数は空です。require() コールバック関数は Backbone View のようなものを初期化する必要があります。
  2. シムでは、すべての依存関係を管理しようとしており、バックボーンと _ のみの依存関係を宣言しています。

メイン バックボーン ビューを初期化する js ファイルとして main.js を考慮すると、requirejs ブートストラップ ファイル (構成ファイル) は次のようになります。

requirejs.config({
    paths: {
        jquery: '../vendors/jquery/jquery-1.10.2.min',
        underscore: '../vendors/underscore/underscore-min-1.5.1',
        backbone_query: '../vendors/backbone-query-parameters/backbone.queryparams',
        backbone: '../vendors/backbone/backbone-min-1.0.0'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            deps: ['jquery'],
            exports: '_'
        }
    }
});

require(['theme/main']
function(main){
  main.initalize();
});

そして、define() 関数内のそれぞれの js ファイルで、それに応じて他のファイルをロードするように requirejs に指示します。

于 2013-07-29T18:32:24.883 に答える