初心者のjavascript対象に対する認識分析

 
  
var obj = document.getElementById("name"); 
  
function clickMe() { 
  
alert(this.value); 
  
this.value += "!!!!"; 
  
alert(this.value); 
  
} 
  
var ActionBinder = function() {//      
  
} 
  
ActionBinder.prototype.registerDOM = function(doms) { 
  
this.doms = doms;//  doms 
  
} 
  
ActionBinder.prototype.registerAction = function(handlers) { 
  
this.handlers = handlers;//       
  
} 
  
ActionBinder.prototype.bind = function() { 
  
this.doms.onclick = this.handlers 
  
}//  doms    
  
var binder = new ActionBinder();//  ActionBinder         
  
binder.registerDOM(obj); 
  
binder.registerAction(clickMe); 
  
binder.bind(); 
  
 
 

まず、jsで書いた対象向けのコードを使って、まずアクションビットのクラスを作ります.書き方もjavaに似ています.jsはhtmlのdomオブジェクトに基づいてhtmlの内容を操作するため、クラスの中で登録domを定義する方法であるregisterDOMは、prototypeでこの方法をプロトタイプ化し、呼び出しやすくする.また、もう一つの登録イベントを追加する方法でregister Actionもプロトタイプ方法でプロトタイプ化します.最後にもう一つのプロトタイプ化された動作ビッドを登録したdomと登録されたイベントを結びつけて実行します.
元のjsコードのセグメントを追加します.
コード

 
  
 
  
 
  <br>document.onload= function(){ 
  <br>var obj = document.getElementById("name"); 
  <br>obj.onclick = function(){alert(this.value);} 
  <br>} 
  <br> 
  
 
  
 
  
 
 

コードも必要な効果を実現しました.いくつかの簡単なアプリケーションに対して、上記の効果は満足できますが、複雑ないくつかのプログラムに対しては、適用が面倒で、コードに書いても煩わしいです.コードセグメントのように
コード

 
  
 
  
 
  <br>document.onload= function(){ 
  <br>obj1 = document.getElementById("name1"); 
  <br>obj2 = document.getElementById("name2"); 
  <br>obj3 = document.getElementById("name3"); 
  <br>obj1.onclick = function(){alert(this.value);} 
  <br>obj2.onclick = function(){alert(this.value);} 
  <br>obj3.onclick = function(){alert(this.value);} 
  <br>} 
  <br> 
  
 
  
 
  
 
  
 
  
 
 

または
コード

 
  
 
  
 
  <br>function clickMe(){alert(this.value);} 
  <br> 
  
 
  
 
  
 
  
 
  
 
 

もちろん上の二つのコードにも他の簡単な書き方があります.全体としてはやはり冗長なコードがたくさん現れます.
相手に向かう方法で書くと柔軟です.
コード

 
  
 
  
 
  <br>window.onload = function() { 
  <br>var objs = document.getElementsByTagName("input"); 
  <br>function clickMe() { 
  <br>alert(this.value); 
  <br>} 
  <br>var ActionBinder = function() {//      
  <br>} 
  <br>ActionBinder.prototype.registerDOM = function(doms) { 
  <br>this.doms = doms;//  doms 
  <br>} 
  <br>ActionBinder.prototype.registerAction = function(handlers) { 
  <br>this.handlers = handlers;//       
  <br>} 
  <br>ActionBinder.prototype.bind = function() { 
  <br>this.doms.onclick = this.handlers 
  <br>}//  doms    
  <br>for (var i=0;i<objs.length;i++ ){ 
  <br>var binder = new ActionBinder();//  ActionBinder         
  <br>binder.registerDOM(objs[i]); 
  <br>binder.registerAction(clickMe); 
  <br>binder.bind(); 
  <br>}; 
  <br>} 
  <br> 
  
 
  
 
  
 
  
 
  
 
 

このように冗長なコードはありません.そして、jsの論理的にも比較的にすっきりしています.複数のイベントの結合についてはまだ研究が必要です.