Moduleの基礎

名前空間でコードのカプセル化をする方法

活用シーン

規模が大きくなるとコンフリクションが起こりやすくなる。変数名、関数名が増えてくると重複ミスを起こしがち。
関係性の高い機能は一つの名前空間に閉じ込めてしまうと扱いやすくなる。APIもこの仕組みの延長なのだろうか?
名前空間
          
            var ns = ( function( inports ){
              var module = {};

              module.prop = 'にゃ~';
              module.view = function() {
                module.event.click();
              };

              module.event = {};

              module.event.click = function() {
                inports.addEventListener('click', function() { console.log(module.prop); }, false);
              };

              return module.view();
            }( inports ));
          
        
!ポイント

活用例

SPA Sampleメモ
モジュールごとに機能、ページなどを紐付ける。ajaxを使ったSPAなど。
Drow Dotsメモ
任意の場所をクリックすることでアクションを決める。座標、時間でアクションを切り分けることができる。
Navigator Barメモ
ナビゲーションバーアクション。単純な入れ子を引数に渡せばできちゃうよ。
Stickyメモ
メモアプリ。左上の角でドラッグできる。内容は全てHTML5のlocalStorage。socketIoでも良いかもね。
Canvasメモ
canvas Apiを活用。mousedown,mousemove,mouseupの各モジュールで座標取得。描画モジュール、消しゴムモジュールに渡すだけ。やはりcreateJSとか偉大。 createJS gihyo.jp
Reserve systemメモ
枠を自動生成します。引数にスタッフ数、営業時間を渡す。localStorageに保存するが。socketio + mongooseも可。 枠の上をなぞると予約確認ウィンドウが立ち上がる。予約枠をなぞると削除できる。しかし、失敗。新しいelementを予約枠の上にフロートさせればstickyのように移動自由だった。
3D touchメモ
グレーのボタンを長押しするとメニューがフェードインする。そのままスライドでメニューにを選択できる。
Baseメモ
イベント制御の基本パターン。