Creación de un plugin de jQuery, ¿Cómo lo hago ámbitos personalizados?

Question

Me gustaría crear un plugin de jQuery con un API de algo como esto:

$("#chart").pluginName().attr("my_attr");

En lugar de estos:

$("#chart").pluginName_attr("my_attr");
$.pluginName.attr("#chart", "my_attr");

Básicamente, en lugar de tener que namespace cada método que actúa de forma similar a los de jQuery, me gustaría "alcance" de los métodos a una API personalizada, donde $("#chart).pluginName() devolvería un objeto tal que get, attr, find, y algunos otros se reescrito por completo.

Estoy seguro de que esto no es una idea muy querido, ya que rompe la convención (¿verdad?), Pero es más fácil y más fácil de leer, y probablemente más optimizado, que las dos opciones anteriores. ¿Cuáles son sus pensamientos?

Answer 1

estoy experimentando con la idea.

Parece que usted podría modificar las funciones del objeto jQuery que el plugin recibe, y devolver eso.

Algo como esto:

$.fn.tester = function() {  // The plugin

    this.css = function() {  // Modify the .css() method for this jQuery object
        console.log(this.selector);   // Now it just logs the selector
        return this;     // Return the modified object
    }
    return this;   // Return the modified object

}

---

http://jsfiddle.net/EzzQL/1/ (actualizado desde original, para sobrescribir .html () también)

$.fn.tester = function() {
    this.css = function() {  
        console.log(this.selector);  // This one logs the selector
        return this;
    }
    this.html = function() {
        alert(this.selector); // This one alerts the selector
        return this;
    }
    return this;
};

// Because .css() and .html() are called after .tester(),
// they now adopt the new behavior, and still return a jQuery
//    object with the rest of the methods in tact
$('#test1').tester().css().html().animate({opacity:.3}); 


// .css() and .html() still behave normally for this one
//    that doesn't use the plugin
$('#test2').css('backgroundColor','blue').html('new value');​

---

EDIT:

Por otra parte, si se va a almacenar en caché los elementos a los que han de aplicarse los métodos personalizados, que podría .apply() los métodos antes de utilizarlos.

Para construir en el ejemplo anterior:

var $test1 = $('#test1');  // Cache the elements

$.fn.tester.apply($test1,[this]);  // apply() the new methods

$test1.css().html().animate({opacity:.3});  // Use the new methods