ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery プラグインをお勧めします template_jquery

jQuery プラグインをお勧めします template_jquery

WBOY
WBOYオリジナル
2016-05-16 16:21:26949ブラウズ

私はかなり長い間 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 は非常に強力です。たとえば、このメソッドをオーバーライドしたいが、元のメソッドを保持したい場合は、次の例を見てください。

コードをコピーします コードは次のとおりです: $('.borderize').borderize({
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 プラグイン テンプレートも気に入っていただけるでしょう。非常に柔軟です。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。