OO JQuery et classes

Question

Je travaille sur un site et j'utilise JQuery pour la première fois. J'ai surtout utilisé MooTools pour des projets précédents, et j'ai quelques classes de widgets que j'ai écrites à l'aide de l'interface JQuery. Classe MooTools structure. J'aimerais les porter sur JQuery, mais il me semble qu'il n'y a rien de similaire à la fonctionnalité MooTools en ce qui concerne les classes d'objets.

J'ai cherché un peu, mais je n'ai pas trouvé grand-chose à ce sujet. Digg semble avoir ont roulé leur propre mais je ne suis pas sûr que je doive l'utiliser. Existe-t-il un meilleur moyen ? Dans quelle mesure les gens sont-ils normalement orientés objet avec JQuery ? Quelle est la méthode habituelle pour encapsuler un widget d'interface utilisateur (ou toute autre structure de classe fonctionnelle) ?

Je vais poster un faux exemple d'une classe de widget MooTools possible :

var ZombatWidget = new Class({
    Extends: BaseWidget,
    widgetPropertyX = 'prop1',
    widgetPropertyY = 'prop2',
    attach = function(el) {
        var f = function() { 
            //do something widgety
        };
        el.addEvent('dblclick',f);
        el.addClass('widgetized');
    }
});

var z = new ZombatWidget();
z.attach($('widgetDiv'));

Ce que j'ai est bien plus grand que ça, mais vous voyez l'idée. Est-ce que je dois convertir ça en prototype méthode de structuration des classes/de l'héritage ? Comment écririez-vous ce type de classe d'objets en utilisant JQuery ?

Answer 1

Vous pourriez trouver cette approche utile à la tâche en question : construire un plugin jquery orienté objet.

Et cet article sur l'Ajaxien " un véritable système de classes OO avec jquery ".

Answer 2

Hm... intéressant. Nous avons jQuery qui, à mon avis, est un excellent outil pour interagir avec le DOM. C'est un outil de sélection où vous pouvez écrire votre propre code (plugins) pour modifier les éléments sélectionnés. Vous pouvez interagir ici avec votre propre code (orienté objet) dans un plugin pour faire quelque chose de vraiment cool.

Pourquoi donc avoir besoin de capacités OO supplémentaires dans jQuery, à moins que vous ne vouliez pouvoir hériter d'autres plugins jQuery ?

Parce que vous avez peut-être un plugin qui vous permet de faire ce qui suit :

$(".spiffyness").yourSpiffyficationPlugin1();

Et, tout en faisant déjà des choses vraiment cool et impressionnantes, vous avez besoin de plus d'éclat en plus de cela.

C'est pourquoi vous voulez hériter de votre premier plugin qui a pour résultat :

$(".spiffyness").yourSpiffyficationPlugin2(); //plugin inherited from 1

Mais... tu n'y arriverais pas aussi en faisant ça :

$(".spiffyness").yourSpiffyficationPlugin1().yourSpiffyficationPlugin2();

Où le deuxième plugin fait juste cette petite (mais géniale ;)) chose supplémentaire en plus du premier ?

En d'autres termes : ce que vous voulez vaut-il la peine de faire au nom du purisme OO ? Ou bien le mécanisme des tuyaux de jQuery est-il suffisamment bon et peut-être même tout ce dont vous avez besoin ?

Je dirais que la séparation des responsabilités et/ou votre état d'esprit mootools pourrait être le vrai problème ici. Laissez jQuery faire ce qu'il sait faire, utilisez son puissant mécanisme de pipe, pipez vos propres plugins (qui peuvent contenir des tonnes de trucs OO fantaisistes)... et vous pouvez obtenir d'excellents résultats tout en conservant un code propre.

Si vous pensez que je pense trop simplement, un bon exemple de l'essence de votre point de vue serait le bienvenu ! :-)

Et pour aller plus loin, si vous faites quelque chose de vraiment avancé et que vous ne vous en sortez pas en faisant simplement quelque chose par-dessus quelque chose d'autre, votre plugin pourrait aussi déléguer à l'une de vos classes OO. Par exemple, comme :

$.fn.totalAwesomeness = function(options) {
  var defaults = {
    mode: 1,
    title: 'Awesome'
  };
  var opts = $.extend(defaults, options);
  return this.each(function() {
    var $this = $(this);
    var handler = null;
    if(defaults.mode == 1)
       handler = new com.myStuff.class1($this);
    else if(defaults.mode == 2)
   handler = new com.myStuff.class2($this); //class2 inherits from class1 
    handler.doMagic();
  });
};

Answer 3

Vous pouvez aussi toujours utiliser moo4q - http://moo4q.com/ . Il ajoute le support de la classe MooTools à jQuery.

Answer 4

Il existe des implémentations de classes javascript tierces qui fournissent des capacités d'introspection très puissantes. Je voudrais particulièrement souligner JS.Class y Joose . Alors que JS.Class est calqué sur Ruby, Joose est calqué sur Moose. Je ne suis pas un utilisateur de mootools, je ne peux donc pas commenter leurs avantages/désavantages par rapport à mootools. Mais je résumerais leurs principales caractéristiques.

JS.Class s'efforce de simuler les fonctionnalités orientées objet de Ruby et fait un excellent travail à cet égard. Il fournit une bibliothèque puissante, calquée sur la bibliothèque standard de Ruby, ainsi qu'une gestion de paquets et un cadre de test bien intégrés.

Joose, bien qu'il ne fournisse aucun cadre de test ni aucune facilité de gestion des paquets, excelle en termes de de gestion avancée des attributs, de filtres et de meilleures facilités d'introspection.

Tous deux disposent d'une très bonne documentation et peuvent être utilisés aussi bien dans un navigateur que sur un serveur.

Answer 5

Je viens de terminer une toute première version de mon mini projet : https://github.com/op1ekun/plOOgins . Il s'agit d'écrire du code OOP à utiliser comme plugins Jquery. Ce n'est pas de la science infuse, juste un petit quelque chose que nous voulions utiliser sur mon lieu de travail. Peut-être que cela vous aidera un peu. Bonne chance !