Poster une réponse 
 
Note de cette discussion :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
[Ajax] Mootools ou jQuery ?
Auteur Message
Anthor Hors ligne
Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15
Message : #21
RE: [Ajax] Mootools ou jQuery ?
Citation :Mais oui, mais ça ne semble pas propre d'avoir tous les objets mergés en un seul gros objet, peut-etre plus pratique, mais moins propre, je me gourre ou pas ?
Ou as-tu vu de l'objet ? 34

Il n'y a que des variables et des fonctions 2

Il ne faut pas que tu restes à ce stade, mais pense, par exemple que la closure renferme l'environnement jQuery, enfermer dans sa fonction, cela lui permet d'être à l'abri d'un écrasement de certaines variables et de certaines fonctions, mais aussi de pouvoir en écraser d'autres. Ajoute à cela les plugins, si l'on parle de plugin, ce n'est pas sans raison, les plugins sont des ajouts de fonctions closure qui permette ainsi d'ajouter des méthodes complète à jQuery, privée ou publique, mais cela permet aussi aux plugins de pouvoir interagir entre eux aux seins d'un objet unique. Des plugins peuvent avoir les mêmes noms de méthodes ou de variables sans être gênés puisqu'il sont privés, cela permet d'éviter beaucoup de conflits.

Il y a de nombreux avantages à cette méthode, l'Object standard aussi en a.
Le plus grand à mon sens est de permettre l'enchainement des fonctions aussi bien native que des plugins sur n'importe quel sélecteur, sans avoir à repasser les variables de l'objet principal ou à initialiser un nouvel objet.

Anthor |
[Image: 352x90.gif]
07-13-2008 09:19 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
oxman Hors ligne
Membre

Messages : 746
Inscription : May 2008
Réputation : 10
Message : #22
RE: [Ajax] Mootools ou jQuery ?
Au final c'est juste deux écoles donc.
Mootools garde l'intéret de sa cohérence.
jQuery de la rapidité.
(Ce message a été modifié le : 07-13-2008 09:42 PM par oxman.)
07-13-2008 09:23 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Anthor Hors ligne
Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15
Message : #23
RE: [Ajax] Mootools ou jQuery ?
En gros.

Mais je pense sincèrement que de gros projets avec pleins de fonctions en chaines, jQurey devient rapidement plus simple à manier, ce qui n'est pas forcement visible au niveau des docs avec des exemples simples et courts n'utilisant qu'une fonction précise.

Je pense que tu devrais regarder plus comment sont écrit les scripts/plugins pour chacune des librairies pour t'en convaincre. Sur une trentaine de plugins que nous avons convertis de mootools à jquery nous avons gagné en moyenne 50% de lignes en moins.

Anthor |
[Image: 352x90.gif]
07-13-2008 10:09 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
oxman Hors ligne
Membre

Messages : 746
Inscription : May 2008
Réputation : 10
Message : #24
RE: [Ajax] Mootools ou jQuery ?
Et bien donne un exemple de fonctions en chaine 2
07-13-2008 10:13 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Anthor Hors ligne
Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15
Message : #25
RE: [Ajax] Mootools ou jQuery ?
T'es dur en affaire 34

http://www.phatfusion.net/imagemenu/index.htm

Un script Mootools, environ 105 lignes.

Code PHP :
var ImageMenu = new Class({
    
    
getOptions: function(){
        return {
            
onOpenfalse,
            
onClose: Class.empty,
            
openWidth200,
            
transitionFx.Transitions.quadOut,
            
duration400,
            
opennull,
            
border0
        
};
    },

    
initialize: function(elementsoptions){
        
this.setOptions(this.getOptions(), options);
        
        
this.elements = $$(elements);
        
        
this.widths = {};
        
this.widths.closed this.elements[0].getStyle('width').toInt();
        
this.widths.openSelected this.options.openWidth;
        
this.widths.openOthers Math.round(((this.widths.closed*this.elements.length
                - (
this.widths.openSelected+this.options.border)) 
                / (
this.elements.length-1))
        
        
        
this.fx = new Fx.Elements(this.elements, {
            
waitfalse
            
durationthis.options.duration
            
transitionthis.options.transition
        
});
        
        
this.elements.each(function(el,i){
            
el.addEvent('mouseenter', function(e){
                new 
Event(e).stop();
                
this.reset(i);
                
            }.
bind(this));
            
            
el.addEvent('mouseleave', function(e){
                new 
Event(e).stop();
                
this.reset(this.options.open);
                
            }.
bind(this));
            
            var 
obj this;
            
            
el.addEvent('click', function(e){

                if(
obj.options.onOpen){
                    new 
Event(e).stop();
                    if(
obj.options.open == i){
                        
obj.options.open null;
                        
obj.options.onClose(this.hrefi);
                    }else{
                        
obj.options.open i;
                        
obj.options.onOpen(this.hrefi);
                    }
                    
                    
                }
                
            })
            
        }.
bind(this));
        
        if(
this.options.open){
            if(
$type(this.options.open) == 'number'){
                
this.reset(this.options.open);
            }else{
                
this.elements.each(function(el,i){
                    if(
el.id == this.options.open){
                        
this.reset(i);
                    }
                },
this);
            }
        }
        
    },
    
    
reset: function(num){
        if(
$type(num) == 'number'){
            var 
width this.widths.openOthers;
            if(
num+== this.elements.length){
                
width += this.options.border;
            }
        }else{
            var 
width this.widths.closed;
        }
        
        var 
obj = {};
        
this.elements.each(function(el,i){
            var 
width;
            if(
== this.elements.length-1){
                
width+5
            
}
            
obj[i] = {'width'w};
        }.
bind(this));
        
        if(
$type(num) == 'number'){
            
obj[num] = {'width'this.widths.openSelected};
        }
                
        
this.fx.start(obj);
    }
    
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events); 

On va partir du même code html
Code PHP :
<div id="imageMenu">
    <
ul>
        <
li class="landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
        <
li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
        <
li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
        <
li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
        <
li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
    </
ul>
</
div

Et enfin le code d'appel motools :
Code PHP :
<script type="text/javascript">
    
window.addEvent('domready', function(){
        var 
myMenu = new ImageMenu($$('#imageMenu a'),{
            
openWidth:310
            
border:2
            
onOpen:function(e,i) {
                
alert(e);
            }
        });
    });
</script> 

Le code d'appel que j'ai appliqué pour jQuery :
Code PHP :
<script type="text/javascript">
    $(
document).ready(function(){
        $(
'#imageMenu').ImageMenu({
            
openWidth:310
            
border:2
            
onOpen: function(data){
                
alert(data.attr('href'));
            } 
        });
    });
</script> 

Ce sont sensiblement les mêmes.

Le plugin :
Code PHP :
(function() {
    
jQuery.fn.ImageMenu = function(options) {
        var 
options = $.extend({
            
onOpenfalse,
            
onClosefalse,
            
openWidth200,
            
transition'swing',
            
duration400,
            
border0
        
}, options);

        return 
this.each(function() {
            
container = $(this); 
            
elements container.find('a');
            
defautWidth container.find('a:first').width();
            
openOthers Math.round((container.width() - (options.openWidth+options.border)) / (elements.length-1));
            
            $(
elements).bind('mouseenter', function(){
                
Move(elementsopenOthers, $(this), options.openWidthoptions);
            });

            $(
elements).bind('mouseleave', function(){
                
open container.find('a.open');
                
Move(elements, (open.length == 1) ? openOthers defautWidth, (open.length == 1) ? open nulloptions.openWidthoptions);
            });

            $(
elements).click(function(){
                
open container.find('a.open');
                if(
open.length == 1)
                {
                    
open.removeClass('open');
                    if(
options.onClose && jQuery.isFunction(options.onClose))
                        
options.onClose(open);
                }

                $(
this).addClass('open');
                if(
options.onOpen && jQuery.isFunction(options.onOpen))
                {
                    
options.onOpen($(this));
                    return 
false;
                }
            });
        });
    };
    
    function 
Move(elementswidthselementwidthoptions)
    {
        
elements.stop();
        $(
elements).animate({'width'widths}, options.durationoptions.transition);
        $(
element).stop();
        $(
element).animate({'width'width}, options.durationoptions.transition);
    };
})(
jQuery); 

Le nouveau code fait environ 50 lignes, ce qui fait 50% de lignes ne moins 2 Tu verras qu'il existe une fonction public ui peut traiter plusieurs menus à la fois, mais aussi un fonction privée pour l'animation qui ne peut être appelé que par le plugin lui-même.

De plus je l'ai fait en 2h, ce n'est donc pas forcement ce qu'il y a de plus optimisé.Le comportement et les options possibles sont exactement les mêmes, j'ai récupéré la même page d'exemple en changeant simplement la librairie.

Les sources sont dispos pour comparaison et démonstration.


Fichier(s) joint(s)
.zip  imagemenu.zip (Taille : 294.79 Ko / Téléchargements : 5)

Anthor |
[Image: 352x90.gif]
(Ce message a été modifié le : 07-14-2008 01:33 AM par Anthor.)
07-14-2008 01:31 AM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
oxman Hors ligne
Membre

Messages : 746
Inscription : May 2008
Réputation : 10
Message : #26
RE: [Ajax] Mootools ou jQuery ?
J'ai remarqué que les deux codes n'étaient pas tout à fait écrit de la même façon, donc j'ai récrit le code initial (Mootools) en me calquant sur ton code :
Code PHP :
var ImageMenu = new Class({
    
getOptions: function(){
        return {
            
onOpenfalse,
            
onClose: Class.empty,
            
openWidth200,
            
transitionFx.Transitions.quadOut,
            
duration400,
            
opennull,
            
border0
        
};
    },

    
initialize: function(elementsoptions){
        
this.setOptions(this.getOptions(), options);
        
this.elements = $$(elements);
        
this.options.defaultWidth this.elements[0].getStyle('width').toInt();
        
this.openOthers Math.round(((this.options.defaultWidth this.elements.length) - (this.options.openWidth this.options.border)) / (this.elements.length-1))
        
this.fx = new Fx.Elements(this.elements, {waitfalsedurationthis.options.durationtransitionthis.options.transition});
        
        
this.elements.each(function(el,i){
            
el.addEvents({
                
'mouseenter': function(e){
                    
this.reset(this.openOthersthis.options.openWidthi);
                }.
bind(this),
            
                
'mouseleave': function(e){
                    
this.reset(this.options.defaultWidththis.options.defaultWidthi);
                }.
bind(this),
            
                
'click': function(e){
                    if(
this.options.onOpen){
                        new 
Event(e).stop();
                        if(
this.options.open == i){
                            
this.options.open null;
                            
this.options.onClose(e.target.hrefi);
                        }else{
                            
this.options.open i;
                            
this.options.onOpen(e.target.hrefi);
                        }
                    }
                }.
bind(this)
            });
        }.
bind(this));
    },
    
    
reset: function(widthswidthnum){
        var 
obj = {};
        
this.elements.each(function(el,i){
            
obj[i] = {'width'widths};
        }.
bind(this));
        
obj[num] = {'width'width};
        
this.fx.start(obj);
    }
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events); 

J'ai essayé de ne pas tricher en respectant le plus possible ta façon de programmer. J'obtiens ainsi un code de 58 lignes, soit 5 lignes de plus qu'avec jQuery, mais tout en ayant une notion d'objet propre ce qui permet de garder ses habitudes de la vie de tous les jours d'objet.

Mootools semble donc bien moins pire que vous le pensez, et que je le pensais.

Car pour tout te dire, en ayant vu les deux codes, je me suis dit "oui jQuery ça semble en effet plus clair, bizarre Mootools semble avoir un problème".

En analysant en détail j'ai remarqué que tout n'était pas codé pareil, j'ai recodé pareil, et cette fois avec le recul, je trouve que l'on a la même chose, l'un avec de l'objet standard, et l'autre avec des enclosures.

Je préfère l'objet standard, je garde mes habitudes, et peux tirer cette expérience pour mes autres conceptions objet en dehors de Mootools.
07-14-2008 12:59 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Anthor Hors ligne
Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15
Message : #27
RE: [Ajax] Mootools ou jQuery ?
Oui, c'est juste une question d'école.

Personnellement, je préfère prendre jQuery comme un objet JSON, je trouve que c'est pus intéressant côté DOM, beaucoup moins pour les algorithmes plus "classiques".

Mootools et autres ont l'avantage de ne pas être basés sur les sélecteurs, qui ne sont qu'une partie de la librairie.

Anthor |
[Image: 352x90.gif]
07-16-2008 08:06 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Nessper Hors ligne
Membre

Messages : 702
Inscription : Sep 2006
Réputation : 12
Message : #28
RE: [Ajax] Mootools ou jQuery ?
MoonTool à gauche, JQuery à droite. Et qu'en est-il de Prototype+Scriptaculous ?

Ayant testé Jquery et Prototype+Scriptaculous, j'ai une préférence pour le 2eme car c'est celui avec lequel j'ai commencé. Mais je les trouve sensiblement similaires. Quand est-il vraiment ? vaut-il ces 2 homologues ?

Si on pouvait faire de la flemme son métier, il y a longtemps que je serais professionnel 34.
07-18-2008 02:32 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Ter Rowan Hors ligne
Membre

Messages : 302
Inscription : Jul 2008
Réputation : 4
Message : #29
RE: [Ajax] Mootools ou jQuery ?
Nessper a écrit :MoonTool à gauche, JQuery à droite. Et qu'en est-il de Prototype+Scriptaculous ?

Ayant testé Jquery et Prototype+Scriptaculous, j'ai une préférence pour le 2eme car c'est celui avec lequel j'ai commencé. Mais je les trouve sensiblement similaires. Quand est-il vraiment ? vaut-il ces 2 homologues ?


bonne question ! Etant utilisateur de scriptculous, vos avis m'intéresse aussi
07-18-2008 03:03 PM
Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
oxman Hors ligne
Membre

Messages : 746
Inscription : May 2008
Réputation : 10
Message : #30
RE: [Ajax] Mootools ou jQuery ?
Et bien en fait, Mootools et jQuery sont hors catégorie tant ils sont supérieurs aux autres.
Donc on ne les compares pas aux autres.
07-18-2008 04:03 PM
Visiter le site internet de cet utilisateur Trouver tous les messages de cet utilisateur Citer ce message dans une réponse
Poster une réponse 



ContactJeuWeb (JeuPHP) - Crée ton jeu par navigateurRetourner en hautRetourner au contenuVersion bas-débit (Archivé)Syndication RSS