アプリケーションが大きくなるとJavaScriptの保守性が悪くなってきます。。特に業務システムの場合、何万コードのJavaScriptが元気に絡み合いながら動いています。 開発初期から保守性や可読性を気にしていれば良かったのですが、どうしても開発当初はデスマになるのがSIの常でしょうか。。その場合「動けばOK」なノリでプログラミングしてしまいます。。
とは言うものの、私たちは明るい未来に向かって歩まないといけません。そういった負債を返却していく必要があります。
ということで、絡み合ったソースをこれ以上ひどくならないように対処するとき、効果的なのがユーティリティクラスの作成。コピペで大量に作成された処理達はユーティリティメソッドとして扱うことができそうです。
ユーティリティクラスはstaticなメソッドの集まりですので、こんな感じで書いています。
var AClassUtils = function(){};
AClassUtils.methodA = function() {
alert('methodA');
}
AClassUtils.methodB = function() {
alert('methodB');
}
JSが肥大化していくと、どうしても似た処理が出てきますね。引数にフラグを渡してメソッドの中でちょこざいな分岐入れたりするのは嫌です。。そんな時のために継承を登場させています。
var XClassUtils = function(){};
XClassUtils.methodA = function() {
alert('methodXA');
}
XClassUtils.methodB = function() {
alert('methodXB');
}
var YClassUtils = $.extend(true, function(){}, XClassUtils);
YClassUtils.methodA = function() {
XClassUtils.methodA();
alert('methodYA');
}
YClassUtils.methodC = function() {
alert('methodYC');
}
こういったやり方を継承と呼んで良いか分かりませんが、とりあえず親クラスの静的メソッドを兼ね備えた子クラスを作りたかったので目的はこれで果たせます。
キモは$.extendを使用して親クラスをコピーするところでしょうか。そうすれば子クラスを拡張しても親クラスは何も影響しないですからね。
ちなみに上記例のYClassUtilsクラスの各メソッドの動作は以下のようになります。
・YClassUtils.methodA:親クラスXClassUtilsのmethodAを実行して、alert('methodYA')を実行
・YClassUtils.methodB:親クラスXClassUtilsのmethodBを実行
・YClassUtils.methodC:alert('methodYC')を実行
JavaScriptの世界は奥が深いので日々勉強と実践が必要そうです。でも知れば知るほど良い解決策が見つかりそうなのでそれがやっていて楽しいですね。