17

私はbackbone.jsを使用してjavascriptアプリに取り組んでいます。つまり、開発を容易にするために、ファイルをこのように構造化しています。

app
 |
 + views
 |    L movieRow.js
 |    L movieDetail.js
 |
 + models
 |    L movie.js
 |    L tvshow.js
 |
 + collections
 |    L movies.js
 |    L tvshows.js
 |
 + templates
 |    L movieList.tpl
 |    L movieDetail.tpl
 |    L applicationUI.tpl
 |
 L application.js

さて、それはユーザーにサーバーするためのたくさんのjavascriptファイルです、私はlabjsまたはrequire.jsについていくつかの話題を見て、それで試してみることにしました。しかし、すべてのバックボーンモデルまたはビューをこれらのrequire.jsモジュールに書き直す方法がわかりません。

正しい方向への助けがあればいいのですが。

4

2 に答える 2

20

requireを理解するための鍵（少なくとも私の小さな頭脳では）は、関数から返すものが、このモジュールをプルイン（またはrequire）する他のモジュールで利用できることを覚えておくことです。したがって、以下のコードでは、jqueryとバックボーンが必要です（jqueryは「require-jquery」によって処理される特殊なケースです）。これらの2つが使用可能になると、関数が呼び出され、その関数は作成したViewコンストラクターを返します。

define([    
    'jquery'
    'libraries/backbone'
], function ($) {
        var MovieRow = Backbone.View.extend({
            render: function () {

                return this;
            }
        });

        return MovieRow;
});

次に、このようなものをページに書き込むことができます。jqueryは配列の最初の必須項目であることに注意してください。これは私の関数の最初のパラメーターに対応します。ビューは2番目で、モデルは3番目です。次に、コンストラクターである上記の「define」コードからの戻り値を使用できます。

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
], 
function ($, MovieRowView, Movie) {
    var view = new MovieRowView({model : new Movie());
    $('body').append(view.render().el);        
});

これがお役に立てば幸いです...私たちはバックボーンを愛しており、必須です:)

于 2011-09-08T19:32:57.543 に答える
4

コメントのスペースが足りなくなり、コードを含めたいと思ったので、2番目の回答を作成しています。

@timDunhamが投稿したものは、ほとんどの場合かなり良いものですが、理解を深めるために誰かがチャイムを鳴らす可能性のある追加機能がいくつかあります。

コード内：

define([    
    'jquery'
    'libraries/backbone'
]

アンダースコアが欠落していると思います。まず、Backboneを動作させるにはアンダースコアが必要ですが、アンダースコアがないと壊れてしまうと思います。次に、アンダースコアとバックボーンのAMDJSフォークを使用していない限り、AMDをサポートしていません。v1.3.0で削除されたAMDサポートにアンダースコアを付けます。非AMDアンダースコアとバックボーンを使用していると仮定すると、それらはおそらくに属していないため、代わりに使用するdefine[]必要がありrequire[]ます。

したがって、AMDJSバージョンを適切に使用している場合、適切な定義は次のようになります。

define([    
    'jquery',
    'underscore',
    'Backbone'
], function($, _, Backbone) { ... });

これは、requireconfigでパスを作成したことを前提としています。

require.config({
    paths : {
        jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        underscore : '../../libs/js/underscore/underscore.min',
        Backbone : '../../libs/js/backbone/backbone',
    }
});

AMDJSバージョンを使用しない実装を見てきましたが、それらは非同期モジュールではないため、正しい順序でロードされていることを確認する必要があります。

これは、依存関係をロードする正しい順序を保証するものではないと思います。

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
],

依存関係としてリストされているものがあるため、必要なときに読み込まれるとは限りません。非同期モジュールの場合は問題ありませんが、この例では言及されていないので、AMDではないと想定します。このモジュールは、jquery、movieRow、movie、およびバックボーンに依存します。しかし、バックボーンがjqueryの前にロードしようとすると...（x_x）なぜ世界なのか？

そのため、require.jsにはorderというプラグインがあると思います。救助へ。注文あり！依存関係を設定すると、スクリプトが...まあ...順序でロードされます。このようなもの：

require({
    baseUrl: '/'
},[
    'order!jquery',
    'app/views/movieRow',
    'app/models/movie',
    'order!libraries/underscore',  // <- Don't forget me!
    'order!libraries/backbone'
]

これにより、モジュールはjqueryが最初にロードされ、次にアンダースコア、次にバックボーンがロードされることを評価および保証すると思います。この場合、誰が気にしますが、movieRowまたはmovieの保証はありません。:-)

私はプロジェクトにAMDJS-BackboneフォークとAMDJS-Underscoreフォークを使用しているので、通常はそれらをに入れて、問題define[]なく動作します。RequireJSは本当に素晴らしく、私のコードを大幅にクリーンアップしました。どこに行ってもJRBurkeは、RequireJSのライターがいたるところに現れ、require.jsに関するすべてのコメントについて、彼はいつも非常に役に立ちます。そして、私はすべてを意味します。私の理論では、彼はテレパシーでRequireに接続しており、Web上でrequirejsの新しいインスタンスが発生するたびに、その知識にすぐにアクセスできます。このスレッドの議論が続けば、彼もここに現れて挨拶するでしょう。

私の免責事項は、私もRequireに慣れていないため、誤解している可能性があるということです。しかし、私が知っていることから、これらの追加のポインターと情報は、requireを使用してより良いコードをまとめるのに役立つかもしれないと思いました。

参考資料：

于 2012-03-29T19:21:33.190 に答える