BackboneはModulesを利用してプログラムを組織します(require.js)

3415 ワード
backbone
http://backbonetutorials.com/organizing-backbone-using-modules/
残念なことにbackboneはコードをどのように組織するかを教えてくれず、多くの開発者がスクリプトをロードし、開発環境を計画する方法に迷っています.
他のMVCフレームワークのように開発理念を設定するのが好きではありません.
幸いなことに、このチュートリアルでは、より丈夫なプログラムを設計する方法を教えてくれます.
チュートリアルからbackboneとAMDを組み合わせて話します.
AMD Asynchronous Module Definitions非同期モデル定義とは
AMDは、ブラウザとサーバの間でモジュール化コードを非同期でロードする方法を定義します.実際にはコモンですjs仕様のブランチです.多くのコードローダはAMDを用いて実現されており,Javascriptモジュール化開発の特色として利用できるようである.
このチュートリアルではRequireを使用します.jsはモジュールを実現し、Backboneを組織する.js 
開発にADMを使うことを強くお勧めします.
クイック一覧
モジュール化
拡張性
コンパイル可能
市場承認
なぜRequireを使うのかjs 
なぜRequireを使うの?js
   Require.jsには強力なコミュニティがあります.著者James Burkeは、プロジェクトに責任を負い、ユーザーに返信することを喜んでいます.コードロードの専門家としてAMD仕様の貢献者でもある.
コードが最善の学習方法であることを見てみましょう.
チュートリアルの例は緩やかで、より包括的な例を見つけることができます.
使用例を実装する方法を見たい場合はgithubで問題を作成できます.
例は全面的ではありませんが、大まかな概念をあげることができます.
サンプルファイルの構造
プロジェクトのサイズに応じてプログラムのファイル構造を整理する方法がたくさんあります.次の例ではviewsとtemplateをマッピングします.
CollectionとModelsはORMのように組織されていません.
    
Backbone 利用Modules 来组织你的程序（require.js ）
Backbone 利用Modules 来组织你的程序（require.js ）
 
続けるには、説明の目標をどのように実現するかを理解する必要があります.
アプリケーションを起動
Requireを使用jsトップページで単一のエントリを定義しました.Backboneの各ビューにコンテナを設置する必要があります
注意:scriptラベルのdata-mainプロパティはjs/mainをロードするために使用されます.jsは自動的に追加されます.js拡張
<!doctype html>

<html lang="en">

<head>

	<title>Jackie Chan</title>

	<!-- Load the script "js/main.js" as our entry point -->

	<script data-main="js/main" src="js/libs/require/require.js"></script>

</head>

<body>



<div id="container">

  <div id="menu"></div>

  <div id="content"></div>

</div>



</body>

</html>

　　 
<script data-main="js/main" src="js/libs/require/require.js"></script>
           。        ， cdn  ，        。

bootstrapはどんなものですか?
我々のブートファイルはRequireの構成を担当します.js、そしてロードの最初の最も重要な依存
次の例ではrequireを構成する.jsは、共通のコード、jquery、Underscore Backboneをロードするためにショートカット別名を作成します.
これらのライブラリ自体の依存関係のため、コードを総ネーミングスペースに順番にロードする必要があります.
幸いなことに、AMD仕様では、これらのライブラリが非同期でロードされます.このように導くのは直感的ではないので、近い将来この問題を解決したいと思っています.
プログラムロジック全体を含むapp moduleも命名しました
モデルは相対パスとしてロードされます."app"  app.js  
require.config({
   paths: {
      jQuery: 'libs/jquery/jquery',
      Underscore: 'libs/underscore/underscore',
      Backbone: 'libs/backbone/backbone'
   }
});

require({
   'app',
    'order!libs/jquery/jquery-min',
  'order!libs/underscore/underscore-min',
  'order!libs/backbone/backbone-min'
},function(App) {
   App.initialize();
});
フロントエンドJSON文字列からJSONオブジェクトへ
JavaScriptでflashを生成する方法