¿Cómo puedo emular la API de Jquery UI?

Question

He escrito complementos jQuery básicos antes, pero estoy luchando para entender algo más complejo. Busco para emular la API de jQuery UI, que funciona así:

$('#mydiv').sortable({name: 'value'}); // constructor, options 
$('#mydiv').sortable("serialize"); // call a method, with existing options 
$('#mydiv').sortable('option', 'axis', 'x'); // get an existing option 

He intentado lo siguiente:

(function($){ 
    $.fn.myPlugin = function(cmd){ 
     var config = { 
      default: 'defaultVal' 
     }; 

     if(typeof cmd === 'object'){ 
      $.extend(config, cmd); 
     } 

     function _foo(){ 
      console.log(config.default); 
     } 

     if(cmd==='foo'){ 
      return _foo(); 
     } 

     this.each(function(){ 
      // do default stuff 
     }); 
    } 
})(jQuery); 

$('#myElement').myPlugin({default: 'newVal'}); 
$('#myElement').myPlugin('foo'); 

Lo que me gustaría ver aquí es 'valorNuevo' siendo registrado, pero estoy viendo 'defaultVal' en su lugar; el complemento se está iniciando desde cero cada vez que llamo .myPlugin() al elemento.

También he intentado usar _foo.call (esto) y algunas otras variantes. Sin alegría.

En cierto modo, entiendo por qué sucede esto, pero sé que debe ser posible hacerlo de la misma manera que jQuery UI. ¡No puedo ver cómo!

(Soy consciente de que jQuery UI utiliza la fábrica widget para manejar todo esto, pero no quiero hacer que un requisito para el plugin.)

Answer 1

Tal vez lo que quiere decir esto ...

(function($){ 

    var config = { 
     default: 'defaultVal' 
    }; 

    $.fn.myPlugin = function(cmd){ 

     if(typeof cmd === 'object'){ 
      $.extend(config, cmd); 
     } 

     function _foo(){ 
      console.log(config.default); 
     } 

     if(cmd==='foo'){ 
      return _foo(); 
     } 

     this.each(function(){ 
      // do default stuff 
     }); 
    } 
})(jQuery); 

$('#myElement').myPlugin({default: 'newVal'}); 
$('#myElement').myPlugin('foo'); 

Mueva la variable config fuera de la función myPlugin. Este cambio hará que config se inicialice solo una vez: cuando se crea su función de complemento.

Answer 2

Estás declarando config durante la llamada a la función en lugar de como un cierre utilizado por él. Prueba esto:

(function($){ 
    var config = { 
     default: 'defaultVal' 
    }; 
    $.fn.myPlugin = function(cmd){ 

     if(typeof cmd === 'object'){ 
      $.extend(config, cmd); 
     } 

     function _foo(){ 
      console.log(config.default); 
     } 

     if(cmd==='foo'){ 
      return _foo(); 
     } 

     this.each(function(){ 
      // do default stuff 
     }); 
    } 
})(jQuery); 

$('#myElement').myPlugin({default: 'newVal'}); 
$('#myElement').myPlugin('foo'); 

Además, usted podría mirar en el jQuery data API de almacenamiento en caché de datos, especialmente si usted no va a tener sólo una instancia por página.