Introduction détaillée au développement de plug-ins jQuery

Avant-propos

Le développement de plug-ins jQuery comprend deux types :

1. Ajouter des méthodes statiques à jQuery

2. Prototype pour jQuery Ajouter une méthode

Ajouter une méthode statique à jQuery

1. Ajouter une nouvelle fonction globale directement

jQuery.foo = function() {
alert('This is a test. This is only a test.');
}

2. Utilisez jQuery.extend(object)

jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});

Pour certains plug-ins configurés globalement, vous pouvez les appeler dans le plug-in, afin de pouvoir référencer directement le javascript du plug-in sans appeler

Ajouter des méthodes au prototype de jQuery

Il s'agit de la méthode la plus couramment utilisée dans le développement de plug-ins

La forme la plus simple

(function($){       
    $.fn.pluginName = function() {     
         // code    
    };     
})(jQuery);

Contexte

Dans la portée immédiate de la fonction du plug-in, le mot-clé this pointe vers l'objet jQuery qui appelle le plug-in. Il n'est pas nécessaire de l'envelopper avec $

(function($){
    $.fn.pluginName = function() {      
        // 没有必要再写$(this)，因为"this"就是jQuery对象             
    };          
})(jQuery);

Pour maintenir. l'appel en chaîne

Afin de maintenir l'appel en chaîne, veuillez le renvoyer pour les plug-ins.

Définir les paramètres par défaut et les exposer

(function($){
    $.fn.pluginName = function(options) {    
        var opts = $.extend({}, $.fn.hilight.defaults, options);      
    };  

    $.fn.pluginName.defaults = {    
        foo: 'bar'   
    };                      
})(jQuery);

De cette façon, les utilisateurs peuvent soit transmettre des paramètres, soit modifier les paramètres par défaut en modifiant $.fn.pluginName.defaults

Exposer certains fonctions publiques

(function($){
    $.fn.pluginName = function(options) {    
        var opts = $.extend({}, $.fn.pluginName.defaults, options);      
    };  

    $.fn.pluginName.defaults = {    
        foo: 'bar'   
    };  

    $.fn.pluginName.foo = function() {    
        return 'bar';    
    };                  
})(jQuery);

afin que les utilisateurs puissent à la fois appeler des fonctions publiques et les modifier.

Une manière plus sûre d'écrire des fermetures

;(function($,window,document,undefined){
    $.fn.pluginName = function() {     
         // code    
    };
})(jQuery,window,document);

L'ajout de ";" permet d'éviter les erreurs causées par l'absence de ";" dans le code précédent du plug-in. l'ajout d'une fenêtre et d'un document est comme ça pour Windows et d'autres systèmes. Les variables ont une référence locale à l'intérieur du plug-in, ce qui peut améliorer la vitesse d'accès. En même temps, ces variables peuvent également être compressées en interne pour empêcher d'autres de s'y rendre accidentellement. modification non définie et provoquant des bugs de plug-in.

Plus

Ce qui suit provient du blog d'un internaute

(function () {   
    var Plugin,
        privateMethod;  //插件的私有方法
     
    /**
     * 这里是一个自运行的单例模式。
     * 
     */
    Plugin = (function () {
 
        /**
         * 插件实例化部分，初始化时调用的代码可以放这里
         */
        function Plugin(element, options) {
            //将插件的默认参数及用户定义的参数合并到一个新的obj里
            this.settings = $.extend({}, $.fn.plugin.defaults, options);
            //将dom jquery对象赋值给插件，方便后续调用
            this.$element = $(element);
             
        }
 
        /**
         * 插件的公共方法，相当于接口函数，用于给外部调用
         */
        Plugin.prototype.doSomething = function () {
            /**
             * 方法内容
             */
        };
         
        return Plugin;
 
    })();
 
    /**
     * 插件的私有方法
     */
    privateMethod = function () {
     
    };
 
    /**
     * 这里是关键
     * 定义一个插件 plugin
     */
    $.fn.plugin = function (options) {
        var instance;
        instance = this.data('plugin');
        /**
         *判断插件是否已经实例化过，如果已经实例化了则直接返回该实例化对象
         */
        if (!instance) {
            return this.each(function () {
                //将实例化后的插件缓存在dom结构里（内存里）
                return $(this).data('plugin', new Plugin(this, options));
            });
        }
        if (options === true) return instance;
        /**
         * 优雅处： 如果插件的参数是一个字符串，则 调用 插件的 字符串方法。
         * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
         * doSomething是刚才定义的接口。
         * 这种方法 在 juqery ui 的插件里 很常见。
         */
        if ($.type(options) === 'string') instance[options]();
        return this;
    };
     
    /**
     * 插件的默认值
     */
    $.fn.plugin.defaults = {
        property1: 'value',
        property2: 'value'
    };
 
    /**
     * 优雅处： 通过data-xxx 的方式 实例化插件。
     * 这样的话 在页面上就不需要显示调用了。
     */
    $(function () {
        return new Plugin($('[data-plugin]'));
    });   
}).call(this);

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!