[JSを書くなら]複雑になりがちなBackboneJSのモジュールをrequireJSで管理する入門

  • 49
    Like
  • 0
    Comment
More than 1 year has passed since last update.

require.jsとかbackbone.jsとか連携させようと思うと
応用系の記事ばっかり見つかるので、自分で纏めました。

今回は、node.jsで作成した為、以下の構成になっています。

|-- app.js
|-- index.html
|-- requires
|   `-- test.js
`-- views
    |-- test1.js
    `-- test2.js

http://localhost/index.html でアクセス出来る環境
各ファイルの内容に関しては、後半説明します。

RequireJSって何?

JSの非同期ローディングとモジュール化を行うライブラリ
詳しくは公式サイト(英語)みてね
http://requirejs.org/

ではでは、能書きはええから先に進みます。

index.htmlの中身は?

index.html
  1 <!DOCTYPE html>                                                       
  2 <html lang="ja">                                                      
  3 <head>                                                                
  4 <meta charset="utf-8">                                                
  5 <title>hello connect</title>                                          
  6                                                                       
  7 <script src="//code.jquery.com/jquery-1.10.2.js"></script>            
  8 <script src="//underscorejs.org/underscore-min.js"></script>          
  9 <script src="//backbonejs.org/backbone-min.js"></script>              
 10 <script src="//requirejs.org/docs/release/2.1.8/minified/require.js"></script>
 11 
 12 </head>                                                               
 13 <body id="body">                                                      
 14 hello RequireJS World!!!                                              
 15 
 16 <div id='view'>                                                       
 17 index.htmlで最初から表示<br/>
 18 </div>
 19 
 20 <!-- #1 注目 -->
 21 <script src="requires/test.js"></script>
 22 </body>                                                               
 23 </html>

headで必要なlibraryを書いてます。
jquery, undersocreJS, backboneJS
それに、requireJS、まぁ普通ですよね。

今までと変化があるとしたら、それは
21行目です。