jQuery - comment écrire des classes à achive OO conception

Question

Je l'ai utilisé Prototype.js dans mon passé et a pu écrire des classes uing:

var XEventDesc = Class.create(); 

XEventDesc.prototype = { 

    initialize: function(element, eventName, handler, useCapture) { 
     .................... 
    } 
}; 

Comment puis-je écrire des classes en utilisant JavaScript jQuery

Answer 1

Il semble y avoir quelques plugins jQuery qui font cela (par exemple, http://plugins.jquery.com/project/HJS). Cependant, vous trouverez probablement quelque chose qui correspond mieux à vos besoins en dehors de jQuery.

Answer 2

Avez-vous vraiment besoin d'utiliser jQuery pour créer une classe? Un objet javascript est juste une fonction.

var Rectangle = function(width,height) { 
    //This section is similar to the initialize() method from prototypejs. 
    this.width = width; 
    this.height= height; 

    //Adding a method to an object 
    this.getArea = function() { 
     return this.width*this.height; 
    } 
} 
var myRect = new Rectangle(3,4); 
alert(myRect.getArea()); //Alerts 12 

Answer 3

La chose fondamentale à comprendre est que Javascript n'a pas le concept de classes. Il utilise ce qu'on appelle l'héritage prototypique. Au lieu de «Voici un plan, construisez des objets à partir de là», Javascript est basé sur «Voici un prototype. (Les fonctions représentent des classes, donc vous créez une fonction entièrement utilisable et ensuite dites à Javascript d'en faire plus ou de l'utiliser comme point de référence pour définir d'autres fonctions)

Voici quelques explications sur les implications d'une telle fonction. paradigme et comment mettre en œuvre l'héritage en JS: (Juste au cas où certains d'entre eux expliquent d'une manière que vous avez des problèmes avec)

• webreference - Prototypal Inheritance Explained
• How To Node - Prototypal Inheritance
• Mozilla Developer Center - Inheritance revisited
• Douglas Crockford - Prototypal Inheritance in JavaScript

Answer 4

jQuery supporte une méthode étendre (http://api.jquery.com/jQuery.extend/), qui imite l'héritage multiple en vous permettant d'étendre un objet avec les propriétés de autant d'objets que vous le souhaitez. Cela imite uniquement l'héritage multiple, car il utilise essentiellement une boucle for pour surfer sur les propriétés des autres objets et les attache au ciblé - s'il fournissait en réalité plusieurs héritages, vous seriez en mesure d'ajouter/supprimer/modifier des attributs de l'un des super-objets et avoir les changements hérités par le sous-objet, mais ce n'est pas le cas.

Pour utiliser jQuery.extend, vous fournissez l'objet cible en tant que premier paramètre et les autres pour l'étendre en tant que paramètres suivants. Attention cependant, car si vous ne spécifiez que le premier objet, toutes les propriétés de l'objet seront utilisées pour étendre jQuery lui-même.

(function($) { 

var SuperOne = { 

    methodOne: function() { 
     alert("I am an object"); 
    }, 

    methodTwo: function(param) { 
     // do something 
    } 
}, 

SuperTwo = { 

    attributeOne: 'I am a super object', 

    getAttributeOne: function() { 
     return this.attributeOne; 
    }, 

    setAttributeOne: function(attributeOne) { 
     this.attributeOne = attributeOne; 
    } 
}, 

SubOne = $.extend({ 

    subMethodOne: function() { 
     return 'I inherit from others.'; 
    } 
}, SuperOne, SuperTwo); 

alert(SubOne.getAttributeOne()); ///<-- alerts, "I am a super object" 

SuperTwo.setAttributeOne("I am SuperTwo!"); 

alert(SubOne.getAttributeOne()); ///<-- alerts, "I am a super object", still 

SuperOne.methodOne = function() { 
    alert("I am SuperOne!"); 
}; 

SubOne.methodOne(); ///<-- alerts, "I am an object", instead of, "I am SuperOne!" 

}(jQuery));