コールバック関数の罠
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がおおっぴらにつかえるまではこの手で行こうかと思います。
そのうち、古くてクラスが使えない例えばインターネットえくすぷろーら１１とか１１とか１１が無くなったら、クラスでこの実装を再考してみようかなって思いますです。
かしこ。