JS を学習している初心者は、JavaScript のオブジェクト指向の性質についての理解を分析することができます。学習が必要な友人は、それを参照できます。次のようにコードをコピーします。
var obj = document.getElementById(name);
関数 clickMe() {
アラート(この値);
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 binding = new ActionBinder();//ActionBinderメソッドに従って新しいクラスを作成します
バインダー.registerDOM(obj);
バインダー.registerAction(clickMe);
バインダー.バインド();
js で書かれたオブジェクト指向のコードから始めましょう。まず、ActionBinder クラスを作成します。js は html の dom オブジェクトに基づいてメソッドを定義します。 registerDOM をクラスに登録するには、 pr を使用します。 ototype は、簡単に呼び出すためのメソッドをプロトタイプ化します。さらに、イベントを登録するためのメソッド registerAction が追加されます。これもプロトタイプ メソッドを使用してプロトタイプ化され、最後に、プロトタイプ化されたアクション バインドを使用して、登録された dom と登録されたイベントをバインドします。実行する。
元の js コード スニペットは次のとおりです。
コード
次のようにコードをコピーします。
<本文>
<スクリプト>
document.onload= function(){
var obj = document.getElementById(name);
obj.onclick = function(){alert(this.value);}
}
</script>
<input type=text id=name />
</body>
このコードは、一部の単純なアプリケーションでは上記の効果を満たすことができますが、コード スニペットなどのより複雑なプログラムでは、適用するのがさらに面倒になります。
コード
次のようにコードをコピーします。
<本文>
<スクリプト>
document.onload= function(){
obj1 = document.getElementById(name1);
obj2 = document.getElementById(name2);
obj3 = document.getElementById(name3);
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<input type=text id=name1 value=111 />
<input type=text id=name2 value=222 />
<input type=text id=name3 value=333 />
</body>
または
コード
次のようにコードをコピーします。
<本文>
<スクリプト>
関数 clickMe(){alert(this.value);}
</script>
<input type=text id=name1 value=111 onclick=return clickMe() />
<input type=text id=name2 value=222 onclick=return clickMe() />
<input type=text id=name3 value=333 onclick=return clickMe() />
</body>
もちろん、上記の 2 つのコードを記述する他の簡単な方法はありますが、全体的にはまだ冗長なコードが多くあります。
次のようなオブジェクト指向メソッドで記述する方が柔軟です。
コード
次のようにコードをコピーします。
<本文>
<スクリプト>
window.onload = function() {
var objs = document.getElementsByTagName(input);
関数 clickMe() {
アラート(この値);
}
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アクションを登録する
for (var i=0;i<objs.length;i++){
var binding = new ActionBinder();//ActionBinderメソッドに従って新しいクラスを作成します
バインダー.registerDOM(objs[i]);
バインダー.registerAction(clickMe);
バインダー.バインド();
};
}
</script>
<input type=text id=name value=111/>
<input type=text id=name1 value=222/>
<input type=text id=name2 value=333/>
</body>
この方法では、冗長なコードはなくなり、複数のイベントのバインディングを検討する必要がある JS ロジックが比較的明確になります。