2-1. app

appとは...

• 唯一のグローバル変数

• アプリケーションの実装を格納するコンテナ

  var app = ns.app = {};
  

入れるもの

One Page ApplicationではJsで表現する内容が非常に多い...

• 定数
• 設定 (PC/SmartPhoneで値を変えて使用する等)
• 環境変数的なデータ (lang ...etc)
• 状態的なデータ (online, signed ...etc)
• APIから引いてきたり、ユーザが操作して作ったデータ
• メソッド
  • DOMを操作する (国際化...)
  • DOMにイベントを割り当てる (プルダウンメニュー化...)
  • APIにリクエストを送る
  • ...etc

課題

• やってる事が多すぎて整理できない
• 「あの処理書いているのはどこだっけ...」と本人でも忘れる始末
• この処理どこに書こうかなと途方に暮れる
• 忙しいので適当に書いて惨状が広がる

整理して見ました

• app.XXXXX ... 定数
• app.setting.* ... 設定
• app.env.* ... langやtoken等一度決定したら変化しないデータ
• app.state.* ... 状態を表すデータ
• app.data.* ... Ajax等から取得したデータ
• app.date.* ... Dateを操作するユーティリティメソッド
• app.dom.* ... DOM要素を動作するユーティリティメソッド
• app.util.* ... ユーティリティメソッド
• app.api.* ... Ajaxを伴うメソッド
• app.setup.* ... 要素の初期化を行うメソッド
• app.click.* ... クリックイベントを捌くメソッド
• app.submit.* ... サブミットイベントを捌くメソッド

どんな風に実装するのか

日頃使用する app-core.js にアプリ固有の実装を app.js で付け足すイメージ。

wget http://.../app-core.js
touch app.js
vim app.js

例: https://github.com/s-aska/7kai-Tasks

ファイル分割

app を app-core.js では空のオブジェクトとして生成、app.js では ns.app から取得している。

app-core.js

(function(ns, w, d, $) {

var app = ns.app = {};

app.run = function(){};

})(this, this, document, jQuery);

app.js

(function(ns, w, d, $) {

var app = ns.app;

app.signin = function(){};

})(this, this, document, jQuery);

ファイル構成(例)

• app-core.js ... 自分/自社用テンプレート
• app.js ... そのアプリ特有のコード
• app-mobile.js ... スマホ特有のコード
• app-pc.js ... PC特有のコード