Tutoriel de développement de plug-ins jQuery

L'extension des plug-ins et des méthodes jQuery est très puissante et peut faire gagner beaucoup de temps de développement. Cet article décrit les bases, les meilleures pratiques et les pièges courants du développement de plugins jQuery.

1. Mise en route

L'écriture d'un plug-in jQuery commence par l'ajout de nouveaux attributs fonctionnels à jQuery.fn Le nom de l'attribut d'objet ajouté ici est le nom. de votre plug-in. :

Le code est le suivant :

jQuery.fn.myPlugin = function(){
  //你自己的插件代码
};

Où est le symbole $ que les utilisateurs aiment tant ? Il existe toujours, mais afin d'éviter les conflits avec d'autres bibliothèques JavaScript, il est préférable de transmettre jQuery à un programme fermé auto-exécutable, où jQuery est mappé sur le signe $, afin d'éviter que le signe $ ne soit écrasé par d'autres bibliothèques. .

Le code est le suivant :

(function ($) {
    $.fn.myPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

Dans ce programme fermé, on peut utiliser le symbole $ sans restriction pour représenter les fonctions jQuery.

2. Environnement

Maintenant, nous pouvons commencer à écrire le code du plug-in. Cependant, avant cela, il faut avoir une idée de l’environnement dans lequel se trouve le plug-in. Dans le cadre du plug-in, le mot-clé this représente l'objet jQuery que le plug-in exécutera. Un malentendu courant est facile à survenir ici, car dans d'autres fonctions jQuery qui contiennent des rappels, le mot-clé this représente l'élément DOM natif. . Cela amène souvent les développeurs à envelopper par erreur le mot-clé this dans jQuery inutilement, comme indiqué ci-dessous.

Le code est le suivant :

(function ($) {
    $.fn.myPlugin = function () {
        //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));
        this.fadeIn('normal', function () {
            //此处callback函数中this关键字代表一个DOM元素
        });
    };
})(jQuery);
$('#element').myPlugin();

3. Connaissances de base

Maintenant que nous comprenons les bases du plug-in jQuery, écrivons un. branchez-vous et faites quelque chose.

Le code est le suivant :

(function ($) {
    $.fn.maxHeight = function () {
        var max = 0;
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

Il s'agit d'un simple plug-in qui utilise .height() pour renvoyer la hauteur de l'élément div ayant la plus grande hauteur sur la page.

4. Maintenir la chaînabilité

Souvent, l'intention d'un plug-in est simplement de modifier les éléments collectés d'une manière ou d'une autre et de les transmettre. passez-les à la méthode suivante de la chaîne. C'est la beauté du design de jQuery et l'une des raisons pour lesquelles jQuery est si populaire. Par conséquent, pour maintenir la chaînabilité d'un plugin, vous devez vous assurer que votre plugin renvoie le mot-clé this.

Le code est le suivant :

(function ($) {
    $.fn.lockDimensions = function (type) {
        return this.each(function () {
            var $this = $(this);
            if (!type || type == 'width') {
                $this.width($this.width());
            }
            if (!type || type == 'height') {
                $this.height($this.height());
            }
        });
    };
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');

Puisque le plugin renvoie ce mot-clé, il maintient la chaînabilité, afin que les éléments collectés par jQuery puissent continuer à être contrôlés par les méthodes jQuery telles que .css. Par conséquent, si votre plugin ne renvoie pas de valeur intrinsèque, vous devez toujours renvoyer le mot-clé this dans sa portée. De plus, vous pouvez en déduire que les paramètres transmis à un plugin seront transmis dans la portée du plugin. Par conséquent, dans l'exemple précédent, la chaîne 'width' devient un paramètre de type du plugin.

5. Valeurs et options par défaut

Pour les plug-ins plus complexes offrant de nombreuses options personnalisables, il est préférable d'avoir une fonction qui peut être utilisée lorsque le plug-in est appelé. Les paramètres par défaut sont étendus (en utilisant $.extend). Ainsi, au lieu d'appeler un plugin avec un tas de paramètres, vous pouvez l'appeler avec un paramètre d'objet contenant les paramètres que vous souhaitez remplacer.

Le code est le suivant :

(function ($) {
    $.fn.tooltip = function (options) {
        //创建一些默认值，拓展任何被提供的选项
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
        return this.each(function () {
            // Tooltip插件代码
        });
    };
})(jQuery);
$('div').tooltip({
    'location': 'left'
});

Dans cet exemple, lors de l'appel du plug-in d'info-bulle, l'option d'emplacement dans les paramètres par défaut est écrasée et l'option de couleur d'arrière-plan reste à sa valeur valeur par défaut, donc le paramètre qui est finalement appelé La valeur est :

Le code est le suivant :

{
    'location': 'left',
    'background-color': 'blue'
}

C'est une manière très flexible de fournir un plugin hautement configurable sans que le développeur ait à le faire définir toutes les options disponibles.

6. Espace de noms

Nommer correctement votre plug-in est une partie très importante du développement de plug-ins. Avec le bon espace de noms, vous pouvez garantir que votre plugin aura très peu de chances d'être écrasé par d'autres plugins ou par un autre code sur la même page. Les espaces de noms vous facilitent également la vie en tant que développeur de plugins, car ils vous aident à mieux suivre vos méthodes, vos événements et vos données.

7. Méthodes du plug-in

Dans tous les cas, un seul plug-in ne doit pas avoir plusieurs espaces de noms dans l'objet jQuery.fn jQuery.fn.

Le code est le suivant :

(function ($) {
    $.fn.tooltip = function (options) {
        // this
    };
    $.fn.tooltipShow = function () {
        // is
    };
    $.fn.tooltipHide = function () {
        // bad
    };
    $.fn.tooltipUpdate = function (content) {
        // !!!
    };
})(jQuery);

Ceci est déconseillé car $.fn encombre l'espace de noms $.fn. Pour résoudre ce problème, vous devez collecter toutes les méthodes du plugin dans le texte de l'objet et les appeler en transmettant le nom de chaîne de la méthode au plugin.

Le code est le suivant :

(function ($) {
    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };
    $.fn.tooltip = function (method) {
        // 方法调用
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method' + method + 'does not exist on jQuery.tooltip');
        }
    };
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
    foo: 'bar'
});
// 调用hide方法
$('div').tooltip('hide');
//调用Update方法
$('div').tooltip('update', 'This is the new tooltip content!');

Ce type d'architecture de plug-in permet d'encapsuler toutes les méthodes dans un package parent, en passant le nom de chaîne de la méthode et les paramètres supplémentaires requis par cette méthode. Appelez-les. Ce type d'encapsulation et d'architecture est standard dans la communauté des plug-ins jQuery et est utilisé par d'innombrables plug-ins, y compris les plug-ins et les widgets de l'interface utilisateur jQuery.

8. Événements

Une fonction peu connue de la méthode bind permet de lier des espaces de noms d'événements. Si votre plugin lie un événement, une bonne pratique consiste à créer un espace de noms pour cet événement. De cette façon, lorsque vous dissocierez, vous n'interférerez pas avec d'autres événements du même type qui pourraient déjà être liés. Vous pouvez le faire en ajoutant l'espace de noms à l'événement que vous devez lier via '.02886250fede5e11b96f10e832d0cd33'.

Le code est le suivant :

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                $(window).bind('resize.tooltip', methods.reposition);
            });
        },
        destroy: function () {
            return this.each(function () {
                $(window).unbind('.tooltip');
            })
        },
        reposition: function () {
            //...
        },
        show: function () {
            //...
        },
        hide: function () {
            //...
        },
        update: function (content) {
            //...
        }
    };
    $.fn.tooltip = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };
})(jQuery);
$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');

在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后， 当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。

九、数据

通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data,  使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。

代码如下:

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                var $this = $(this),
                    data = $this.data('tooltip'),
                    tooltip = $(&#39;<div />&#39;, {
                        text: $this.attr(&#39;title&#39;)
                    });
                // If the plugin hasn&#39;t been initialized yet
                if (!data) {
                    /*
                     Do more setup stuff here
                     */
                    $(this).data(&#39;tooltip&#39;, {
                        target: $this,
                        tooltip: tooltip
                    });
                }
            });
        },
        destroy: function () {
            return this.each(function () {
                var $this = $(this),
                    data = $this.data(&#39;tooltip&#39;);
                // Namespacing FTW
                $(window).unbind(&#39;.tooltip&#39;);
                data.tooltip.remove();
                $this.removeData(&#39;tooltip&#39;);
            })
        },
        reposition: function () {
            // ...
        },
        show: function () {
            // ...
        },
        hide: function () {
            // ...
        },
        update: function (content) {
            // ...
        }
    };
    $.fn.tooltip = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === &#39;object&#39; || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error(&#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39;);
        }
    };
})(jQuery);

将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。

十、总结和最佳做法

编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：

1.始终包裹在一个封闭的插件：

代码如下:

(function($) {
/* plugin goes here */
})(jQuery);

2.不要冗余包裹this关键字在插件的功能范围内

3.除非插件返回特定值，否则总是返回this关键字来维持chainability 。

4.传递一个可拓展的默认对象参数而不是大量的参数给插件。

5.不要在一个插件中多次命名不同方法。

3.始终命名空间的方法，事件和数据。

推荐教程：《JS教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!