2016.11.28
0でもできるオブジェクト指向 with 出席管理マネージャー#5【javascriptでオブジェクト指向】
日記として取り上げるような話がないときってプログラミングの話でお茶を濁せるからいいですよね←
ということで閑話休題致しまして、オブジェクト指向の話に戻ります。
今回のテーマは
javascriptでオブジェクト指向です。
というのも、javascriptにはオブジェクトを実現する機構はあるものの、クラスが存在しません。
ただ
工夫するとオブジェクト指向でコーディングできることも立証済みなので、これを参考にクラス
っぽいものを作ってみたいと思います。
題材としては
前回取り上げたAjaxですね。
まーーた予告と違うことするのか
これはどこでも使いそうなので、一つのクラスにまとめて、受け渡す変数と、実行時と失敗時に実行する関数をまとめてプロパティ化してしまいましょう。
失敗時に関しては、基本発生し得ないのでポップアップダイアログで表示させるぐらいでよさそうですかね。prototypeなるものでデフォルトのものは定義できるっぽいので、特別になにか別の所作が必要になった時はオーバーライド的なことをさせれば良さげですね。
んじゃ実装してみましょ。
注意すべきところは、どうやって動的に関数を呼び出すかってとこですね。successの時に呼び出す関数は、コンストラクタで指定するのですが、その変数を用いてどう関数を呼び出すかという話ですね。とりあえず参考になりそうなのは
これかな。
//Ajaxクラス
Ajax = function(url, data_array, success, error = "default_error") {
// this はインスタンスを表します。
this.url = url;
this.data_array = data_array;
this.success = success;
this.error = error;
};
Ajax.prototype.ajaxsend = function() {
$.ajax({
type: "POST",
url: this.url,
data:this.data_array,
beforeSend: function (xhr) {
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
}
})
.then(
(data) => {
this[this.success](data);
},
() => {
this[this.error]();
}
);
};
//Success
Ajax.prototype.group_add_test = function(data) {
console.log(this.url);
}
//error
var error=[];
Ajax.prototype.default_error = function() {
alert("通信に失敗しました。もう一度やり直して下さい。");
}
function group_add(){
if(group_add_function()===false){return false;}
//配列取得
var data_array={
new_title:$('#group_new_form [name=title]').val(),
no_join:$('#group_new_form [name=no_join]').prop('checked'),
admin_name:$('#group_new_form [name=admin_name]').val()
};
var ajax = new Ajax("./group/new", data_array ,"group_add_test");
ajax.ajaxsend();
}
まぁこんな感じになりました。
関数の実体は一番下のgroup_add()ですね。なんか変なif文ありますが、これは全然関係ないバリデーションです(笑)(笑)
重要なのは最後の2行ですね。ajaxという変数にAjaxクラスを埋め込みます。引数に送りたいURL、データ配列、成功時に呼び出す関数をとります。
ぶっちゃけコンストラクタでajaxsend()の部分もやっちゃっていいと思ったんですけど、せっかくなのでメソッドにしてみました。メソッドの定義は参考サイトにもあったとおり、prototypeなるものを使うそうですね。
変数で呼び出す関数を変えるという操作を実現するコツとしては、ドット記法じゃなくてブラケット記法を使うことですね。ここがだいぶ苦労しました(笑)
これによって、成功後の操作が変数で指定できるようになりましたので、ただコンストラクタに関数名ぶち込むだけで動く保証ができましたねと。
これを普通に作ると、Ajax部分が増殖するか、あるいはif文かなんかの場合分けが必要になってくるので、ちょっとは見やすくなったんじゃなかろーか。
これはなかなかに有用なコードだと自分では思ってるのですがどうでしょう(笑)(笑)(笑)(笑)
ただまぁ、送る配列の実体なんかはコンストラクタでメンバ変数に登録する必要もなかったかもなーみたいなとこありますけどね。好みの問題だと思いますけどね。