[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

App.js

Jump to bottom
uupaa edited this page Jun 9, 2017 · 10 revisions

App.js は WebApp 全体で利用する変数や設定を管理するモジュールです。

app を export します。

// --- technical terms / data structures -------------------
// App.js             - https://github.com/uupaa/WebApp2/wiki/App.js
// GlobalObject Idiom - https://github.com/uupaa/WebApp2/wiki/GlobalObject-Idiom

// --- dependency modules ----------------------------------
import { UserAgent } from "../assets/modules/UserAgent.js";

// --- define / local variables ----------------------------
const GlobalObject = (typeof self !== "undefined") ? self : global;

// --- class / interfaces ----------------------------------
class App {
  constructor() {
    GlobalObject.WebApp2 = { app: null };
    this.module = new Map();                // app.module:Map
    this.global = { object: GlobalObject }; // app.global:Map
    this.debug  = 0;                        // app.debug:Uint8 - debug mode (0: no debug, 1: publish app, 2: type assert)
    this.verbose = 0;                       // app.verbose:Uint8 - verbose mode (0: no verbose, 1: verbose, 2: verbose verbose)
    this.userAgent = UserAgent.detect();    // app.userAgent:Object
  }
  init(fn) {
    if (this.debug) {
      GlobalObject.WebApp2.app = this;      // publish app namespace to window.WebApp2.app
    }
    if (this.userAgent.browser) {
      document.onreadystatechange = () => {
        if (/interactive|complete/.test(document.readyState)) { // DOMContentLoaded or window.onload timming
          document.onreadystatechange = null;
          fn();
        }
      };
    } else {
      fn();
    }
  }
}

export let app = new App();

app.module

app.module はアプリ内から参照するclassやfunctionを格納するための Map オブジェクトです。 WebApp/2 における namespace の役割を持ちます。

  • app.module.set("name", class) で app.module に class や function を登録します
  • app.module.get("name") 登録した class や function の参照を取り出します
  • has(), delete(), keys() といった Map のメソッドも利用できます
  • 循環参照の解決ができます
  • ESModules の import ... from "./path" 構文の弱点を app.module でカバーすることができます
    • 弱点: import 文は if 文の中に設置することができません
    • 弱点: import 文は 実際のファイルの設置場所(path)を意識せずモジュールを使用することができません

以下のようにすることと、 FooBar.js の実際のファィルパスを気にせず(import 構文を使わずに)モジュールを利用することができます。

// FooBar.js
import { app } from "./App.js";

export class FooBar {}
export function FooBar2000() {}

app.module.set("FooBar", FooBar); // FooBar を登録
app.module.set("FooBar2000", FooBar2000); // FooBar2000 を登録
// Buzz.js
import { app } from "./App.js";

if ( app.module.has("FooBar") ) {
  let FooBar = app.module.get("FooBar"); // FooBar の参照を取得
  let fooBar = new FooBar();
}

if ( app.module.has("FooBar2000") ) {
  let FooBar200 = app.module.get("FooBar2000"); // FooBar2000 の参照を取得
  let fooBar200 = new FooBar200();
}

console.log( [... app.module.keys()] ); // -> ["FooBar", "FooBar2000"] // key を列挙

app.module.delete("FooBar");     // FooBar を削除
app.module.delete("FooBar2000"); // FooBar2000 を削除

app.global

app.global はアプリ内から相互に参照する変数の格納や、トップレベルAPIの呼び出しに使用するオブジェクトです。

app.global はいわゆるグローバル変数置き場として利用できます(乱用は厳禁です)。

import { app } from "./App.js";

app.global.MyGlobalVars = { a: 1, b: 2 };

app.global.MyGlobalVars // -> { a: 1 , b: 2 }

app.global.object

app.global.object は WebApp/2 GlobalObject Idiom で得られる Global Object です。ブラウザではこの値は window になります。

import { app } from "./App.js";

if ("alert" in app.global.object) { // window.alert が存在するか?
  alert("HELLO WORLD");
}

app.userAgent

app.userAgent は OS, Browser, Runtime, Device, WebView, WebGL に関する情報を保持しているオブジェクトです。 app.userAgent を参照してください。

app.debug

app.debug = level で DebugMode のレベルを指定します。level は 0, 1, 2 の値を指定できます。初期値は 0 です。

level
0 デバッグモードをOFFにします
1 app.init() 実行時に app を window.WebApp2.app として公開します
2 上記に加え、型と値のチェックを行います 
import { app } from "./App.js";

app.debug = 2;
app.verbose = 2;
app.init(() => {
  console.log( window.app ) // -> app.debug = 2 なので、app が window.app として公開されます
});

app.verbose

app.verbose = level で VerboseMode のレベルを指定します。level は 0, 1, 2 の値を指定できます。初期値は 0 です。

level
0 デバッグ用の情報を出力しません
1 デバッグ用の情報を出力します
2 デバッグ用の情報を過剰に出力します

app.init

app.init(fn:Function):void は、WebApp の初期化コードを記述するための場所です。

DOMContentLoaded または window.onload のタイミングで fn をコールバックします。

app.userAgent.browser = true の環境(ブラウザ)では DOMContentLoaded または window.onload を待ちます。 ブラウザ以外の環境ではすぐにコールバックします。

import { app } from "./App.js";

app.debug = 2;
app.verbose = 2;
app.init(() => {
  console.log("HELLO WebApp/2");
});

Overview

Clone this wiki locally