Как я могу подражать API-интерфейсу JQuery?

Question

Я уже писал базовые плагины 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. Я просто не вижу, как!

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

Answer 1

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

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

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

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