jQuery - bonne façon de créer le plugin

Question

Je suis en train de convertir une partie de mon code pour les plugins réutilisables. Plusieurs fois, je remplis des sélections avec des options dynamiques qui viennent de la requête Ajax.

J'ai réussi à créer quelque chose comme ceci:

$.fn.fillSelect = function fillSelect(options) { 
var self = this; 
options = $.extend({ 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: "Data.asmx/StatusList", 
    dataType: "json", 
    async: true, 
    success: function(data) { 
     var list = ""; 
     $.each(data.d, function(i) { 
      list += '<option value=' 
          + data.d[i].ID + '>' 
          + data.d[i].Nazwa 
          + '</option>'; 
     }); 
     self.filter("select").each(function() { 
      $(this).empty(); 
      $(this).append(list); 
      //use selectmenu 
      if ($.ui.selectmenu) $(this).selectmenu(); 
     }); 
    }//, 
    //error: function(result) { 
    // alert("Error loading data!"); 
    //} 
}, options); 
$.ajax(options); 
return self; 
} 

idée derrière cela est de pouvoir remplir les sélections multiples avec les mêmes données à plusieurs reprises avec une demande.
J'ai des options par défaut pour la requête Ajax, mais j'aimerais y ajouter d'autres options.
Par exemple:
clair - remplir déterminé si je veux de nouvelles options pour remplacer celles qui existent déjà ou ajouter.

Aussi je voudrais ajouter quelques callbacks à ma fonction que je pouvais passer en tant que paramètres. Si, par exemple, la requête du serveur échoue, je voudrais spécifier une fonction qui sera appelée après que cette erreur se soit produite - par exemple pour afficher une alerte ou désactiver mes sélections.

Ma question est de savoir comment devrais-je changer mon plug-in ou quel modèle (passe-partout) je devrais utiliser?

Chaque boilerplate j'ai trouvé est pour la création de plugins qui « restent » à l'intérieur de l'élément sélectionné, de sorte qu'il est possible d'appeler la méthode de ce plug-in plus tard.

je besoin d'un simple plugin qui permettra à l'utilisateur de remplir de sélection, puis il prendra fin c'est la vie :)

Mon idée principale est de faire qu'une seule demande au serveur pour tous les éléments.

---

Voici jsFiddle Démo: http://jsfiddle.net/JC7vX/2/

Answer 1

C'est ma version de réponse http://jsfiddle.net/Misiu/ncWEw/

Mon plug-in ressemble à ceci:

(function($) { 
$.fn.ajaxSelect = function(options) { 
    var $this = this; 
    //options 
    var settings = $.extend({}, defaults, options); 
    //disable select 
    if ($.ui.selectmenu && settings.selectmenu && settings.disableOnLoad) { 
     $this.selectmenu('disable'); 
    } 
    //ajax call 
    $.ajax({ 
     type: settings.type, 
     contentType: settings.contentType, 
     url: settings.url, 
     dataType: settings.dataType, 
     data: settings.data 
    }).done(function(data) { 
     var n = data.d || data; 
     var list = ""; 
     $.each(n, function(i) { 
      list += '<option value=' + n[i].Id + '>' + n[i].Nazwa + '</option>'; 
     }); 
     $this.filter("select").each(function() { 
      $(this).empty(); 
      $(this).append(list); 
      if ($.ui.selectmenu && settings.selectmenu) { 
       $this.selectmenu(); 
      } 
      settings.success.call(this); 
     }); 
    }).fail(function() { 
     settings.error.call(this); 
    }); 

    return this; 
}; 

var defaults = { 
    type: "POST", 
    contentType: "application/json; charset=utf-8", 
    url: '/echo/json/', 
    dataType: 'json', 
    data: null, 
    async: true, 
    selectmenu: true, 
    disableOnLoad: true, 
    success: function() {}, 
    error: function() {} 
}; 
})(jQuery); 

Je comprends qu'il est très simple, mais il a toutes les fonctionnalités que je avais besoin:
-Vous pouvez sélectionner plusieurs éléments à la fois
-Il filtre seulement parmi les éléments sélectionnés
-Il ne fait qu'une seule demande au serveur
-Premier il builds chaîne d'option, puis l'ajouter au lieu d'ajouter des éléments dans la boucle
-Vous pouvez spécifier 2: une pour callbacks erreur et seconde pour le succès

Et c'est mon premier plug-in, donc il y a beaucoup de places améliorations

commentaires Comme chaque année et conseils sont les bienvenus!

Answer 2

Un plugin de base peut être construit comme suit

(function ($){ 
    $.fn.yourPlugin = function (options){ 
     // this ensures that function chaining can continue 
     return this.each(function(){ 
      // merge defaults and user defined options 
      var params = $.extend({},defaultOptions,options); 
      // your plugin code 
     }); 
    } 

    /* these options will help define the standard functionality of the plugin, 
    * and also serves as a nice reference 
    */ 
    var defaultOptions = { 
     someProperty : true 
    } 
})(jQuery) 

Il y a d'autres choses que vous pouvez faire pour étendre les fonctionnalités de votre plugin et donnez des méthodes publiques qui conservent le contexte, mais ce serait exagéré pour votre exemple.