Как я могу эмулировать API Jquery UI? - PullRequest
Новая
       13

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

5 голосов
/ 23 февраля 2010

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

$('#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 (this) и некоторые другие варианты. Нет радости.

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

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

Ответы [ 2 ]

4 голосов
/ 23 февраля 2010

Возможно, что вы хотите, это ... 

(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 только один раз: при создании функции вашего плагина.

2 голосов
/ 23 февраля 2010

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

(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 для кэширования данных, особенно если у вас не будет только одного экземпляра на страницу.

...