Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

JavaScript真田丸MVC コールバック関数の中で何とかする方法(私的編)

More than 3 years have passed since last update.

コールバック関数の罠

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

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

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

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

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がおおっぴらにつかえるまではこの手で行こうかと思います。

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

かしこ。

fd2016ta
Pinchos.Ponchos JavaScript&PHPでサイトの実装を主に担当しています。
http://rdp3.com/blog/
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