backbone.jsでのグローバル変数の使用。ベストプラクティス

Question

多分、ばかげた質問です。
すべての例で私はビューモデルを見ており、コレクションはグローバル変数です。
ここに例があります。 introduction-to-backbone。
グローバル変数や名前空間を使用せずにモデルビューとコレクションを定義することは可能でしょうか？
どうすればアクセスできますか？

Answer 1

モデルとコレクション（およびそれぞれのインスタンス）は、必要な場所で定義できます。私はモデルなどのためのグローバルな名前空間のコンベンションを、再利用のためだけに推奨します。これを行うための簡単な方法は、次のようになります。

window.ProjectModels = window.ProjectModels || {}; //use existing namespace or create a new one. 
ProjectModels.SomeModel = Backbone.Model.extend({ ...}); 
ProjectModels.SomeOtherModel = Backbone.Model.extend({ ...}); 
ProjectModels.SomeRelatedModel = ProjectModels.SomeModel.extend({ ...}); 
... 
window.ProjectViews = window.ProjectViews || {}; //use existing namespace or create a new one. 
ProjectViews.SomeModelView = Backbone.View.extend({ ...}); 
ProjectViews.SomeOtherModelView = Backbone.View.extend({ ...}); 
ProjectViews.SomeRelatedModelView = ProjectViews.SomeModel.extend({ ...}); 

私は自分の名前空間にコレクションを入れていない理由を不思議に思うかもしれません。私が独自のネームスペースにコレクションを入れていない唯一の理由は、Backbone.Modelをいくつかの階層コレクション/事物のために拡張する場合があることがわかります。私はコレクションコレクションの名前を指定するというコンベンションを持っているので、コレクションとは別にモデルを伝えることができます。つまり、私は正当な理由がなく、私は自分の好みにします。

Answer 2

Well @JayCは実際にはグローバル名前空間について正しく、名前空間の規則がありますが、実際にはすべてのBackbone Classに対して個別のモジュールを使用し、後で1つを使用してロードしたいと思いますあなたは何をしているのか知っている）名前空間。 CommonJSを使用してグローバル変数アプリケーションを配置しない例を示しましょう（実際には、RequireJSでそれを作る方法はかなり良いリソースがあります）。

あなたが必要とするライブラリは非常に簡単で、このように見えますgist。基本的にはCommonJS仕様を提供しています。これは個別のファイルや小型化されたファイル（script.jsファイルなど）に使用できます。

<script src='jquery-underscore-backbone.js'></script> 
<script src='commonjs.js'></script> <!-- this is the library from the gist --> 
<script src='model.js'></script> 
<script src='collection.js'></script> 
<script src='view.js'></script> 
<script src='app.js'></script> 

：htmlファイルでスクリプトタグは次のようになります

// model.js 
this.require.define({'model.js': function(exports, require, module) {(function() { 
    var MyModel = Backbone.Model.extend({ 
     ... 
    }); 

    module.exports = MyModel; 
}).call(this)}}); 

// collection.js 
this.require.define({'collection.js': function(exports, require, module) {(function() { 
    var MyCollection = Backbone.Collection.extend({ 
     model : require('model.js'); 
    }); 

    module.exports = MyCollection; 
}).call(this)}}); 

// view.js 
this.require.define({'view.js': function(exports, require, module) {(function() { 
    var MyView = Backbone.View.extend({ 
     initialize: function() { 
      var Collection = require('collection.js'); 
      this.collection = new Collection(); 
     } 
    }); 

    module.exports = MyView; 
}).call(this)}}); 

// app.js 
this.require.define({'app.js': function(exports, require, module) {(function() { 
    var View = require('view.js'); 

    $(function() { 
     new View(); 
    }); 
}).call(this)}});  

：model.js、collection.js、view.js、app.js、彼らは次のようになります。

ですから、4つのという名前のファイルを、持っている想像

すべてのファイルを縮小し、すべてのファイルの縮小された内容で1つだけ（たとえばscript.jsなど）読み込みすることもできます。

これを行うと、グローバル名前空間の人口はなく、App.Class、App.Collectionなどはありません。あなたが何をしているのか確信が持てば、window.appという変数を持つ必要はありません。

ラッパーのために醜いように見えますが、これを自動的にラップするフレームワークがあります。また、AJAXモジュールのロード（requireJS）を使用すると、このラッピング関数を使用する必要はありません。この

良い例（Node.jsのは）次のとおりです。Stich