2011年12月01日

どっちがいいかと思ったが、、、

どうも、塩内藤です。

昔はHTMLでWEBページを作成する時に、DOMの制御をHTMLのhead部に直接書くというのが結構普通だった気がするんですが
ここ最近ではjQuery等のjs用ライブラリを使用することも多くなり、HTMLと対になるscriptファイルを用意し、その中に処理をまとめるのが一般的みたいです。

で、その処理をまとめたscriptの書き方に最近ちょっと悩んでいます。

個人的には下の2パターンのどちらかと思うのですが、、、
※jQuery使用が前提

パターン1:無名関数

(function ($) {

$(document).ready(initialize);

function initialize() {
bindEventListener();
};

function bindEventListener() {
$("#hoge").click(onHogeClick);
}

function onHogeClick(e) {
alert($(e.currentTarget).val() + "がクリックされたよー");
}

})(jQuery);



パターン2:制御用のファンクション作成

var PageControl = function () {
this.initialize();
}

PageControl.prototype.initialize = function () {
this.bindEventListener();
};

PageControl.prototype.bindEventListener = function () {
$("#hoge").click(this.onHogeClick);
};

PageControl.prototype.onHogeClick = function () {
alert($(e.currentTarget).val() + "がクリックされたよー");
};

$(function (){
$.extend({controller : new PageControl()});
});


パターン1
・処理が無名関数内にあるので他scriptを読み込んだ時に衝突しない。
・どうしてもHTMLから処理script内のファンクションを呼び出したい時に困る

パターン2
・衝突の可能性があるが、ファンクション名だけなのでなんとかなりそうな気がする。
・$.controllerとして制御用のファンクションオブジェクトを保持しているので外部から呼び出し可能

と、違いを書いてる途中なんですが、やっぱりパターン1かなと思いはじめました。

パターン2だとイベントハンドラ内から別のファンクション呼び出したい時にちょっとめんどくさい
※ハンドラでのthisがイベント送信元エレメントになってるから、、、
まぁこれに関してはクロージャー作成すればどうとでもなりますが、イベントバインド時に毎回クロージャー作成とかちょっと、、、みたいになりそう

あと、パターン1は外部から呼び出しに困るとか書いたけど、そもそも呼び出す事ないと思うし衝突しないのはやっぱりデカイ


ということで、パターン1に決めました。
もしくは、他にいい記述方があったら誰か教えてください。

posted by しお at 14:25| Comment(2) | TrackBack(0) | JavaScript