ただのSEの備忘録

技術からニュース、くだらない雑学まで何でもまとめるブログ

*

Javascriptのちょっとスマートな書き方|オブジェクトを使用してMVCっぽく書いてみる

   


JavascriptはJavaのように、方やオブジェクト指向が無いため、誰でも簡単に書ける反面、記述が煩雑になってしまいがちです。

私も仕事でjavascriptを触っていますが、他人が書いたソースを解読するのはなかなか至難の業です。

 

そこで、JavascriptにMVCの考えを取り入れたいと思います。

MVCを取り入れることでソースの煩雑さをなくし、ある程度共通の記述をすることが出来、可読性も向上します。

mvc

 

JSでのMVCの役割をご説明します。

Cで変数の定義、取得や処理の呼び出しを行います。

Mで共通処理(ajax通信等)を行います。あくまでMには変数を持たず、渡された値をゴニョゴニョして返却する役割です。

VはDOMなどで値をレンダリングする際に必要になりますが、jquery-templateなどのテンプレートを使う場合には、それそのものがVの役割となりますので、MCだけでよいかと思います。DOMを記述する場合のみVを作るかと良いと思います。

 

MVCを取り入れる上で重要な事が「オブジェクト」でJSを書くことです。

オブジェクトの中に関数を入れていきます。

スポンサードリンク

今回はajaxの処理を例にM(V)Cを学びたいと思います。

ctl.js


(function(){

CTL.tsuushin();

});

var CTL = {

    param:{//渡す変数を定義

       hoge: 1

    },
//通信のコントローラー
    tsuushin: function(){
    //モデルを呼ぶ
       MDL.ajax(CTL.param,"/hoge",function(){

          //Vの処理:DOM記述scriptを呼んだり、テンプレートを呼ぶ
       });
    }
}

model.js


MDL = {
//ajax通信のモデル:パラメータにparam、飛び先にurlを指定し、成功すればこうすればcallback関数を返却します。
    ajax:function(param,url,callback){
        $.ajax({
             dataType: 'json',
             data: {"bukkenId":bukkenId,"sellType":ESTATE_MODEL.param.sellType},
             cache: false,
             url: 'g/getBukkenDetail',
             success: function(data){
                 callback(data);
             },
             error: function(e){
             }
        });
    }

CTL.jsで変数を定義、MDL.jsでajaxの処理を渡します。

通信が成功すれば、返却値をもった関数を呼び出し、処理が続く、といった流れになります。

 

これで各所で呼ばれていたajax通信の長い記述が一行にまとめることが出来ます。

このように処理を共通化し、関数にをオブジェクトにまとめることで、処理の煩雑化が防ぐことが出来ます。

 

会社では実用化し、可読性が向上したので、でひ試してみてください!

 - JavaScript/jQery