コールバック関数の罠

JavaScriptで実装する際に、コールバック関数の中に書かなければならない事もあります。

例えばReact.jsとかReact.jsとかReact.jsを使った場合にです。

そんな時に、関数がとっちらかってしまう事もままあります。

昨年実装させていただいた地図関連の実装でも、大量の関数が１ファイルにダッダーンと並んでしまいました。

MVC真田丸

そんな時に、せめて私だけでも助かりたい・・・いや、綺麗にコーディングしたいと思ってこんな事をやってみました。

ただのカテゴリわけです。

var Model = {};
var View = {};
var Controller = {};

コールバック関数内に配列を用意しました。

ここに関数を埋め込んで行きます。

Model = {
    getTargetRecords : function (self, hoge) {},
};
View = {
    setMainPage : function (self, viewData) {}
};
Controller = {
    __Constructor : function (self) {}
};

Controller.__Constructor(this);

何が良いのか？

実装箇所がぱっと見でわかり良いです。

よってメンテナンス性と可読性があがります。

ついでに・・・

ここではMVCしか書いてませんが、他にもこんな階層を用意したりします。

Service
EventBind

ServiceはMVCで言うモデル層です。

昨今はモデル層でDBアクセス、ロジックはコントローラかその配下の階層というのが多い気がしますので、こちらでもService層を用意してみました。

コントローラからサービスを呼び、サービスからモデル層を呼び、結果はコントローラに返します。そしてコントローラからビュー層を呼ぶという仕組みです。

またJavaScriptらしくevent層もご用意！

こちらはコントローラから必要な条件をサービス層で用意し、戻り値を元にevent層を呼ぶ形です。

この結果、eventバインド関連をここに丸っとまとめるって寸法です。

この先の未来へ

とりあえずJavaScriptでclassがおおっぴらにつかえるまではこの手で行こうかと思います。

そのうち、古くてクラスが使えない例えばインターネットえくすぷろーら１１とか１１とか１１が無くなったら、クラスでこの実装を再考してみようかなって思いますです。

かしこ。