Fonction javascript et Plugin jQuery

Snippet pour commencer un script sous forme de plugin jQuery

;
(function($, window, undefined) {
    /* JSlint */
    'use strict';

    /* Lors de l'appel */
    $.maFonction = function(options, element) {
        // Enregistrement des élements fournie lors de l'appel du plugin
        // exemple $('p').maFonction(); , ici l'elément correspont au élement <p>
        this.$element = $(element);

        // déclencher le plugin avec cette première fonction
        this._init(options);
    };

    // the options
    $.maFonction.defaults = {
        'option1' : '',
        'option2' : 10,
        'option3' : false
        
    };

    $.maFonction.prototype = {
        
        // fonction déclencher, lors de l'appel du plugin
        _init: function(options) {

            // Associer les options fournie lors de l'appel et celle défini par défaut
            this.options = $.extend(true, {}, $.maFonction.defaults, options);

            // On appel une fonction qui déclare les variables utiles
            this._config();

            // Premier traitement 
            this._initCreation();

            // Permet de lancer les écoutes d'évenement
            this._initEvent();

        },

        // variables utiles
        _config: function() {
            this.variable1 = true;
            this.variable2 = 10;
        },

        // Premier traitement
        _initCreation: function() {
            // on duplique l'objet du plugin pour éviter de melanger les 'this'
            var self = this;
            
            // pour utiliser une variable déclarer dans le plugin
            self.variable1;
            
            // pour utiliser une options du plugin
            self.options.option1;
            

        },

        // fonction de traitement
        _traitement: function() {
            // on duplique l'objet du plugin pour éviter de melanger les 'this'
            var self = this;
            
        
        },

        // fonction pour lancer l'écoute des évenements
        _initEvent: function() {
            // on duplique l'objet du plugin pour éviter de melanger les 'this'
            var self = this,

            // evenement clic
            $('body').on('click', '.elements', function() {
                // élement de l'evenement
                var _this = $(this);
                // executer vos fonctions de traitement plutôt qu'écrire du script directement ici
                // exemple : 
                self._traitement();

                return false;
            });
            
            $('body').on('focus', '.elements', function() {
                // élement de l'evenement
                var _this = $(this);

                // executer vos fonctions de traitement plutôt qu'écrire du script directement ici
                // exemple : 
                self._traitement();

                return false;
            });
        },
        
    };

    /* 
     * Permet des déclarer un nouveau plugin de jQuery 
     */

    $.fn.maFonction = function(options) {
        if (typeof options === 'string') {
            var args = Array.prototype.slice.call(arguments, 1);
            this.each(function() {
                var instance = $.data(this, 'maFonction');
                if (!instance) {
                    logError("ne peut pas appeler des méthodes sur maFonction avant l'initialisation; " +
                            "tenté d'appeler la méthode '" + options + "'");
                    return;
                }
                if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
                    logError("Aucune de ces méthodes '" + options + "' par exemple de maFonction");
                    return;
                }
                instance[ options ].apply(instance, args);
            });
        }
        else {
            this.each(function() {
                var instance = $.data(this, 'maFonction');
                if (instance) {
                    instance._init();
                }
                else {
                    instance = $.data(this, 'maFonction', new $.maFonction(options, this));
                }
            });
        }
        return this;
    };

})(jQuery, window);

Leave feedback about this

  • Rating
Choose Image