Far ereditare ad un oggetto i metodi di jQuery (subclassing)

James Padolsey ha pubblicato due mesi fa un interessante esperimento sul modo di estendere un oggetto ereditando metodi e proprietà direttamente da jQuery. In altre parole, qualsiasi oggetto potrà con questa tecnica ereditare ed usare tutte le funzionalità di jQuery. Le implicazioni di questa tecnica, nota come subclassing, sono notevoli se si pensa alla possibilità di includere jQuery nel namespace di qualsiasi oggetto o classe. Vediamone i dettagli.

Ecco il codice dell'oggetto Interface:

jQuery.Interface = (function(){

    function JQInterface() {}

    JQInterface.fn = JQInterface.prototype = jQuery([]);
    JQInterface.prototype.fn = JQInterface.fn;

    JQInterface.prototype.setDOM = function(s, c) {

        var jq = jQuery(s, c);

        for (var l = this.length = jq.length; l--;) {
            this[l] = jq[l];
        }

    };

    JQInterface.prototype.pushStack = function() {

        var ret = jQuery.fn.pushStack.apply(this, arguments),
            l = ret.length,
            same = true;
            
        // If all elements within the returned jQ obj are the
        // same then we can return `this` (sub class instance)
        // Otherwise, just return the jQ obj

        while (same && l--) {
            same = same && this[l] === ret[l];
        }

        return same ? this : ret;

    };

    return JQInterface;

}());

Tutto avviene in queste tre righe:

function JQInterface() {}

JQInterface.fn = JQInterface.prototype = jQuery([]);
JQInterface.prototype.fn = JQInterface.fn;

L'oggetto restituito, JQInterface, viene normalizzato nella sua proprietà prototype tramite l'intero oggetto jQuery, invocato con un set vuoto.

Possiamo quindi definire un nuovo oggetto in questo modo:

function WordList() {

    this.setDOM('<ul></ul>');
    this.words = [];

}

E quindi collegarlo a jQuery:

WordList.prototype = new jQuery.Interface;

Ora l'oggetto WordList possiede tutti i metodi di jQuery, che possono essere sovrascritti. Ad esempio:

WordList.prototype.append = function(word) {

    // Overriding append.

    this.words.push(word);
    return this.fn.append.call(this, word);

};

In questo caso è stato sovrascritto il metodo append() per farlo funzionare sugli array quando questo normalmente opera invece sul DOM. Ricordate che ora WordList.fn è un alias di WordList.prototype che a sua volta punta alla medesima proprietà di jQuery.

Riassumendo: tramite il costrutto jQuery([]) collegato alla proprietà prototype di un oggetto, l'oggetto in questione eredita tutti i metodi disponibili in jQuery.