jQuery プラグイン開発の完全な分析_jquery

jQuery プラグイン開発には 2 つのタイプがあります。1 つはクラスレベルのプラグイン開発です。つまり、jQuery に新しいグローバル関数を追加します。これは、jQuery クラス自体にメソッドを追加するのと同じです。 jQuery のグローバル関数は、jQuery 名前空間に属する関数です。もう 1 つは、jQuery オブジェクトにメソッドを追加するオブジェクト レベルのプラグイン開発です。 2 つの機能の開発については、以下で詳しく説明します。
1. クラスレベルのプラグイン開発
クラスレベルのプラグイン開発の最も直接的な理解は、クラス メソッドを jQuery クラスに追加することです。これは、静的メソッドを追加することとして理解できます。典型的な例は、jQuery 名前空間で定義されている $.AJAX() 関数です。クラス レベルでのプラグイン開発は、次の形式で拡張できます:
1.1 新しいグローバル関数の追加
グローバル関数を追加するには、次のように定義するだけです:
Java コード

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

jQuery.foo = function() {
alert('これはテストです。これは単なるテストです。');

1.2 複数のグローバル関数を追加します
複数のグローバル関数を追加するには、次のコマンドを使用します。定義:
Java コード

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

jQuery。 foo = function() {
alert( 'これはテストです。これは単なるテストです。');
jQuery.bar = function(param) {
alert('This関数はパラメータを受け取ります。これは "' param ' ".');


は関数と同じように呼び出されます: jQuery.foo();jQuery.bar();または $.foo();$.bar ('bar');
1.3 jQuery.extend(object) を使用する

コードをコピー

コードは次のとおりです: jQuery.extend({ foo: function() { alert('これはテスト。これは単なるテストです。');

},

bar: function(param) {
alert('この関数は「' param '」です。'); 🎜>}
});


1.4 名前空間の使用
jQuery 名前空間ではありますが、大量の JavaScript 関数名と変数名の使用を禁止します。ただし、一部の関数名または変数名が他の jQuery プラグインと競合することは依然として避けられないため、私たちは一部のメソッドを別のカスタム名前空間にカプセル化することに慣れています。
Java コード

コードをコピー

コードは次のとおりです: 1.jQuery。 myPlugin = { 2.foo:function() { 3.alert('これはテストです。これは単なるテストです。'); 4.},

5.bar: function(param ) {

6.alert('この関数は「'param'」というパラメーターを受け取ります。');
7.}
8.}; 🎜>9 名前空間を使用する .Function は引き続きグローバル関数であり、呼び出し時に使用されるメソッド:
11.$.myPlugin.bar('baz'); >合格 このトリック (個別のプラグイン名を使用) を使用すると、名前空間関数の競合を回避できます。
2. オブジェクトレベルのプラグイン開発
オブジェクトレベルのプラグイン開発には次の 2 つの形式が必要です:
形式 1:
Java コード

コードをコピーします


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


1.(function($){
2.$.fn.extend( {

3. pluginName:function(opt,callback){ 4. ここにプラグイン実装コードが入ります。5.} 7.})( jQuery); フォーム 2:

Java コード

コードをコピー


コードは次のとおりです

1.(function($) {
2.$.fn.pluginName = function() {
3. // プラグイン実装コードはここにあります。

4.}; 5 .})(jQuery);
上記では jQuery 関数が定義されており、仮引数は $ です。関数の定義が完了したら、jQuery の実引数を渡します。すぐに呼び出されて実行されます。この利点は、jQuery プラグインを作成するときに、プロトタイプと競合することなく $ エイリアスも使用できることです。
2.1 JQuery 名前空間で名前を宣言する
これは単一のプラグインです。スクリプト。スクリプトに複数のプラグイン、または相互プラグイン ($.fn.doSomething() と $.fn.undoSomething() など) が含まれている場合は、複数の関数名を宣言する必要があります。ただし、通常、プラグインを作成するときは、その内容すべてを網羅するために 1 つの名前のみを使用するように努めます。この例のプラグインの名前は「highlight」です。
Java コード

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

1.$.fn.hilight = function() {
2. // プラグインの実装コードは次のようになります。
3.}; 🎜 >5.$('#myDiv').hilight();


しかし、実装コードを複数の関数に分解する必要がある場合はどうすればよいでしょうか。理由はたくさんあります。または実装がより読みやすく、よりオブジェクト指向になっています。 これは非常に面倒で、不要な名前空間を追加せずに機能を複数の関数に分割します。これは、JavaScript の最も基本的なクラス オブジェクトとしての関数の認識と利用によって実現できます。他のオブジェクトと同様に、関数はプロパティとして指定できます。したがって、「hilight」を jQuery プロパティ オブジェクトとして宣言しました。公開する必要があるその他のプロパティまたは関数はすべて、「hilight」関数のプロパティとして宣言できます。後で続けてください。

2.2 オプション パラメーターを受け入れてプラグインの動作を制御する
前景色と背景色を指定する機能をプラグインに追加しましょう。オプションをオプション オブジェクトとしてプラグイン関数に渡す場合があります。例:
Java コード

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

1 .// プラグイン定義

2.$.fn.hilight = function(options) {
3. var デフォルト = {
4. 前景: '赤'、
5. '
6. };
7. 提供されているオプションを拡張します。
8. var opts = $.extend(defaults, options); // プラグインの実装コードはここにあります。
10.};
11. プラグインは次のように呼び出すことができます:
12.$('#myDiv').hilight({
13.foreground: ' blue'
14 .});


2.3 プラグインのデフォルト設定を公開する
上記のコードに加えるべき改善の 1 つは、プラグインのデフォルト設定を公開することです。 -で。これにより、プラグインのユーザーは、より少ないコードでプラグインを上書きおよび変更することが容易になります。次に、関数オブジェクトの使用を開始します。

Java コード

コードをコピー コードは次のとおりです: 1.//プラグイン定義

2.$.fn.hilight = function(options) {

3. // 指定されたオプションを使用して拡張します。
4. 拡張する最初の引数は空であることに注意してください。 object -
5. // これは、「デフォルト」オブジェクトをオーバーライドしないためです。
6. var opts = $.extend({}, $.fn.hilight.defaults, options); 7. // プラグイン実装コードはここにあります。
8.};
9.// プラグイン関数のプロパティとして追加されます
10.$.fn.hilight.defaults = {
11. 前景: 'red'、
12. 背景: ' yellow'
13.};
14. ユーザーはスクリプトに次のような行を含めることができます。 //これは一度だけ呼び出す必要があり、ready ブロックで呼び出す必要はありません
16.$.fn.hilight.defaults.foreground = 'blue'; 次に使用できます。このメソッドのようなプラグインは、前景色を青に設定します:
18.$('#myDiv').hilight();


これで、ユーザーは次のような行を含めることができます。スクリプトは次のとおりです:

コードをコピー

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

//これは一度呼び出すだけでよく、ready ブロックで呼び出す必要はありません
$.fn.hilight.defaults.foreground = 'blue';
次に実行します。次のように使用します。プラグインのメソッドは、結果として青色の前景色を設定します。
$('#myDiv').hilight();
ご覧のとおり、ユーザーは次の行を書くことができます。プラグインのデフォルトの前景色を設定するコード。また、ユーザーは必要に応じてこれらの新しいデフォルト値を選択的にオーバーライドできます。
// プラグインのデフォルトの背景色をオーバーライドします
$.fn.hilight.defaults.foreground = 'blue' > // ...
// 新しいデフォルト設定でプラグインを呼び出します
$('.hilightDiv').hilight();
// ...
// に設定パラメータを渡しますデフォルト設定をオーバーライドするプラグイン メソッド
$('#green').hilight({
foreground: 'green'
});

2.4 一部の関数の適切な公開
は、興味深い方法でプラグインを前のコードに段階的に拡張します (そして、他の人がプラグインを拡張できるようにします)。たとえば、プラグイン実装では、強調表示されたテキストをフォーマットする「format」という関数を定義できます。プラグインは次のようになりました。デフォルトのフォーマット メソッドの実装は hiligth 関数の下にあります。
Java コード

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

1.//プラグイン定義
2.$.fn.hilight = function(options) {
3. 一致した各要素を反復して再フォーマットします
4. return this.each(function() {
5. var $this = $(this);
6. // ...
7. var markup = $this.html(); // フォーマット関数を呼び出します。マークアップ = $ .fn.hilight.format(markup);
11.// を定義します。フォーマット関数
14.$.fn.hilight.format = function(txt) {
15.return '' txt '
16.}; >

コールバック関数でデフォルト設定をオーバーライドできるようにすることで、オプション オブジェクトの他のプロパティを簡単にサポートできます。これはプラグインを変更するもう 1 つの優れた方法です。ここで示す手法は、再定義できるようにフォーマット関数をさらに効果的に公開することです。この手法を使用すると、他の人が独自の設定を渡すことでプラグインをオーバーライドできるため、他の人があなたのプラグイン用のプラグインを作成できるようになります。
この記事で作成した役に立たないプラグインを考えると、これらが一体いつ役立つのか疑問に思うかもしれません。実際の例は Cycle プラグインです。この Cycle プラグインは、スクロール、スライド、フェードアウェイなどの多くの内部変換効果をサポートできるスライド表示プラグインです。しかし実際には、スライディング変更に適用される可能性のあるすべてのタイプのエフェクトを定義する方法はありません。そこでこの拡張性が役に立ちます。 Cycle プラグインは「トランジション」オブジェクトをユーザーに公開し、ユーザーが独自の変換定義を追加できるようにします。プラグインの定義は次のとおりです:

コードをコピーします


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

$.fn.cycle .transitions = { // ... };

このトリックにより、他のユーザーが変換設定を定義して Cycle プラグインに渡すことができます。

2.5 プライベート関数をプライベートに保つ
この手法は、プラグインの一部をオーバーライドできるように公開する場合に非常に強力です。ただし、実装の公開部分については慎重に考える必要があります。公開後は、パラメーターまたはセマンティクスを変更すると、下位互換性が失われる可能性があることに留意する必要があります。一般的な経験則として、特定の関数を公開するかどうかわからない場合は、公開する必要はおそらくないでしょう。
それでは、名前空間を壊したり実装を公開したりせずに、どのようにしてより多くの関数を定義するのでしょうか?これがクロージャの機能です。実証するために、プラグインに別の「デバッグ」関数を追加します。このデバッグ関数は、選択した要素形式を Firebug コンソールに出力します。クロージャを作成するには、プラグイン定義全体を関数でラップします。
Java コード

コードをコピー


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

1.(関数($) { 2. // プラグイン定義 3. $.fn.hilight = function(options) { 4. 5. 🎜>6 . };

7. デバッグ用のプライベート関数

8. function debug($obj) {
9. if (window.console && window.console.log) . window.log('ハイライト選択数: ' $obj.size());
12.// ...
13.}; 🎜>

私たちの「debug」メソッドは外側のクロージャからアクセスできないため、実装に対してプライベートです。
2.6 メタデータ プラグインのサポート
作成しているプラ​​グインに基づいて、メタデータ プラグインのサポートを追加すると、プラグインがより強力になります。個人的には、このメタデータ プラグインが気に入っています。なぜなら、いくつかの「マークアップ」オプションを使用してプラグインをオーバーライドできるからです (サンプルを作成するときに非常に便利です)。そしてそれをサポートするのは非常に簡単です。更新: コメントに少し最適化の提案がありました。
Java コード

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

1.$。 fn.hilight = function(options) {
2. // ...
3. // 要素の反復の前にメイン オプションを構築します
4. var opts = $.extend({}, $.fn .hilight.defaults, options);
5. return this.each(function() {
6. var $this = $(this);
7. // 要素固有のオプションを構築します
8. var o = $.meta ? $.extend({}, opts, $this.data()) :
9. //...

これらの行は何かを行う: メタデータ プラグインがインストールされているかどうかをテストします。インストールされている場合は、メタデータ行を抽出し、それを最後のパラメーターとして JQuery.extend に追加することで、オプション オブジェクトを拡張できます。これにより、他のオプション設定がオーバーライドされます。 「マークアップ」を選択すると、「マークアップ」から動作を制御できます。
呼び出し時に次のように記述できます。
Java コード

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

1. 2 .

4.

< ;div class="hilight { foreground: 'orange' }"> 6. 良い一日をお過ごしください。
8.

9. 良い一日をお過ごしください!
10.

11. これで、1 行だけを使用してどの div を強調表示できるようになりました。スクリプトの:
12.$('.hilight').hilight();

2.7 統合

次のコードにより、この例は完成します:
Java コード




コードをコピー

コードは次のとおりです: 1.// クロージャを作成します2.(function( $) { 3. // プラグインの定義

4. $.fn.hilight = function(options) {

5. debug(this);要素の反復前のオプション
7. var opts = $.extend({}, $.fn.hilight.defaults, options);
8. // 一致した各要素を反復して再フォーマットします
9. .each(function () {
10. $this = $(this);
11. // 要素固有のオプションを構築
12. var o = $.meta ? $.extend({}, opts, $this .data()) : opts;
13. // 要素のスタイルを更新します
14. $this.css({
15.backgroundColor: o.background,
16.color : o.foreground
17. });
18. var markup = $this.html(); // フォーマット関数
20. .format(markup );
22.
24. デバッグfunction debug($ obj) {
26. if (window.console && window.console.log)
27. window.console.log('ハイライト選択数: ' $obj.size()); 🎜>28. };
29. // 公開フォーマット関数を定義します
30. $.fn.hilight.format = function(txt) {
31. ;
32. }; // プラグインのデフォルトは
34.
36. 背景 : '黄色'
37. };
39.})(jQuery);
この設計により、仕様に準拠した強力なプラグインを作成することができました。それがあなたにも同じようにできることを願っています。
3. 概要
jQuery は、プラグインを開発するための 2 つのメソッドを提供します。
jQuery.fn.extend(object); jQuery オブジェクトにメソッドを追加します。
jQuery.extend(object); jQuery クラス自体を拡張します。クラスに新しいメソッドを追加します。
3.1 jQuery.fn.extend(object);
fn とは。 jQuery コードを見ると、見つけるのは難しくありません。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//....
}; jQuery.fn = jQuery.prototype。プロトタイプについてはよくご存知でしょう。 JavaScript には明確なクラスの概念がありませんが、それを理解するにはクラスを使用する方が便利です。 jQuery は非常によくカプセル化されたクラスです。たとえば、ステートメント $("#btn1") を使用すると、jQuery クラスのインスタンスが生成されます。
jQuery.fn.extend(object); jQuery.prototype を拡張するとは、jQuery クラスに「メンバー関数」を追加することです。 jQueryクラスのインスタンスはこの「メンバー関数」を利用することができます。
たとえば、特別な編集ボックスを作成するプラグインを開発したいと考えています。これがクリックされると、現在の編集ボックスの内容が警告されます。これを行うことができます:

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

$.fn。 extend({
alertwhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertwhileClick(); // ページ上:

$("#input1") は jQuery インスタンスです。メンバーメソッドを呼び出します。alertwhileClick の後、拡張機能が実装され、クリックされるたびに、最初に現在の編集内容がポップアップ表示されます。
3.2 jQuery.extend(object);
jQuery クラスにクラス メソッドを追加します。これは静的メソッドを追加するものとして理解できます。例:

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

1.$.extend( {
2.add:function(a,b){return a b;}
3.});

は、jQuery の add と呼ばれる「静的メソッド」を追加します。 jQuery の場合は、このメソッドを使用します。 $.add(3,4); //return 7