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