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 ));

！ポイント

引数に JSON,DOM,callback などを渡す。
モジュール本体をreturn。もしくは処理をする。
単純なHTMLと組み合わせると移植しやすい。

活用例

SPA Sample

モジュールごとに機能、ページなどを紐付ける。ajaxを使ったSPAなど。

Drow Dots

任意の場所をクリックすることでアクションを決める。座標、時間でアクションを切り分けることができる。

Navigator Bar

ナビゲーションバーアクション。単純な入れ子を引数に渡せばできちゃうよ。

Sticky

メモアプリ。左上の角でドラッグできる。内容は全てHTML５のlocalStorage。socketIoでも良いかもね。

Canvas

canvas Apiを活用。mousedown,mousemove,mouseupの各モジュールで座標取得。描画モジュール、消しゴムモジュールに渡すだけ。やはりcreateJSとか偉大。 createJS gihyo.jp

Reserve system

枠を自動生成します。引数にスタッフ数、営業時間を渡す。localStorageに保存するが。socketio + mongooseも可。枠の上をなぞると予約確認ウィンドウが立ち上がる。予約枠をなぞると削除できる。しかし、失敗。新しいelementを予約枠の上にフロートさせればstickyのように移動自由だった。

3D touch

グレーのボタンを長押しするとメニューがフェードインする。そのままスライドでメニューにを選択できる。

Base

イベント制御の基本パターン。