Mootools-classes

MooTools-クラス

MooToolsには、さまざまなAPIのクラスが含まれています。 MooToolsでクラスを作成および使用する基本を見てください。 クラスは、特定のタスクを実行するためにそれらの変数を操作する変数と関数のコレクションのコンテナです。

変数、メソッド、オプションについて詳しく説明します。

変数

変数の作成は非常に簡単なタスクです。 ハッシュでキー/値のペアを宣言するようなものです。 同様に、<* class_name.variable *>を意味する同じ方法で変数にアクセスできます。 クラスの変数を作成してアクセスするための次の構文を見てください。

構文

//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
   variable_one : "I'm First",
   variable_two : "I'm Second"
});
var run_demo_one = function(){
  //instantiate a Class_one class called demo_1
   var demo_1 = new Class_one();

  //Display the variables inside demo_one
   alert( demo_1.variable_one );
   alert( demo_1.variable_two );
}

方法

一般に、メソッドは特定のクラスに属する一連の命令を使用する関数です。 これらの関数は、クラスのインスタンスを使用して呼び出すことができます。 インスタンス変数を関数に呼び出す場合は、 this キーワードを使用する必要があります。 メソッドを作成してアクセスするための次の構文を見てください。

構文

var Class_two = new Class({
   variable_one : "I'm First",
   variable_two : "I'm Second",

   function_one : function(){
      alert('First Value : ' + this.variable_one);
   },
   function_two : function(){
      alert('Second Value : ' + this.variable_two);
   }
});

var run_demo_2 = function(){
  //Instantiate a version of class_two
   var demo_2 = new Class_two();

  //Call function_one
   demo_2.function_one();

  //Call function_two
   demo_2.function_two();
}

初期化する

initializeは、クラスオブジェクトのオプションです。 これは、クラスセットアップの作成に役立ちます。これは、ユーザー構成オプションと変数のセットアップにも役立ちます。 初期化オプションの次の構文を見てください。

構文

var Myclass = new Class({
  //Define an initalization function with one parameter
   initialize : function(user_input){
     //create a value variable belonging to
     //this class and assign it the value
     //of the user input
      this.value = user_input;
   }
})

オプションの実装

オプションの実装は、ユーザー入力を受け入れてクラスを構築するのに非常に役立ちます。 オプション機能をクラスに追加するのは、クラスの初期化オプションに別のキー/ペアを追加するのと同じくらい簡単です。 このセットアップの準備ができたら、キー/値のペアを渡すことで、デフォルトオプションの一部またはすべてをオーバーライドできます。 setOptionsメソッドを提供します。 このメソッドを使用すると、クラスが初期化された後にオプションを設定できます。 クラス内から変数にアクセスする場合は、次の構文を使用します。

構文

var Class_four = new Class({
   Implements: Options,

   options: {
      option_one : "Default Value For First Option",
      option_two : "Default Value For Second Option",
   },
   initialize: function(options){
      this.setOptions(options);
   },
   show_options : function(){
      alert(this.options.option_one + "\n" + this.options.option_two);
   },
});

var run_demo_4 = function(){
   var demo_4 = new Class_four({
      option_one : "New Value"
   });
   demo_4.show_options();
}

var run_demo_5 = function(){
   var demo_5 = new Class_four();
   demo_5.show_options();
   demo_5.setOptions({option_two : "New Value"});
   demo_5.show_options();
}

//Create a new class_four class with
//a new option called new_variable
var run_demo_6 = function(){
   var demo_6 = new Class_four({new_option : "This is a new option"});
   demo_6.show_options();
}