Как я могу эмулировать UI JQuery API?

Я записал основные плагины jQuery прежде, но я изо всех сил пытаюсь получить голову вокруг чего-то более сложного. Я надеюсь эмулировать API jQuery UI, который работает как это:

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

Я попробовал следующее:

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

Что я хотел бы видеть, вот 'newval' быть зарегистрированным, но я вижу 'defaultVal' вместо этого; плагин называют и запускают с нуля каждый раз, когда я называю .myPlugin () на элементе.

Я также попытался использовать _foo.call (это) и некоторые другие варианты. Никакая радость.

В некотором смысле, я понимаю, почему это происходит, но я знаю, что должно быть возможно сделать это тот же путь как jQuery UI. Я просто не вижу как!

(Я ценю тот UI jQuery использование фабрика виджета для обработки все это, но я не хочу делать это требованием для плагина.)

5
задан John McCollum 25 April 2012 в 15:13
поделиться

2 ответа

Возможно, вам нужно это ...

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

Переместите переменную config за пределы функции myPlugin . Это изменение вызовет инициализацию config только один раз: при создании функции вашего плагина.

4
ответ дан 14 December 2019 в 13:34
поделиться

Вы объявляете config во время вызова функции , а не как закрытие, используемое ею. Попробуйте следующее:

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

Кроме того, вы можете изучить API данных jQuery для кэширования данных, особенно если вы не собираетесь иметь только один экземпляр на страницу.

2
ответ дан 14 December 2019 в 13:34
поделиться
Другие вопросы по тегам:

Похожие вопросы: