Help us understand the problem. What is going on with this article?

簡単な状態変更処理

More than 5 years have passed since last update.

状態変更とは

GUIが絡むプログラミングでは頻繁に記述すると思いますが、最近はいろいろなライブラリ内に隠蔽されているベースな部分だと思います。基本的にはObserverパターンをしようします。

ObserverパターンはGUIプログラミンでは頻繁に使用するので初耳の方はこちらを確認してください。

状態変更でよく使うのは、A状態に変更されたら、各オブジェクトがそれぞれ処理を実行するというものです。

例:
Formの確認ボタンが押されたら"確認画面に移動"、"送信ボタンを表示する"など...

実装

Monitor.js
Monitor = function(){

};

Monitor.prototype['addListener'] = addListener;
Monitor.prototype['changeState'] = changeState
Monitor.prototype['notify']      = notify;

Monitor.listeners = {}; // リスナー

function addListener(state, scope, func){
    if(Monitor.listeners[state] == undefined ) Monitor.listeners[state] = [];
    Monitor.listeners[state].push({scope: scope, func: func});
}

function changeState(state){
    if(Monitor.listeners[state] == undefined ) throw new Error("指定された状態は存在しません。");
    this.notify(state);
}

/**
 * 通知処理
 */
function notify(state){
    for(var i = 0; i < Monitor.listeners[state].length; ++i){
        var obj = Monitor.listeners[state][i];
        obj.func.apply(obj.scope);
    }
}

次にStateクラスを定義します。

state.js
State = function(){

};

State.current = State.ON_EDIT;

State.ON_EDIT            = 0;
State.ON_CONFIRM         = 1;
State.ON_COMPLETE        = 2;
State.ON_VALIDATE        = 3;
State.ON_SENDMAIL        = 4;
State.ON_SYSTEM_ERROR    = 99;

使い方

main.js
var monitor = new Monitor();
monitor.addListener(State.ON_EDIT, this, this.onEdit);

// エディット処理
function onEdit(){
    console.log(" ON_EDITで処理実行");
}


// 状態変更
monitor.changeState(State.ONEDIT);

pol-inc
「未来を加速する(Accelerate the Future.)」 それがPOLのミッションです。 課題解決とイノベーションにより、良い未来の到来を早める。私たちにしか創れない良い未来を創る。 私たちがPOLに集まっているのは、このためです。
https://pol.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away