Guide de développement du plug-in jQuery_jquery

Alors tout d’abord, jetons un bref coup d’œil à la méthode de définition de plug-in jQuery la plus orthodoxe :

Copier le code Le code est le suivant :

(fonction ($) { 
$.fn.Nom du plug-in = fonction (paramètres) {                                               //Paramètres par défaut 
var defaultSettings = {

                                                                                                                                                                                                                                                                                      /* Fusionner les paramètres par défaut et les paramètres définis par l'utilisateur
settings = $.extend(defaultSettings, settings);

return this.each(function () {                                                                                                                                                                                                                                                                                             
} })(jQuery);



Regardons d'abord la première ligne de code du modèle (bien sûr, nous devons extraire la seconde moitié de cette ligne de code et la lire ensemble, sinon la première ligne n'aura aucun sens) :

Copier le code Le code est le suivant : (fonction ($) {

})(jQuery);



Cette ligne de code est en fait utilisée pour créer une fonction anonyme. Si vous ne comprenez pas les fonctions et les fermetures anonymes, vous serez très confus à propos de ce type de code, il est donc fortement recommandé de lire cet article [

Parler en détail des fonctions et des fermetures anonymes JavaScript].

La méthode d'héritage de jQuery $.extend —— $.extend joue un rôle très important dans le développement du plug-in jQuery, qui est utilisé pour fusionner les paramètres.

Copier le code Le code est le suivant : $.fn.tip = fonction (paramètres) { 

var defaultSettings = {                                              //Couleur 

couleur : 'jaune', 
//retard
délai d'attente : 200 >
/* Fusionner les paramètres par défaut et les paramètres définis par l'utilisateur */
settings = $.extend(defaultSettings, settings);
alert(settings.input);
}



Le plugin jQuery définit la deuxième manière :

Copier le code

Le code est le suivant :

(fonction ($) {
    //插件定义--更换名字
    $.fn.tabpanel = fonction (méthode) {
        var méthodes = $.fn.tabpanel.methods;
        if (méthodes[méthode]) {
            méthodes de retour[méthode].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methodes.init.apply(this, arguments);
        } autre {
 
        >
    >
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init : fonction (p_options) {
            tabpanelBind(p_options, this);
        },
        ajouter : fonction (p_options) {
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // débogueur
        }    }
    fonction ajouter(p_options) {
        var _defaults = {
            identifiant : ""
        >
   
　　　　//内部实现略.........
        retourner _index;
    >

})(jQuery);

调用  $("#team").tabpanel('add',"");

好了，上面介绍的这2种开发方式都是最常用的，小伙伴们先好好学习下吧，后续我们再介绍的更深入些