The Document of Aska

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特有のコード