jquery - method - $.extend() con funciones

jquery clone object extend

Question

Estoy escribiendo un complemento jQuery que necesitará funciones de devolución de llamada que se ejecutan, por ejemplo, cuando se elige una opción de <select> la que se aplica el complemento.

He visto complementos que te permiten definir funciones en las opciones que pasas, como esta:

$(''div.foo'').pluginBar({ 
    option1: ''red'',
    someEvent: function() {
        // Do stuff
    }
});

Quiero poder definir una función predeterminada de someEvent en mi código de complemento, pero si el usuario define esa función en las opciones que pasan, debe sobrescribir la función predeterminada. ¿Es esto posible con $.extend() , o estoy buscando en lugares equivocados?

He echado un vistazo al tutorial de creación de complementos , pero no creo que cubra la extensión del comportamiento predeterminado de las funciones en cualquier lugar. He leído cosas sobre el uso de una función init: pero prefiero poder definir una función ( dentro del espacio de nombres del complemento) y cambiarla con las opciones que se pasaron al complemento.

Answer 1

Aquí hay un ejemplo:

(function( $ ) {
  $.fn.pluginBar = function(options) {
      var settings = $.extend( {
          someEvent: function() {
              alert(''default'');
          }
      }, options);

      return this.each(function() {
          settings.someEvent();
      });
  };
})( jQuery );

$(''div.foo'').pluginBar({ 
    option1: ''red'',
    someEvent: function() {
        alert(''custom'');
    }
});

Si no especifica someEvent al conectar el plugin, se usará el predeterminado.

Answer 2

Sí, puede extender objetos que tienen valores de función.

var originalFunction = function() { 
    alert( ''original'' );
}

var a = { 
    foo: ''bar'', 
    func: originalFunction 
};

var b = { 
    foo: ''baz'', 
    func: function() { 
        alert( ''ok'' ); 
    } 
};

var c = $.extend( {}, a, b );

c.func();    // alerts ''ok''

En JavaScript a menudo no existe una diferencia práctica entre las funciones y otros valores, por lo que puede tratar las funciones como lo haría con otros objetos o tipos de datos.

Answer 3

En javascript, las funciones son objetos de primera clase. Es decir, puede usar funciones como lo haría con cualquier otra variable:

//making an anonymous function, and assigning it to a variable
var meep = function () {
    return ''meep'';
};

//passing a function as a parameter
[ ''moop'' ].map( meep ); //[''meep'']

//assigning it in an object literal
var weirdNoises = {
    ''meep'' : meep,

    ''slarg'' : function () {
        return ''slarg'';
    }
};

weirdNoises.meep(); //''meep''
weirdNoises.slarg(); //''slarg''

//you can also return functions
function meeper () {
    return meep;
}
function slarger () {
    return function () {
        return ''slarg'';
    };
}

//meeper returns a function, so the second () means "execute the function
// that was returned"
meeper()(); //''meep''
slarger()(); //''slarg''

Como puede ver, las funciones son como cualquier otro valor. Por lo tanto, puede definir una opción predeterminada que será una función y anularla como cualquier otra cosa.

$.fn.weirdNoise = function ( options ) {
    var defaults = {
        makeNoise : function () {
            return ''Rabadabadaba'';
        },
        isSilly : true
    };

    return $.extend( defaults, options );
};

var raba = $( ''foobar'' ).weirdNoise().makeNoise();
raba.makeNoise(); //''Rabadabadaba''
raba.isSilly; //true

var shaba = $( ''foobar'' ).wierdNoise({
    makeNoise : function () {
        return ''Shabadabadoo'';
    }
});
shaba.makeNoise(); //''Shabadabadoo''
shaba.isSilly; //true

Un ejemplo artificial, pero creo que ilustra el punto.