私はかなり長い間 jQuery を使用しており、そのプラグインをよく作成しています。さまざまな書き方を試しましたが、今ではこのテンプレートがお気に入りです:
;(関数($) {
// 複数のプラグインをここに入れることができます
(関数(プラグイン名) {
var のデフォルト = {
色: '黒'、
testFor: function(div) {
true を返します;
}
};
$.fn[プラグイン名] = 関数(オプション) {
options = $.extend(true, {}, デフォルト, オプション);
return this.each(function() {
var elem = これ,
$elem = $(elem);
// ここがプラグインの本質です
If (options.testFor(elem)) {
$elem.css({
borderWidth: 1,
borderStyle: 'solid',
borderColor: options.color
});
}
});
};
$.fn[プラグイン名].defaults = デフォルト;
})('境界線');
})(jQuery);
//以下は使い方です
$('div').borderize();
$('div').borderize({color: 'red'});
このテンプレートが気に入っている理由は次のとおりです
1. オーバーライドされた場合でも、内部のデフォルト オプションに引き続きアクセスできます (親属性を介してアクセスするだけです)
2. pluginName を変更することで、プラグインの名前を変更できます。 (この方法はコード圧縮にも非常に有益です)
ポイント #1 は非常に強力です。たとえば、このメソッドをオーバーライドしたいが、元のメソッドを保持したい場合は、次の例を見てください。
TestFor: function(elem) {
var $elem = $(elem);
If (elem.is('.inactive')) {
return false;
} else {
// 「親」関数を呼び出します
return $.fn.borderize.defaults.testFor.apply(this, argument);
}
}
});
このような通常のプロパティでもこれを行うことができます
var someVarThatMayBeSet = false;
/* コード ... */
$('.borderize').borderize({
color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});
皆さん、この jQuery プラグイン テンプレートも気に入っていただけるでしょう。非常に柔軟です。