MooTools - Classes

MooTools contient des classes de différentes API. Regardez les bases de la création et de l'utilisation de classes avec MooTools. Une classe est un conteneur pour une collection de variables et de fonctions qui opèrent sur ces variables pour effectuer des tâches spécifiques.

Laissez-nous discuter des variables, des méthodes et des options en détail.

Variables

La création d'une variable est une tâche très simple. C'est comme déclarer une paire clé / valeur dans des hachages. De même, vous pouvez accéder aux variables de la même manière, ce qui signifie <class_name.variable>. Jetez un œil à la syntaxe suivante pour créer et accéder aux variables dans les classes.

Syntaxe

//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 );
}

Méthodes

En général, une méthode est une fonction qui utilise un ensemble d'instructions appartenant à une classe spécifique. Vous pouvez appeler ces fonctions en utilisant l'instance de la classe. Encore une chose chaque fois que vous voulez appeler la variable d'instance dans la fonction que vous devez utiliserthismot-clé. Jetez un œil à la syntaxe suivante pour créer et accéder aux méthodes.

Syntaxe

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();
}

initialiser

initialize est une option dans l'objet de classe. Cela vous aide à créer une configuration de classe Cela vous aide également à configurer des options et des variables de configuration utilisateur. Jetez un œil à la syntaxe suivante de l'option initialize.

Syntaxe

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;
   }
})

Options de mise en œuvre

Les options d'implémentation sont très utiles pour accepter les entrées utilisateur et créer des classes. L'ajout de la fonctionnalité d'options à votre classe est aussi simple que l'ajout d'une autre clé / paire aux options d'initialisation de votre classe. Une fois cette configuration prête, vous pouvez remplacer tout ou partie des options par défaut en passant des paires clé / valeur. Il fournit la méthode setOptions. Cette méthode vous permet de définir les options une fois que la classe a été initialisée. Si vous souhaitez accéder à la variable depuis l'intérieur de la classe, utilisez la syntaxe suivante.

Syntaxe

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();
}