Mootools 1.2 チュートリアル クラス (1)_Mootools

簡単に言えば、クラスは変数と、これらの変数を操作して特定の関数を実装する関数のコレクションを含むコンテナです。大規模なプロジェクトでは、クラスは非常に役立ちます。
変数
これまでの一連のレッスンでは、ハッシュ オブジェクトでキーと値のペアを使用する方法を学習しました。そのため、次の例では、よく知られているいくつかの変数のみを含むクラスを作成しました。あなた:
参照コード:

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

/ / class_one という名前のクラスを作成します
// 2 つの内部変数が含まれます
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});

同様に、ハッシュ内の変数にアクセスできます。以下のコードでは、上で定義した Class_one クラスのインスタンスを作成します。
参照コード:

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

var run_demo_one = function() {
// クラス Class_one のインスタンスを、demo_1 という名前で作成します。
varデモ_1 = new Class_one();
// デモ_1 の変数を表示します。
alert(demo_1.variable_one); 🎜>alert(demo_1.variable_two );
}

メソッド/関数
メソッドは、指定されたクラス内の関数を参照します (平たく言えば、クラス内の関数が呼び出されます)メソッド、名前を変更しただけです）。これらのメソッドは、このクラスのインスタンスを通じて呼び出す必要があり、クラス自体から呼び出すことはできません。変数を定義するのと同じようにメソッドを定義できます。違いは、メソッドに静的な値を代入し、それに匿名関数を割り当てる必要があることです。
参照コード:

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

var Class_two = new Class({
variable_one : "I'm First",
variable_two : " 私は 2 番目です",
function_one : function(){
alert('最初の値 : ' this.variable_one)
},
function_two : function(){
alert(' Second Value : ' this.variable_two);
}
});

上の例では、キーワード this の使用に注意してください。上記のメソッドで操作する変数はすべてクラス内の変数であるため、キーワード this を使用してこれらの変数にアクセスする必要があります。そうしないと、未定義の値が取得されるだけです。
参照コード:

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

// 修正
working_method : function(){
alert('最初の値 : ' this.variable_one);
},
// エラー
broken_method : function(){
alert(' 2 番目の値 : ' variable_two);
}

新しく作成されたクラスのメソッドの呼び出しは、それらのクラスの変数にアクセスするのと同じです。
参照コード:

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

var run_demo_2 = function() {
// クラスをインスタンス化します class_two
var Demon_2 = new Class_two()
// function_one を呼び出します
demo_2.function_one()
// function_two を呼び出します
demo_2.function_two();
}

initialize メソッド
クラス オブジェクトの初期化オプションを使用すると、クラスに対していくつかの初期化操作を実行でき、一部のユーザーを処理することもできます。設定オプションと変数。 (Fdream 注: 実際、これはクラスの初期化メソッドと同等です。) メソッドのように定義できます:
リファレンス コード:

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

var Myclass = new Class({
// 1 つのパラメーターを含む初期化メソッドを定義します
initialize : function( user_input){
// このクラスに属する変数を作成します
// そしてそれに値を割り当てます
// 値はユーザーによって渡された値です
this.value = user_input;
}
} )

この初期化を通じて他のオプションや動作を変更することもできます:
参照コード:

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

var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "このメッセージの内容はすべて true";
}
else {
this.message = "このメッセージの内容はすべて false";
}
}
})
// これは、myClass インスタンスの message プロパティを設定します。文字列
// "このメッセージが示すことはすべて true"
var myclass_instance = new Myclass(true)
// これにより、myClass インスタンスのメッセージ属性が次の文字列 / / "このメッセージの内容はすべて false"
var myclass_instance = new Myclass(false);

これはすべて、他の変数やメソッドを宣言しなくても機能します。各キーと値のペアの後のカンマを覚えておいてください。カンマを見逃して、存在しない脆弱性を追跡するのに多くの時間を費やすのは非常に簡単です。
参照コード:

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

var Class_three = new Class( {
// このクラスはクラスの作成時に実行されます
initialize : function(one, two, true_false_option){
this.variable_one = one;
this.variable_two = two ;
if (true_false_option){
this.boolean_option = "真の選択";
else {
this.boolean_option = "偽の選択";
} ,
// いくつかのメソッドを定義します
function_one : function(){
alert('First Value : ' this.variable_one)
},
function_two : function(){
alert(' 2 番目の値 : ' this.variable_two);
}
});
var run_demo_3 = function(){
var Demon_3 = new Class_three("最初の引数", "2 番目の引数" );
demo_3.function_one();
demo_3.function_two();


クラスの作成時にいくつかの変数を設定しますデフォルト値は、ユーザーが最初の入力を提供しない場合に役立ちます。これらの変数を初期化メソッドで手動で設定し、各入力をチェックしてユーザーが対応する値を指定したかどうかを確認し、対応するデフォルト値を置き換えることができます。あるいは、MooTools の Class.extras によって提供される Options クラスを使用することもできます。
クラスにオプション関数を追加するのは、別のキーと値のペアをクラスに追加するのと同じように非常に簡単です。
リファレンス コード:

コードをコピー

コードは次のとおりです: var Myclass = new Class({ Implements: Options })

まず最初に、オプションの詳細を実装することにあまり心配しないでください。後のチュートリアルでさらに詳しく学びます。オプションを備えたクラスができたので、あとはデフォルトのオプションをいくつか定義するだけです。他のすべてと同様に、初期化が必要なキーと値のペアをいくつか追加するだけです。単一の値を定義する代わりに、次のようにキーと値のペアのセットを定義する必要があります。
参照コード:

コードをコピー

コードは次のとおりです。 var Myclass = new Class({ Implements: Options, options: {

option_one : "First Option",

option_two : "2 番目のオプション"
}
})


これらのデフォルトのコレクションができたので、このクラスの初期化時にユーザーがこれらをオーバーライドする方法を提供する必要もあります。デフォルト値。新しいコード行を初期化関数に追加するだけで、あとは Options クラスが実行します。
参照コード:

コードをコピー

コードは次のとおりです: var Myclass = new Class({ Implements: Options, options: {

option_one : "Firstデフォルト オプション ",

option_two : "2 番目のデフォルト オプション"
}
initialize: function(options){
this.setOptions(options);
}
})


これが完了したら、キーと値のペアの配列を渡すことでデフォルトのオプションをオーバーライドできます。
参照コード:

コードをコピー

コードは次のとおりです。 // すべてのデフォルト オプションをオーバーライドしますvar class_instance = new Myclass({ options_one : "最初のオプションをオーバーライド" ,

options_two : "2 番目のオプションをオーバーライドします"

});
// デフォルト オプションの 1 つをオーバーライドします
var class_instance = new Myclass({
options_two : "2 番目のオプションをオーバーライドします"
})


初期化関数の setOptions メソッドに注意してください。これは、クラスをインスタンス化するときにオプションを設定できるようにする、Options クラスで提供されるメソッドです。
参照コード:

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

var class_instance = new Myclass( );
// 最初のオプションを設定します
class_instance.setOptions({options_one : "Override First Option"});

オプションを設定したら、次のように渡すことができます。それらを訪問するための変数オプション。
参照コード:

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

var class_instance = new Myclass( );
// 最初のオプションの値を取得します
var class_option = class_instance.options.options_one;
// 変数 class_option の現在の値は「最初のデフォルト オプション」です

クラス内でこのオプションにアクセスしたい場合は、次のステートメントを使用してください:
参照コード:

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

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : " 2 番目のデフォルト オプション"
}
test : function(){
// this キーワードを使用して
// このクラスを参照することに注意してください
alert(this .option_two);
}
});
var class_instance = new Myclass();
// [2 番目のデフォルト オプション]
class_instance.test() を示すダイアログ ボックスが表示されます。 ;

これらをクラスに結合すると、次のようになります:
参照コード:

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

var Class_four = new Class({
実装: オプション,
options: {
option_one : "最初のオプションのデフォルト値" ,
option_two : " 2 番目のオプションのデフォルト値",
},
initialize: function(options){
this.setOptions(options)},
show_options : function; (){
alert (this.options.option_one "n" this.options.option_two)
},
});
var run_demo_4 = function ); Class_four({
option_one : "新しい値"
});
demo_4.show_options()
}
var run_demo_5 = function(){
var Demon_5 = new Class_four( );
demo_5.show_options();
demo_5.setOptions({option_two : "新しい値"});
demo_5.show_options()
// のインスタンスを作成します。 class class_four
// new_option という名前の新しいオプションを指定します
var run_demo_6 = function(){
var Demon_6 = new Class_four({new_option : "これは新しいオプションです"}); .show_options();
}


コードと例
PHP に詳しい人は、次の例の show_options メソッドの print_r() 関数を認識しているかもしれません。

コードをコピーします

コードは次のとおりです。 show_options: function(){ alert(print_r) (this.options, true)); }

これはネイティブ JavaScript メソッドではなく、PHP2JS プロジェクトの Kevin van Zonneveld のコードの一部にすぎません。 PHP に詳しくない人のために説明すると、print_r() メソッドは、配列内のキーと値のペアのフォーマットされた文字列を提供します。これは、スクリプトのデバッグ過程で非常に便利なデバッグ ツールです。この機能には、後で提供されるダウンロード パッケージに詳細なコードが含まれており、テストや研究に使用することを強くお勧めします。
リファレンスコード:

コードをコピー

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

var Class_five = new Class({
// オプションを使用しました
Implements: Options,
// デフォルトのオプションを設定します
options : {
option_one : "DEFAULT_1 ",
option_two : "DEFAULT_2",
},
// 初期化関数を設定します
// setOptions メソッドを通じてオプションを設定します
initialize : function(options){
this .setOptions(options);
},
// オプション配列情報の出力に使用されるメソッド
show_options: function(){
alert(print_r(this.options, true)) ; },
// setOptions メソッドを使用して 2 つのオプションの値を交換します
swap_options : function(){
this.setOptions({
option_one : this.options.option_two,
option_two : this.options.option_one
})
}
});
function demo_7(){
var Demon_7 = new Class_five()
demo_7.show_options( ); ;
demo_7.setOptions({option_one : "新しい値"});
demo_7.show_options()



さらに詳しく

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

MooTools クラス ドキュメント

MooTools Class.extra ドキュメントprint_r() リファレンス