Wie kann ich die Jquery UI API emulieren?

Question

Ich habe grundlegende jQuery-Plugins vor geschrieben, aber ich bin kämpfen, um meinen Kopf um etwas komplexer zu bekommen. Ich bin auf der Suche, um die API von jQuery UI zu emulieren, die wie folgt funktioniert:

$('#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 Folgendes ausprobiert:

(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 hier sehen möchte, ist, dass 'newval' protokolliert wird, aber ich sehe stattdessen 'defaultVal'; das Plugin wird jedes Mal, wenn ich .myPlugin() auf dem Element aufrufe, aufgerufen und von vorne begonnen.

Ich habe auch versucht, _foo.call(this) und einige andere Varianten zu verwenden. Keine Freude.

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

(Ich schätze, dass jQuery UI die Widget-Fabrik verwendet, um all dies zu handhaben, aber ich möchte nicht, dass eine Anforderung für das Plugin zu machen).

Answer 1

Was Sie vielleicht wollen, ist 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');

Bewegen Sie die config Variable außerhalb der myPlugin Funktion. Diese Änderung wird dazu führen, dass config nur einmal initialisiert werden: wenn Ihre Plugin-Funktion erstellt wird.

Answer 2

Sie erklären, dass Konfiguration während der Funktion aufrufen und nicht als ein von ihm verwendeter Verschluss. Versuchen Sie dies:

(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önnten Sie sich über die jQuery-Daten-API für die Zwischenspeicherung von Daten, vor allem, wenn Sie nicht nur eine Instanz pro Seite haben werden.