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と組み合わせると移植しやすい。
活用例
モジュールごとに機能、ページなどを紐付ける。ajaxを使ったSPAなど。
任意の場所をクリックすることでアクションを決める。座標、時間でアクションを切り分けることができる。
ナビゲーションバーアクション。単純な入れ子を引数に渡せばできちゃうよ。
メモアプリ。左上の角でドラッグできる。内容は全てHTML5のlocalStorage。socketIoでも良いかもね。
canvas Apiを活用。mousedown,mousemove,mouseupの各モジュールで座標取得。描画モジュール、消しゴムモジュールに渡すだけ。やはりcreateJSとか偉大。
createJS gihyo.jp
Reserve system


枠を自動生成します。引数にスタッフ数、営業時間を渡す。localStorageに保存するが。socketio + mongooseも可。
枠の上をなぞると予約確認ウィンドウが立ち上がる。予約枠をなぞると削除できる。しかし、失敗。新しいelementを予約枠の上にフロートさせればstickyのように移動自由だった。
グレーのボタンを長押しするとメニューがフェードインする。そのままスライドでメニューにを選択できる。
イベント制御の基本パターン。