jQuery プラグイン開発_jquery の詳細なチュートリアル

jQuery プラグインとメソッドの拡張は非常に強力で、開発時間を大幅に節約できます。この記事では、jQuery プラグイン開発の基本、ベスト プラクティス、およびよくある落とし穴について概説します。

1. はじめに

jQuery プラグインの作成は、新しい function 属性を jQuery.fn に追加することから始まります。ここで追加される object 属性の名前は、プラグインの名前です:

コードをコピーします コードは次のとおりです:

jQuery.fn.myPlugin = function(){

//独自のプラグイン コード

};

ユーザーに人気の $ 記号はどこですか? まだ存在しますが、他の JavaScript ライブラリとの競合を避けるために、jQuery を自己実行の閉じたプログラムに渡し、jQuery が $ 記号にマップされるようにして、$ 記号が他のライブラリによって上書きされるのを避けることをお勧めします。 。

コードをコピー コードは次のとおりです。

(function ($) {
$.fn .my Plugin = function () {
//独自のプラグイン コード
};
})(jQuery); $ 記号を使用して jQuery 関数を表します。

2. 環境

ここで、実際のプラグイン コードの作成を開始できます。 ただし、その前に、プラグインが配置されている環境について理解しておく必要があります。 プラグインのスコープでは、this キーワードはプラグインが実行する jQuery オブジェクトを表します。これは、コールバックを含む他の jQuery 関数では、this キーワードがネイティブ DOM 要素を表すためです。 。これにより、開発者は、以下に示すように、jQuery で this キーワードを誤って不必要にラップすることがよくあります。

コードをコピー コードは次のとおりです。

(function ($) {

$.fn .my Plugin = function () {

//これはすでに jQuery オブジェクトであるため、$(this) のように $ 記号で囲む必要はありません。 this) です。 $($('#element'));

this.fadeIn('normal', function () {

DOM 要素

});
};
})(jQuery);

$('#element').myPlugin();

3. 基礎知識

jQuery プラグインの基本を理解したので、いくつかのことを行うプラグインを作成しましょう。

コードをコピー

コードは次のとおりです。(function ($) {

$.fn.maxHeight = function () {

var max = 0;

this.each(function () {
max = Math.max(max, $ (this).height());
});

.maxHeight(); // の高さを返します。高さが最大の div 要素


これは、 .height() を使用して、ページ上で最大の高さを持つ div 要素の高さを返す単純なプラグインです。


4. 連鎖性の維持


多くの場合、プラグインの目的は、収集された要素を何らかの方法で変更し、チェーン内の次のメソッドに渡すことだけです。 これが jQuery の設計の美しさであり、jQuery が人気がある理由の 1 つです。 したがって、プラグインのチェーン可能性を維持するには、プラグインが this キーワードを返すようにする必要があります。

コードをコピー

コードは次のとおりです:

(function ($) {

$.fn.lockDimensions = function (type) {

return this.each(function () {

var $this = $(this);

if (!type || type == 'width') {
$this.width($this.width());
}

if (!type || type == 'height') {
$this.height($this.height());
}

});

};
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

プラグインはこのキーワードを返すため、jQuery によって収集された要素を .css などの jQuery メソッドによって引き続き制御できるように連鎖性を維持します。 したがって、プラグインが組み込み値を返さない場合は、常にスコープ内で this キーワードを返す必要があります。 さらに、プラグインに渡されるパラメータはプラグインのスコープ内で渡されると推測することもできます。 したがって、前の例では、文字列「width」がプラグインの型パラメータになります。

5. デフォルト値とオプション

多くのカスタマイズ可能なオプションを提供するより複雑なプラグインの場合は、プラグインのインストール時に拡張できるものを用意するのが最善です。デフォルト設定 ($.extend を使用) が呼び出されます。 したがって、多数のパラメーターを使用してプラグインを呼び出す代わりに、オーバーライドする設定を含むオブジェクト パラメーターを使用してプラグインを呼び出すことができます。

コードをコピー コードは次のとおりです。

(function ($) {

$.fn.tooltip = function (options) {

//いくつかのデフォルト値を作成し、提供されたオプションを拡張します
var settings = $.extend({
'location' ： 'top'、
>
'場所': '左'
});


この例では、ツールチップ プラグインを呼び出すと、デフォルト設定の場所オプションが上書きされ、背景色のオプションはデフォルト値のままになるため、最終的に呼び出される設定値は次のようになります:




コードをコピー


コードは次のとおりです:

{

'location': 'left',
'background-color': ' blue'

}これは、開発者が利用可能なすべてのオプションを定義する必要がなく、高度に構成可能なプラグインを提供する非常に柔軟な方法です。 6. 名前空間

プラグインに適切な名前を付けることは、プラグイン開発の非常に重要な部分です。 適切な名前空間を使用すると、プラグインが他のプラグインや同じページ上の他のコードによって上書きされる可能性が非常に低いことが保証されます。 また、名前空間を使用すると、メソッド、イベント、データをより適切に追跡できるため、プラグイン開発者としての作業が容易になります。


7. プラグイン方式

いかなる状況でも、単一のプラグインが jQuery.fnjQuery.fn オブジェクト内に複数の名前空間を持つべきではありません。

コードをコピー

コードは次のとおりです。

(function ($) {

$.fn.tooltip = 関数 (オプション) {

.fn.tooltipHide = function () { // bad }; $.fn.tooltip更新 = 機能 (コンテンツ) { // !!! };

})(jQuery);

$.fn は $.fn 名前空間を乱雑にするため、これはお勧めできません。 この問題を解決するには、オブジェクト テキスト内のすべてのプラグインのメソッドを収集し、メソッドの文字列名をプラグインに渡してそれらを呼び出す必要があります。

コードをコピー コードは次のとおりです。

(function ($) {

varmessages = {
init: function (options) {
},
show: function () // is
},
Hide: Function () {
// 良い
}、
更新: 関数 (コンテンツ) {
// !!!
}
}; fn.tooltip = function (メソッド) ) {

// メソッド呼び出し (引数、1)​​);
} else if (typeof method === 'object' || !method) {
returnmethod.init.apply(これ、引数) 🎜> >// init メソッドを呼び出します
$('div').tooltip();

// init メソッドを呼び出します
$('div')。 tooltip({
foo: ' bar'
});

//非表示メソッドを呼び出します
$('div').tooltip('hide');

//Update メソッドを呼び出します
$('div').tooltip('update', 'これは新しいツールヒントの内容です!');


このタイプのプラグイン アーキテクチャでは、すべてのメソッドを親パッケージにカプセル化し、メソッドの文字列名とこのメソッドに必要な追加パラメータを渡すことでメソッドを呼び出すことができます。 このタイプのカプセル化とアーキテクチャは jQuery プラグイン コミュニティの標準であり、jQuery UI のプラグインやウィジェットを含む無数のプラグインで使用されています。


8. イベント


bind メソッドのあまり知られていない機能により、イベントの名前空間をバインドできます。 プラグインがイベントをバインドする場合、このイベントに名前空間を付けることをお勧めします。 こうすることで、バインドを解除するときに、すでにバインドされている可能性のある同じタイプの他のイベントに干渉することがなくなります。これを行うには、「.」を介してバインドする必要があるイベントに名前空間を追加します。




コードをコピー

コードは次のとおりです:

(function ($) {

varmethods = {
init: function (options) {

return this.each(function () {
$(window).bind('resize.tooltip',methods.reposition);
});

},
destroy: function () {

これを返します。 each(function () {
$(window).unbind('.tooltip');
})

},
reposition: function () {
//。 ..
},
show: function () {
//...
},
hidden: function () {
//...
} ,
update: function (content) {
//...
}
};

$.fn.tooltip = function (メソッド) {

if (メソッド[メソッド]) {
return メソッド[メソッド].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (メソッドの種類 === 'オブジェクト' || !method) {
returnmethod.init.apply(this, argument);
} else {
$.error('メソッド ' メソッド ' は jQuery.tooltip に存在しません');
}
};

})(jQuery);

$('#fun').tooltip();
//第一段階间之後... ...
$('#fun').tooltip('destroy');

この例では、ツールチップが init メソッドによって初期化されるときに、再配置メソッドがサイズ変更イベントに設定され、再配置メソッドでは追加.tooltip によって名前空間が与えられます。これにより、再配置のメソッドとサイズ変更イベントの設定を、再配置の指定名空間を介して、このアプリ以外の設定に影響を与えずに安全にキャンセルできます。 >

九、データ

通常、ファイルの公開時には、転送されるファイルがエレメントに基づいて初期化されているかどうかを確認または検査する必要がある場合があります。大量の異なる名前の分離データを確認するには、単一のオブジェクトを使用してすべての量を保持し、個別の命名空間を通じてこのオブジェクトを失わずに取得するのがより良い方法です。

复制代码

代码如下:

(function ($) {

varmethods = {
init: function (options) {

return this.each(function () {

var $this = $(this),
data = $this.data('tooltip'),
ツールヒント = $('

', {
テキスト: $ this.attr('title')
});

// プラグインがまだ初期化されていない場合
if (!data) {

/*
ここでその他のセットアップ作業を行います
*/

$(this).data('tooltip', {
ターゲット: $this,
ツールヒント: ツールヒント
});

}
});
},
destroy: function () {

return this.each(function ()
var $this = $（this）、
data = $ this.data（ 'tooltip'）;

// namespacing ftw
$（window）.unbind（ '。tooltip'）;
data.tooltip.remove();
$this.removeData('tooltip');

})

},
reposition: function () {
/ / ...
},
show: function () {
// ...
},
Hide: function () {
// ...
},
update: function (content) {
// ...
}
};

$.fn.tooltip = function (メソッド) {

if (メソッド[メソッド]) {
return メソッド[メソッド].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (メソッドの種類 === 'オブジェクト' || !method) {
returnmethod.init.apply(this, argument);
}else {
$.error('メソッド ' メソッド ' は jQuery.tooltip に存在しません') >

名前空間を通じてオブジェクト内のデータをカプセル化すると、一元化された場所からすべてのプラグイン プロパティを簡単に読み取ることができます。


10. 概要とベストプラクティス

jQuery プラグインを作成すると、最も便利な機能を再利用可能なコードに統合するライブラリを作成できるため、開発者の時間を節約し、開発をより効率的にすることができます。 jQuery プラグインを開発するときは、次の点に注意してください:

1. 常に閉じたプラグインでラップされます:

コードをコピーします

コードは次のとおりです: (function ($) {/* plugin gos here */})(jQuery);2. プラグインの関数スコープ内でこのキーワードを重複してラップしないでください。

3. プラグインが特定の値を返さない限り、そうでない場合は、連鎖性を維持するために常に this キーワードが返されます。

4. 多数のパラメータの代わりに、拡張可能なデフォルトのオブジェクトパラメータをプラグインに渡します。
5. プラグイン内で異なるメソッドに複数の名前を付けないでください。
3. 常にメソッド、イベント、データに名前空間を付けます。