$.extend() avec des fonctions

Je suis en train d'écrire un plugin jQuery qui ont besoin de fonctions de rappel qui sont exécutées, par exemple, lorsqu'une option est choisie à partir de la <select> le plugin est appliqué.

J'ai vu des plugins qui vous permettent de définir des fonctions dans les options vous transmettre, comme ceci:

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

Je veux être en mesure de définir une valeur par défaut someEvent fonction dans mon code du module, mais si l'utilisateur définit cette fonction dans les options qu'ils passent, il doit remplacer la fonction par défaut. Est-ce possible avec $.extend(), ou suis-je regarde dans le mauvais endroits?

J'ai eu un coup d'oeil à la plugin de création de tutoriel, mais je ne pense pas qu'il va le comportement par défaut de fonctions n'importe où. J'ai lu des choses sur l'utilisation d'un init: fonction, mais je préfère juste être en mesure de définir une fonction (à l'intérieur de le plugin espace de noms) et de le modifier avec les options passées à la plugin.

Désolé, c'était plus d'une frustration personnelle commentaire. Sera supprimer.
En JavaScript (contrairement à la plupart des autres grandes langues actuelles), les fonctions sont des objets de première classe. Cela signifie que vous pouvez faire la même chose avec les références de fonction que vous pouvez faire avec n'importe quel autre type d'objet de référence, y compris le présent. Les réponses montrent comment, mais le point essentiel à retenir est que la fonction de références sont des valeurs comme les références de l'objet (parce qu'ils sont les références de l'objet). C'est extrêmement utile. 🙂
Merci beaucoup pour l'explication.

InformationsquelleAutor Bojangles | 2011-12-04

Voici un exemple:

(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 vous ne spécifiez pas someEvent lorsque le câblage en place le plugin, la valeur par défaut sera utilisée.

Viens de comprendre quelque chose, j'ai pensé partager -- d'avoir 'div.foo' à la disposition de la someEvent fonction, de passer de "ce" sans les guillemets comme un paramètre. Violon - jsfiddle.net/taytayevanson/LY3K7

InformationsquelleAutor Darin Dimitrov

En javascript, les fonctions sont des objets de première classe. Ce qui signifie, vous pouvez utiliser des fonctions comme vous le feriez de toute autre 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'

Comme vous pouvez le voir, les fonctions sont juste comme n'importe quelle autre valeur. Ainsi, vous pouvez définir une option par défaut qui sera une fonction, et de le remplacer comme rien d'autre.

$.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 exemple artificiel, mais je pense que ça illustre bien le propos.

InformationsquelleAutor Zirak

Oui, vous pouvez étendre les objets qui ont les valeurs de la fonction.

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 il n'y a souvent pas de différence pratique entre les fonctions et d'autres valeurs, de sorte que vous pouvez traiter des fonctions comme vous le feriez avec d'autres objets ou de types de données.

InformationsquelleAutor JJJ

Vous devez vous connecter pour publier un commentaire.