3

requirejs と backbonejs を使用して開発しているときに、インポートされたクラスがその機能範囲にのみ適用されると考えていたため、インポート メカニズムのしくみに混乱しました。ただし、デバッグしようとすると、jquery、バックボーン、またはアンダースコアをインポートしなかったいくつかの requirejs クラスが見つかりましたが、それでも適切に機能しますが、これは作成した他のクラスには当てはまりません。

以下の例は、私が何を意味したかを示しています。

1) index.html -> 初期読み込みファイル

2) init.js -> 必要なすべてのクラスをインポートし、クラスが使用可能かどうかを出力します

3) base.js -> 基本クラス、必要なすべてのライブラリをインポート

4) shop.js -> 基本クラスから拡張し、jquery、バックボーン ファイルをインポートしませんでしたが、動作しています

index.html

<html>
<head>
    <title>Testing</title>
    <script data-main='init' src='http://requirejs.org/docs/release/2.0.4/minified/require.js'></script>
</head>
<body>
    halo world
</body>
</html>

init.js

require.config({
    paths: {
        jquery: 'http://code.jquery.com/jquery-1.7.2.min',
        underscore: 'http://underscorejs.org/underscore-min', 
        backbone: 'http://backbonejs.org/backbone-min'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },

        underscore: {
            exports: "_"
        }
    }
});

require([
    'views/shop',
],function(ShopView){   
    var shopView = new ShopView();
    shopView.render();  

    console.log('Backbone - ');
    console.log(Backbone);
    console.log('Underscore - ');
    console.log(_);
    console.log('jQuery - ');
    console.log($);
    console.log('BaseView - ');
    console.log(BaseView);
});

shop.js

define([
    'views/base'
], function(BaseView) { 
    var ShopView = BaseView.extend({
        initialize:function(){
            console.log('ShopView');        
        }
    });
    return ShopView;
});

base.js

define([
    'jquery',
    'underscore',
    'backbone'  
], function($,_,Backbone) { 
    var BaseView = Backbone.View.extend({
        initialize:function(){
            console.log('BaseView');        
        }
    });
    return BaseView;
});

init.js からの結果出力:

console.log(バックボーン); -> インポートしていなくてもバックボーン クラスを返します

console.log($); - >インポートしていなくてもjqueryクラスを返します

console.log(_); ->インポートしていなくてもアンダースコアクラスを返します

console.log(BaseView); -> カスタム クラスに対して undefined を返します

ビュー/ショップをinit.jsから削除すると。

require([

],function(){   
    console.log('Backbone - ');
    console.log(Backbone);
    console.log('Underscore - ');
    console.log(_);
    console.log('jQuery - ');
    console.log($);
    console.log('BaseView - ');
    console.log(BaseView);
});

console.log(バックボーン); ->未定義

console.log($); -> 休憩

console.log(_); -> 休憩

console.log(BaseView); -> 休憩

前のシナリオがどのように機能するかを説明できませんでした。バックボーン、jquery、アンダースコアはグローバル変数だと思いましたが、ビュークラスを削除したようで、変数は未定義になりますが、インポートされたクラスの場合は、以前にインポートしたものを前に進めることができますbase.js から将来インポートされるクラスへのクラス。混乱した場合は申し訳ありません。

誰かがrequirejsでのインポートの仕組みとインポートの範囲についていくつかの光を当てることができますか. 以前に要求したクラスを再度要求する必要がありますか?

4

1 に答える 1

0

require.config それ自体は何もインポートしていません。非 AMD ファイルのエイリアス (パス) と依存関係を宣言するために使用されます。

'define' を使用する場合、実際にはその依存関係が必要になることを考慮してください。

define ([ array of dependencies ], function)

.

init: require shop  (ok, let's bring shop here:
shop: require base  (ok, let's bring base here:
base: require    (so you need backbone, underscore and jquery.. ok,  
                  I'll bring them for you)

次に、すべての依存関係が要求されて読み込まれると、init実行が開始されます。

削除するshopと、init.js,何も必要ありません。この場合も、 require.configは何もインポートしません。

PS。これは個人的な好みですが、jquery、underscore、および backbone が必要なファイル app.js が必要です。そして、すべてのモジュールには「アプリ」が必要です。関数を追加する場合に備えて、その名前空間を共有すると便利です。( app.myFunction)

このバックボーン ポイラープレートを参照してください: https://github.com/tbranyen/backbone-boilerplate

于 2012-07-10T20:12:13.453 に答える