Quelle est la pratique du plugin jQuery?

Question

N'ayez pas peur d'utiliser un jargon technique ou des explications de bas niveau pour les choses, s'il vous plaît. Je suis assez avertis avec l'architecture informatique et les langages de programmation de bas niveau pour comprendre toutes les optimisations ou techniques de gestion de la mémoire, ainsi que les structures complexes (classes, variables membres, etc.)

Mon objectif principal du code est basé sur le Web applications. Je travaille beaucoup avec PHP et j'apprends rapidement les CSS. Javascript est actuellement mon goulot d'étranglement, cependant. Je connais assez de Javascript pour faire à peu près tout ce qui est sans frameworks (manipulation DOM, requêtes AJAX, etc.). Je sais aussi que je peux accélérer l'exécution de mon code, l'optimiser pour des cas spécifiques, et réduire la taille globale de mon code (pas de script externe à inclure) en codant manuellement tout. Cependant pour faciliter la lecture par d'autres programmeurs et pour accélérer le codage, j'essaie d'apprendre au moins un framework Javascript. Après avoir parcouru la documentation sur un certain nombre de frameworks et avoir regardé quelques tutoriels, je préférais jQuery. Il permettait un code itératif très puissant sur une seule ligne et il avait une très faible probabilité de collision de l'espace de noms des variables globales. D'après ce que je peux dire, la seule variable globale déclarée est la variable $ et tout le reste se passe dans cet espace de noms, et il y avait même des moyens d'accéder à l'espace de noms sans cette variable si vous vouliez avoir deux frameworks côte à côte. Il a également eu un très petit fichier à inclure (24 kilobytes gzipped) ce qui signifie moins de charge du serveur.

Ma question est quelles sont les bonnes pratiques dans la création d'un plugin jQuery? Si je devais commencer à coder des sites Web dans jQuery, comment devrais-je m'y prendre pour la meilleure interopérabilité et le meilleur design? Je veux m'assurer que mon code peut fonctionner avec n'importe quel autre jQuery sans interférence, il est possible de construire des plugins de mon code, et je minimise l'utilisation de l'espace de noms jQuery pour ne pas voler les variables qui pourraient être utilisées par un autre scénario.

Answer 1

Lire la jQuery plugin authoring suggestions, regardez également the unminified jQuery. Notez la dernière ligne: window.jQuery = window.$ = jQuery; Il y a donc deux variables globales window.jQuery et window.$. Pour se plonger dans cette question un peu plus, en savoir plus sur la documentation sur using jQuery with other libraries et jQuery.noConflict():

// Trigger no conflict mode. 
$.noConflict(); 
    // Code that uses other library's $ can follow here. 

Pour écrire des plugins, assurez-vous de porter une attention particulière à la section intitulée Maintaining Chainability (depuis jQuery fait si bien usage de l'aptitude à la chaîne). Vous devez retourner explicitement this dans vos plugins pour maintenir la chaîne. De plus, en parlant de se heurtant à d'autres variables, assurez-vous d'arrêter votre plugin de se heurter à tout autre code à l'aide d'une fermeture:

// Use a closure so you can use the dollar sign in your plugin, 
    // but you don't clash with other uses of the dollar sign in the script 
    // around where you define your plugin (other libraries, etc.) 
(function($){ 

    // Adding your plugin to jQuery 
    $.fn.yourPlugin = function() { 

     // Maintain chainability 
    return this.each(function() { 

     // ... 

    }); 

    }; 
}(jQuery)); 

Il y a beaucoup d'autres grands informations sur cette page de création de plug-in. Ce qui précède est juste les os nus. Il y a des informations sur les valeurs par défaut et les options, les espaces de noms, et bien d'autres choses. De plus, si vous êtes préoccupé par l'affrontement de vos variables, vous pouvez également utiliser des fermetures pour votre propre code "normal" ... et pas seulement pour les plugins jQuery.Pour ce faire, placez votre script dans un self invoking anonymous function:

(function() { 
    var ... // these vars will not clash with 
      // anything outside this anonymous function 

    // You can do your jQuery in here if you need to access 
    // the local vars: 
    $(function() { ... }); 

}()); 

Par exemple:

// global 'clash' 
var clash = "test"; 

(function() { 
    // local 'clash' 
    var clash = "something else"; 
    // this 'clash' shadows but doesn't change the global 'clash' 
}()); 

alert(clash); 
// The global 'clash' has stayed unaffected by the local `clash` 
// Output: test 

jsFiddle example

Answer 2

Vous pouvez ajouter des méthodes plug-in sans utiliser la méthode extend:

jQuery.fn.myPlugin = function(opts) { ... } 

Vous pouvez utiliser le prolongez: si vous êtes à la recherche d'étendre l'objet jQuery avec de multiples fonctions vous feriez:

jQuery.extend({ 
    funcName: function(){ 
     //function code 
    }, 
    funcName2: function(){ 
     //function code 
    } 
}); 

« jQuery.extend ajoute un ensemble de propriétés à l'objet jQuery. jQuery.fn.extend ajoute un ensemble de propriétés à l'objet jQuery.fn (qui est alors $ par accessiblement(). Foo). »

jQuery.fn est un raccourci pour jQuery.prototype.

la documentation officielle sur les plugins: http://docs.jquery.com/Plugins/Authoring

Mike Alsup a ce bon tutoriel/modèle discussion: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

EDIT: une autre note, faites attention de vos noms avec l'utilisation des emballeurs/minimiseurs - test sur l'un des votre choix à cet égard