Mootools 1.2 チュートリアル (21) - クラス (2)_Mootools

Fdream 注: 元の記事には一部が欠けているようです。そのため、私は自分で次の段落と BaseClass コードを追加しました。
今日のチュートリアルでは、MooTools でのクラスの実装と継承 (拡張) について主に学びます。実装と継承により、同じメソッドを再宣言して実装することなく、親クラスのメソッドをサブクラスで使用できます。 MooTools の Class クラスを使用すると、これを簡単に行うことができます。まず、基本クラスを定義します。
参照コード:

コードをコピー コードは次のとおりです:

var BaseClass = new Class( {
// メソッド testFunction
// このメソッドはダイアログ ボックスをポップアップします
testFunction: function(){
alert('この関数は BaseClass で定義されています');
}
});

基本クラスができたので、それを実装する新しいクラスを作成することで、その機能をすべて使用できます。以下の例では、新しいクラスは基本クラス BaseClass を実装するだけであることに注意してください。
参照コード:

コードをコピー コードは次のとおりです:

// Create ImplementingClass のクラス
var ImplementingClass = new Class({
// 私がやったのは Baseclass
Implements : BaseClass
}); という名前のファイルです。 ImplementingClass のインスタンスを作成し、BaseClass で定義されたメソッドを使用できます。
参照コード:

コードをコピー コードは次のとおりです: var Demon_one = function() {

// ImplementingClass インスタンスを作成します

var test_class = new ImplementingClass();
// BaseClass で定義された testFunction を呼び出します
test_class.testFunction()
;

demo_one()
基本クラスの変数と初期化関数 (コンストラクター) でも同じことを行うことができます。実装クラス（基底クラスを実装するクラス）で宣言すると、基底クラスで定義した内容はすべて実装クラスに引き継がれます。
注: 今後、以下のすべての例では次のバージョンの BaseClass を使用します。

参照コード:




コードをコピー

コードは次のとおりです: var BaseClass = new Class( { // このクラスの inputVariable 変数にパラメータを割り当てます

initialize: function(input){

this.inputVariable = input;
},
// 値を表示します変数の inputVariable
testFunction : function(){
alert('BaseClass.testFunction() : ' this.inputVariable);
},
// this のすべてのインスタンスの内部変数を定義しますclass
generatedVariable : "BaseClass で定義されています",
});
var ImplementingClass = new Class({
// 繰り返し:
// ここで行うことは BaseClass
を実装することだけですImplements : BaseClass
});


次の例は、イニシャライザ、関数呼び出し、変数が実装クラスに属しているかのようにアクセスできることを示しています。
参照コード:

コードをコピー

コードは次のとおりです: var Demon_two = function() { // ImplementingClass インスタンスを作成します

var test_class = new ImplementingClass('this is the input value');

// testFunction() (BaseClass で定義されている) を呼び出します
test_class。 testFunction ();
// 変数の値を表示します。 >クラスを実装したら、実装クラス定義に必要な機能を追加できます。
参照コード:




コードをコピー

コードは次のとおりです:


var ImplementingClass = new Class( {

Implements : BaseClass, // 次の関数は BaseClass で定義されています definedVariable : "Defined in ImplementingClass", testFunction : function(){ alert('This function は BaseClass にも定義されています'); }, // 次のいずれも BaseClass では定義されていません

anotherDefinedVariable : "Also Defined in ImplementingClass",

anotherTestFunction : function(){
alert('この関数は ImplementingClass で定義されています')
}
});
新しい関数や変数を追加したのと同じように、実装クラスで testFunction と definedVariable を再定義したことに注意してください。特記事項: 基本クラスで定義されている関数または変数を実装クラスで定義する場合、基本クラスの定義が実装クラスの定義に置き換わります。理解できない場合は、下の例を見てください。
参照コード:

コードをコピー コードは次のとおりです:

var Demon_three = function() {
// ImplementingClass インスタンスを作成します
var test_class = new ImplementingClass('これが入力値です');
// (BaseClass で定義されたメソッドを実行します)
test_class.testFunction ();
// 変数の値を表示します (BaseClass で定義された値)
alert('test_class.testVariable : ' test_class.defineVariable);
// (ImplementingClass で定義されたメソッド)
test_class.anotherTestFunction();
// 変数 anotherDefinedVariable の値を表示します (ImplementingClass で定義された値)
alert('test_class.anotherDefinedVariable : ' test_class.anotherDefinedVariable);

demo_three()

Extends (拡張機能)
基本クラスで定義されたメソッドと変数をオーバーライドする場合は、Extends を使用できます。上記のコードの「Implements」を「Extends」に置き換えるだけです。
参照コード:

コードをコピー コードは次のとおりです:

var ExtendingClass = new Class( {

// ここでは Implements
Extends の代わりに Extends が使用されていることに注意してください。Extends : BaseClass,
// 以下はすべて BaseClass で定義されています
// ただし、implements の代わりに extends を使用します
/ / これは BaseClass の定義をオーバーライドします。
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('この関数は BaseClass にも定義されています'); }
});
var Demon_four = function(){
// ImplementingClass インスタンスを作成します
var test_class = new ExtendingClass('これが入力値です'); testFunction( ) (BaseClass と ExtendingClass の両方で定義)
test_class.testFunction();
// 変数の値を表示します (BaseClass と ExtendingClass の両方で定義)
alert('test_class.defineVariable : ' test_class.defineVariable);
}


demo_four()
extends を使用するもう 1 つの便利な機能は、基本クラスの初期化メソッドをオーバーライドする関数を提供することです。基本クラスの初期化メソッドを呼び出します。したがって、基本クラスで次のような初期化メソッドを定義すると、
参照コード:

コードをコピー

コードは次のようになります。 initialize : function(){ alert('base class');

}

次に、拡張機能で次の初期化メソッドが定義されていますclass を選択すると、「基本クラス」と「拡張クラス」をそれぞれ示す 2 つのプロンプトがポップアップ表示されます。
参照コード:

コードをコピー

コードは次のとおりです: initialize : function (){ // 親クラスのコンストラクターを呼び出します

this.parent()

alert('extending class');


親クラスの初期化関数 パラメーターが必要です。この初期化関数で同じ入力パラメーターが使用され、親クラスのコンストラクターに渡されていることを確認してください。以下の例では、入力に値を指定していないことに注意してください。値を親クラスのコンストラクターに渡すだけで、自動的に処理されます。
参照コード:

コードをコピー

コードは次のとおりです: var ExtendingClass = new Class( { // 繰り返し: を実装する代わりに拡張メソッドを使用しています。Extends: BaseClass,

initialize: function(input){

// this.parent を呼び出して親クラスを実行します。初期化メソッド
this.parent(input);
// このようにして、親クラスのメソッドを完全にオーバーライドすることなく、初期化メソッド
// で他のことを行うことができます
this.otherVariable = "入力は : " input;
}
});
var Demon_five = function(){
// 拡張クラス インスタンスを作成します
var test_class = new ExtendingClass('これが入力ですvalue');
// testFunction を呼び出します
test_class.testFunction();
// 変数 otherVariable の値を表示します
alert("test_class.otherVariable : " test_class.otherVariable);


demo_five()
.implement() メソッド
implement と extends を使用してクラス定義を拡張できるだけでなく、元のクラスを使用して一度に 1 つずつ機能を追加することもできます。次の例では、単純な計算機クラス (calculator) を使用します。このクラスを定義するときに、2 つの数値を加算する関数と 2 つの数値を減算する関数を 1 つだけ指定しました。
参照コード:

コードをコピー コードは次のとおりです:

var Calculator = new Class( {
// 初期化中に 2 つの数値を指定します
initialize: function(first_number, Second_number){
this.first = first_number;
this.next = Second_number; / 2 つの数値を加算します
// 結果を返します
add : function(){
result = this.first this.second)
},
// 2 つの数値を減算します
// 結果を返します
subtract: function(){
result = this.first - this.second
alert(result); >});


単に数値を加算または減算する場合はこれで問題ないようですが、乗算する場合はどうすればよいでしょうか? .implement(); メソッドを使用すると、Calculator クラスに基づいて別のクラスを作成したかのように、このクラスに機能を追加できます。
参照コード:

コードをコピー

コードは次のとおりです: var Demon_six = function() { // Calculator クラスの // を実装し、メソッド

Calculator.implement({

// 2 つの数値を乗算します
// 結果を返します
multiply : function() {
result = this.first * this.first;
alert(result);
}
// Calculator クラスのインスタンスを作成します
var myCalculator = new Calculator (100, 50);
// 乗算メソッドを呼び出します
myCalculator.multiply();
}


demo_six()
最初の部分クラスのチュートリアルでは、print_r 関数を使用して JavaScript をデバッグします。 implement メソッドを使用すると、このメソッドを Calculator に実装するだけで、クラス内の変数値を非常に簡単に出力できます。
参照コード:

コードをコピー

コードは次のとおりです: var Demon_seven = function() { // Calculator クラスのメソッドを実装します // このクラスのコンテンツを出力するために使用されます Calculator.implement({

show_class : function(){

alert (print_r(this , true));
}
});
// Calculator クラスのインスタンスを作成します
var myCalculator = new Calculator(100, 50);非常に簡潔ですが、比較的単純な電卓クラスには適していません。 . 特に便利な機能です。ただし、MooTools のほとんどのオブジェクトは同じ方法で作成されたクラスであるため、このメソッドを使用して MooTools クラスを拡張し、より多くの機能を提供できます。次の例では、表示したい HTML のコンテンツ構造を表示できる関数を実装します。この機能は、操作する HTML 要素に自動的に追加されるため、showStructure 要素の完全な説明を要素に追加できます。
参照コード:



コードをコピー


コードは次のとおりです:

var Demon_eight = function() {
Element.implement({
showStructure : function(){
var Structure = '

' print_r(this, true) '

';
// 開くポップアップ ウィンドウ

newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes'); // ポップアップにコンテンツを書き込みますwindownewWindow. document.write(struct); $('demo_eight').showStructure(); 注: この例を作成するには 正しく表示するには、最初にこのページのポップアップ ウィンドウを許可する必要があります。

さらに詳しく








開始するために必要なものがすべて入った zip パッケージをダウンロードします

MooTools クラスのドキュメント

MooTools クラスの有効活用に関する非常に良いディスカッション