Wie kann ich die Jquery UI API emulieren?

Question

Ich habe schon einmal grundlegende jQuery-Plugins geschrieben, aber ich kämpfe darum, etwas komplizierter zu machen. Ich suche die API von jQuery UI, die wie das funktioniert zu emulieren:

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

Ich habe versucht, die folgenden:

(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'); 

Was Ich mag würde hier zu sehen ist ‚newval‘ zu sein geloggt, aber ich sehe 'DefaultVal' stattdessen; Das Plugin wird jedes Mal aufgerufen und neu gestartet, wenn ich .myPlugin() für das Element aufruft.

Ich habe auch versucht mit _foo.call (this) und einigen anderen Varianten. Keine Freude.

In gewisser Weise verstehe ich, warum dies passiert, aber ich weiß, dass es möglich sein muss, es auf die gleiche Weise wie jQuery UI zu tun. Ich kann einfach nicht sehen, wie!

(Ich schätze, dass jQuery UI die Widget Fabrik nutzt all dies zu handhaben, aber ich will nicht für das Plugin, dass eine Anforderung machen.)

Answer 1

Vielleicht, was Sie wollen, ist dies ...

Verschieben Sie die config Variable außerhalb der myPlugin Funktion. Diese Änderung bewirkt, dass config nur einmal initialisiert wird: wenn Ihre Plugin-Funktion erstellt wird.

Answer 2

Sie erklärt Config während der Funktion Aufruf nicht als Verschluss von ihm verwendet. Versuchen Sie folgendes:

(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'); 

Darüber hinaus können Sie in die jQuery data API für Caching von Daten aussehen könnte, vor allem, wenn Sie nicht nur eine Instanz pro Seite haben werden.