Domanda

Sto ancora cercando di capire procedura di plug-in  così posso scrivere il mio o adattare un altro.

cerco di imparare da questo plugin Essa stabilisce metodi con fn.extend e quindi si passa (con questo) ad una funzione realizzato in jquery.extend.

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },

Vedo anche altri plugin che non farlo.

Perché è che ?? o che cosa è l'idea alla base di esso.

(ho letto alcune altre spiegazioni, dicendo uno è utilizzato per funzioni e l'altro per i metodi, ma che è a vaga per me.)

Grazie, Richard

Modifica

completa codice del plugin wich utilizza due diversi estende

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },
    stopTime: function(label, fn) {
        return this.each(function() {
            jQuery.timer.remove(this, label, fn);
        });
    }
});

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
            if (value == undefined || value == null)
                return null;
            var result = this.regex.exec(jQuery.trim(value.toString()));
            if (result[2]) {
                var num = parseFloat(result[1]);
                var mult = this.powers[result[2]] || 1;
                return num * mult;
            } else {
                return value;
            }
        },
        add: function(element, interval, label, fn, times) {
            var counter = 0;

            if (jQuery.isFunction(label)) {
                if (!times) 
                    times = fn;
                fn = label;
                label = interval;
            }

            interval = jQuery.timer.timeParse(interval);

            if (typeof interval != 'number' || isNaN(interval) || interval < 0)
                return;

            if (typeof times != 'number' || isNaN(times) || times < 0) 
                times = 0;

            times = times || 0;

            var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});

            if (!timers[label])
                timers[label] = {};

            fn.timerID = fn.timerID || this.guid++;

            var handler = function() {
                if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
                    jQuery.timer.remove(element, label, fn);
            };

            handler.timerID = fn.timerID;

            if (!timers[label][fn.timerID])
                timers[label][fn.timerID] = window.setInterval(handler,interval);

            this.global.push( element );

        },
        remove: function(element, label, fn) {
            var timers = jQuery.data(element, this.dataKey), ret;

            if ( timers ) {

                if (!label) {
                    for ( label in timers )
                        this.remove(element, label, fn);
                } else if ( timers[label] ) {
                    if ( fn ) {
                        if ( fn.timerID ) {
                            window.clearInterval(timers[label][fn.timerID]);
                            delete timers[label][fn.timerID];
                        }
                    } else {
                        for ( var fn in timers[label] ) {
                            window.clearInterval(timers[label][fn]);
                            delete timers[label][fn];
                        }
                    }

                    for ( ret in timers[label] ) break;
                    if ( !ret ) {
                        ret = null;
                        delete timers[label];
                    }
                }

                for ( ret in timers ) break;
                if ( !ret ) 
                    jQuery.removeData(element, this.dataKey);
            }
        }
    }
});

jQuery(window).bind("unload", function() {
    jQuery.each(jQuery.timer.global, function(index, item) {
        jQuery.timer.remove(item);
    });
});
È stato utile?

Soluzione

E 'solo come funziona il meccanismo di plugin. È possibile creare i plugin jQuery estendendo la jQuery.fn oggetto con le proprie funzioni. Sia con l'aggiunta di funzioni direttamente all'oggetto jQuery.fn, o chiamando jQuery.fn.extend ()

Queste funzioni plugin vengono sempre passati all'oggetto jQuery (cioè la selezione degli elementi DOM fu invocato sono) come questo variabile.

Per esempio, diciamo che si desidera creare un plugin jQuery che mostra il numero di elementi in una serie DOM utilizzando un avviso:

$.fn.showCount = function() { 
   alert("Count = " + this.length); // "this" is a refernce to the jQuery object
}

o (che è esattamente lo stesso):

// $.fn.extend is just a convenience method for extending the jQuery.fn object
// It's also the same as calling $.extend($.fn, { ... })

$.fn.extend( {
                showCount: function() { 
                        alert("Count = " + this.length);
                }
             });

Così, quando si chiama:

$("a").showCount();

Si farà apparire un avviso che indica il numero di tag <a> nel documento.

Modifica :

Dopo aver visto il tuo codice, I pensare So quello che stai ricevendo in.

Quando si utilizza jQuery.extend () (non jQuery.fn.extend), non si sta creando un plugin REALE. Stai semplice fatto di creare una funzione globale o un oggetto, estranei a jQuery per sé.

In realtà, il plugin timer avrebbe potuto essere scritto così, e avrebbe fatto esattamente la stessa cosa:

var timerPlugin = {
       global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
           //...
        }
        // ...
  };

Poi (per esempio) si chiama timerPlugin.remove () al posto di jQuery.timer.remove () .

L'estensione dell'oggetto jQuery.fn è fatto per permettere di richiamare le proprie funzioni su oggetti jQuery. Per esempio:. $ ( "a") myplugin ()

La cosa da ricordare è che jQuery.extend () non ha nulla a che fare con jQuery o jQuery plugin. E 'semplicemente una funzione di utilità fornito dalla libreria jQuery.

Altri suggerimenti

Ci sono un paio di modi in cui è possibile definire i plugin

$.fn.myFunc=function(opt){

};

$.fn.myOtherFunc=function(opt){

};

è lo stesso di

$.fn.extend({
  myFunc:function(opt){

  },
  myOtherFunc:function(opt){

  }
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top