元の質問:
注: 以下のプラグイン パターンは、公式の jQuery docsに基づいています。
立ち往生しています...以下のプラグインパターンを許可するように変換するにはどうすればよい$.hooplah.defaults.whoop = 'there it was';ですか?
;(function($) {
var config = {};
config.defaults = {
foo : 'bar',
hey : 'ho',
whoop : 'there it is'
};
$.fn.hooplah = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.hooplah.');
}
};
var methods = {
init: function(opts) {
return this.each(function() {
var options = $.extend({}, config.defaults, opts);
// Stuff here...
});
}
};
})(jQuery);
$('.foo').hooplah({ whoop: 'there is was' })最適には、 と の両方を実行したいと考えています$.hooplah.defaults.whoop = 'there it was';。
ヒント/コード/リンクは大歓迎です。:)
助けてくれてありがとう！
提案された解決策 #1
呼び出し構文:$.pluginName.defaults
@AmithGeorge の返信に基づくコード:
;(function($) {
var config = {};
config.others = {
blah : 'nah',
cha : 'right!',
last : 'one'
}
config.defaults = {
foo : 'bar',
hey : 'ho',
whoop : 'there it is'
};
$.hooplah = {};
$.hooplah.defaults = config.defaults;
$.hooplah.others = config.others;
$.fn.hooplah = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.hooplah.');
}
};
var methods = {
init: function(opts) {
return this.each(function() {
var defaults = $.extend({}, config.defaults, config.others, $.hooplah.defaults, $.hooplah.others);
// After some lines...
var options = $.extend({}, defaults, opts);
console.log(options);
// Stuff here...
});
}
};
})(jQuery);
HTML:
<ul id="nav><li>...</li></ul>
<script type="text/javascript">
<!--
$(document).ready(function() {
$.hooplah.defaults.foo = 'foooooo';
$.hooplah.defaults = { whoop : 'what?' };
$.hooplah.others.blah = 'why?';
$.hooplah.others = { cha : 'ok' }
$nav = $('#nav');
$nav.hooplah({
hey : 'hey hey',
last : 'first'
});
});
//-->
</script>
前に出力:
blah "nah"
cha "right!"
foo "bar"
hey "ho"
last "one"
whoop "there it is"
次の後の出力:
blah "why?"
cha "ok"
foo "foooooo"
hey "hey hey"
last "first"
whoop "what?"
提案された解決策 #2
呼び出し構文:$.fn.pluginName.defaults
@JonJaques の返信に基づくコード:
;(function($) {
var config = {};
config.others = {
blah : 'nah',
cha : 'right!',
last : 'one'
}
config.defaults = {
foo : 'bar',
hey : 'ho',
whoop : 'there it is'
};
var methods = {
init: function(opts) {
return this.each(function() {
var options = $.extend({}, config.defaults, config.others, $.fn.hooplah.defaults, $.fn.hooplah.others, opts);
console.log(options);
console.log(config.others.last); // Outputs "one".
// Stuff here...
});
}
};
$.fn.hooplah = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.hooplah.');
}
};
$.fn.hooplah.defaults = config.defaults;
$.fn.hooplah.others = config.others;
})(jQuery);
HTML:
<ul id="nav><li>...</li></ul>
<script type="text/javascript">
<!--
$(document).ready(function() {
$nav = $('#nav');
$.fn.hooplah.defaults.foo = 'foooooo';
$.fn.hooplah.defaults = { whoop : 'what?' };
$.fn.hooplah.others.blah = 'why?';
$.fn.hooplah.others = { cha : 'ok' }
$nav.hooplah({
hey : 'hey hey',
last : 'first'
});
});
//-->
</script>
前に出力:
blah "nah"
cha "right!"
foo "bar"
hey "ho"
last "one"
whoop "there it is"
次の後の出力:
blah "why?"
cha "ok"
foo "foooooo"
hey "hey hey"
last "first"
whoop "what?"
素晴らしい。:)
上記のコード サンプルを改善できるかどうか、および/または何か見落としがあるかどうかをお知らせください。
@AmithGeorgeと@JonJaquesに感謝します！皆さん、真剣にROCKしてください！