JavaScriptでコンストラクタについて

質問

現在、JavaScriptを勉強中なのですが、
コンストラクタについて質問です。
下記のようなコードの場合、document.getElementByIdで取得したID
以外、使いまわしが出来ませんが、
コンストラクタを使って、１ページで複数使用出来るようにするには、
どのように記述すれば良いのでしょうか？

//-----JavaScript-----
function addEvent(elm,listener,fn){
try{
elm.addEventListener(listener,fn,false);
}catch(e){
elm.attachEvent("on"+listener,fn);
}
}
var c,y,m,d;
addEvent(window,"load",function(){
c = document.getElementById("customer_birthday_c");
y = document.getElementById("customer_birthday_y");
m = document.getElementById("customer_birthday_m");
d = document.getElementById("customer_birthday_d");
if(c.options[0].selected == true){
y.disabled = true;
m.disabled = true;
d.disabled = true;
}
});
//-----JavaScript-----

どなたかご教授ください。
宜しくお願いいたします。

回答No.3

yyr446 · ベストアンサー

IEの事を考えるとこうするしかないのか．．．

<script type="text/javascript">
function hoge(doc,parm){
　this.c = doc.getElementById(parm.c);
　this.y = doc.getElementById(parm.y);
　this.m = doc.getElementById(parm.m);
　this.d = doc.getElementById(parm.d);
　var win = doc.defaultView || window;
　 if("undefined" !== typeof document.addEventListener)
　　 win.addEventListener("load",this,false);
　 else if ("undefined" !== typeof document.attachEvent)
　　 win.attachEvent("onload",(function(obj){
　　　return function(){obj.func();};
　　 })(this));
}
hoge.prototype.handleEvent = function(event){
　if (event.type == "load" && event.target == this.doc)
　 this.func();
}

hoge.prototype.func = function(){
　if(this.c && this.y && this.m && this.d){
　 if(this.c.options[0].selected == true){
　　 this.y.disabled = "disabled";
　　 this.m.disabled = true;
　　 this.d.disabled = true;
　 }
　}
};

var fuga_1 = new hoge(document,
　{
　c:"customer_birthday_c",
　y:"customer_birthday_y",
　m:"customer_birthday_m",
　d:"customer_birthday_d"
　}
);

</script>

別パターンもきっとあるはずだ。

補足

ご回答ありがとうございます。
上記のやりかたで上手くいきました。

this.c.onchangeとかイベントを
設定する方法もわかれば教えていただきたい次第です。

よろしくお願いいたします。

回答No.4

aki_mana

「コンストラクタ＆使い回し」ってことから、SELECT要素へのアクセスを簡単な記述にしたいと勝手に解釈しました。
もしそうであれば、普通にSELECT要素を包括するクラスを設計すればいいかと思います。

// JSUIselect class. (constructor)
function JSUISelect( id ) {
this.selectElm = document.getElementById( elementid );
}
JSUISelect.prototype = {
selected : function() {
return this.selectElm.selected == true;
},
disable : function() {
this.selectElm.disabled = true;
}
};

他にもやりたいことがあればメンバ関数を追加の方向で。
(恐らく、OPTION要素を簡単に追加したいなどの要望があるはず)
ここでは、質問にあった内容をそのまま実現するコードに置き換えるだけにします。

// omitted addEvent()
var c,y,m,d;
addEvent(window,"load",function(){
c = new JSUISelect('customer_birthday_c'),
y = new JSUISelect('customer_birthday_y'),
m = new JSUISelect('customer_birthday_m'),
d = new JSUISelect('customer_birthday_d');
if(c.selected()) {
y.disable();
m.disable();
d.disable();
}
});

ライブラリ依存のフロントエンド開発では一般的じゃないです。
拠って動作確認していませんので悪しからず。

回答No.2

yyr446

そのまま、書いてみただけ

<script type="text/javascript">
function hoge(doc,parm){
　this.c = doc.getElementById(parm.c);
　this.y = doc.getElementById(parm.y);
　this.m = doc.getElementById(parm.m);
　this.d = doc.getElementById(parm.d);
　var win = doc.defaultView;
　 if("undefined" !== typeof doc.addEventListener)
　　 win.addEventListener("load",this.func,false);
　 else if ("undefined" !== typeof doc.attachEvent)
　　 window.attachEvent("onload",this.func);
}
hoge.prototype.func = function(){
　if(this.c && this.y && this.m && this.d){
　 if(this.c.options[0].selected == true){
　　 this.y.disabled = true;
　　 this.m.disabled = true;
　　 this.d.disabled = true;
　 }
　}
}

var fuga_1 = new hoge(document,"load",{
　c:"customer_birthday_c",
　y:"customer_birthday_y",
　m:"customer_birthday_m",
　d:"customer_birthday_d"
});

</script>

回答No.1

神崎 渉瑠（@taloo）

コンストラクタを使って、（という言い方も何かへんですが、とりあえず置いておいて。）
何をしたいのですか？

また、何を使い回ししたいのですか？