Quelles sont les méthodes pour créer un plug-in jquery ? Comment créer un plug-in jquery

Ce que cet article vous apporte, c'est quelles sont les méthodes de création de plug-ins jquery ? La méthode de création du plug-in jquery a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

1. Il existe trois façons de créer un plug-in jQuery

1. Étendre jQuery via $.extend()

2. Ajoutez-en de nouveaux à jQuery via $. Méthode .fn

3. Utilisez la méthode de fabrique de widgets de jQuery UI pour créer

via $.widget(). La méthode 1 est trop simple. Elle est appelée via $.myfunction() après la création et. ne peut pas être appelé sur l'élément spécifié.

La méthode 3 est trop compliquée par rapport à la méthode 2.

La méthode 2 est la méthode couramment utilisée pour créer des plug-ins jq. Peut opérer sur des éléments spécifiés. Par exemple $('#title').myfunction();

2. Format de création de plug-in jQuery

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

Si vous souhaitez prendre en charge les appels en chaîne, renvoyez-le simplement.

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    return this.css('color', 'red');
}

3. Laissez le plug-in jquery accepter les paramètres et utilisez la méthode $.extend

$.fn.myPlugin = function(options) {
    var defaults = {//设置默认值
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改，为了保持变量defaults的值不变应该使用以下代码
    //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

4. Développement de plug-in jquery orienté objet

Pour la maintenance et la lisibilité futures du code Nous pouvons développer des plug-ins en utilisant une approche orientée objet.

var Beautifier = function(ele, opt) {
    this.$element = ele,  //获取当前选中的jq对象。
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}

Recommandations associées :

Plug-in de défilement simple jQuery

Analyse du code du plug-in de création jQuery_jquery

Explication détaillée des méthodes de développement de plug-ins jQuery

10 suggestions pour vous aider à créer de meilleurs plug-ins jQuery_jquery

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!