web-dev-qa-db-fra.com

OO JQuery et les cours

Je travaille sur un site et utilise JQuery essentiellement pour la première fois. J'ai principalement utilisé MooTools pour les projets précédents et quelques classes de widgets que j'ai écrites à l'aide de la structure MooTools Class . J'aimerais les porter sur JQuery, mais il me semble que rien ne ressemble à la fonctionnalité de MooTools en ce qui concerne les classes d'objet.

J'ai cherché un peu et je n'ai pas trouvé grand chose à ce sujet. Digg semble avoir roulé leur propre , mais je ne suis pas sûr si c'est quelque chose que je devrais utiliser. Y a-t-il un meilleur moyen? À quel point les gens se familiarisent-ils normalement avec JQuery? Quelle est la méthode habituelle pour encapsuler un widget d'interface utilisateur (ou toute 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 beaucoup plus gros que ça, mais vous voyez l'idée. Dois-je convertir cela en méthode prototype de structuration de classe/héritage? Comment écririez-vous ce genre de classe d'objets en utilisant JQuery?

javascriptjqueryoopmootools
29
zombat

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

Et cet article sur Ajaxian " un vrai système de classe OO avec jquery ".

21
pixeline

Hm ... intéressant. Nous avons jQuery qui imho 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.

Alors, pourquoi auriez-vous besoin de fonctionnalités OO supplémentaires dans jQuery, à moins que vous ne souhaitiez pouvoir hériter d’autres plug-ins jQuery?

Parce que vous pourriez avoir un plugin qui vous permet de faire ce qui suit: 

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

Et, même si vous faites déjà des expériences vraiment géniales, vous avez besoin de plus de fantaisie.

Par conséquent, vous souhaitez hériter de votre premier plugin, ce qui entraîne:

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

Mais ... n'y arriveriez-vous pas aussi en faisant ceci:

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

Où le second plug-in ne fait-il que cette minuscule (mais géniale;)) chose en plus du premier?

En d'autres termes: est-ce que vous voulez, l'effort vaut-il pour le purisme OO? Ou bien le mécanisme de pipe jQuery est-il suffisant et peut-être tout ce dont vous avez besoin?

Je dirais que la séparation des responsabilités et/ou l’état d’esprit de mootools est peut-être le vrai problème ici. Laissez jQuery faire ce qu’il fait de bien, utilisez son mécanisme de pipe puissant, dirigez vos propres plugins (qui peuvent contenir des tonnes de choses OO sophistiquées) ... et vous obtiendrez d’excellents résultats tant que votre code sera toujours propre.

Si vous pensez que je pense trop simple ici, un bon exemple de l’essence de votre argument serait le bienvenu! :-)

Et pour être en avance sur cela, si vous faites quelque chose de vraiment avancé et que vous ne vous contentez pas de faire autre chose, votre plug-in pourrait également 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();
  });
};
4
Jos

Je viens de terminer la 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 sorcier, c'est juste un petit quelque chose que nous voulions utiliser sur mon lieu de travail. Peut-être que cela vous aidera un peu. Bonne chance!

2
op1ekun

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

2
BrianFreud

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 et Joose . Tandis que JS.Class est modelé d'après Ruby, Joose est calqué sur Moose. Je ne suis pas un utilisateur de mootools, je ne peux donc pas en dire plus sur leurs avantages/inconvénients par rapport à mootools. Mais je voudrais résumer leurs principales caractéristiques. 

JS.Class est très concentré sur la simulation des fonctionnalités orientées objet de Ruby et fait un très bon travail à cet égard. Il fournit une bibliothèque puissante, inspirée de la bibliothèque standard de Ruby, ainsi qu'un cadre de gestion et de test des paquets bien intégré. 

Joose, bien qu’il ne dispose d’aucune infrastructure de gestion des tests/cadres de tests, excelle en termes d’installations de gestion des attributs avancées, de filtres et de meilleures installations d’introspection.

Les deux ont une très bonne documentation et peuvent être utilisés aussi bien en navigateur qu'en serveur.

2
lorefnon

J'ai écrit un article il y a quelque temps sur les plugins jQuery orientés objet, j'espère que cela vous sera utile 

http://ajax911.com/jquery-object-oriented-plugins/

2
Dima

La question est ... Pourquoi vous éloignez-vous de MooTools, répond-il à vos besoins? Il me semble que MooTools fonctionnait bien, et jQuery ne fait rien que MooTools ne puisse faire. (L'inverse n'est pas vrai).

Malheureusement, jQuery n’est pas conçu pour prendre en charge classique OOP comme MooTools, vous devez donc écrire vos classes sous forme de plug-ins jQuery.

0
Andrew Moore

Les plugins font parfois l'affaire.

Bien sûr, vous pouvez utiliser juste assez de mootools pour obtenir son modèle de classe/héritage. Avec l'implémentation de document.id "mode de compatibilité" en 1.2.3, vous pouvez avoir votre gâteau et le manger aussi (je pense - je ne l'ai pas fait moi-même.)

0
Ryan Florence