翻訳jquery公式のプラグインの作成方法
10304 ワード
同じコードブロックを繰り返し使用したい場合があります.例えば、方法を書きたい場合は、この方法で一連の選択操作を選択することができます.そのため、プラグインを作成したいと思っています.
jqueryがどのように動作するか:jqueryオブジェクトメソッド(jquery Object Methods)
自分のプラグインを書く前に、次のコードがどのように機能しているかを理解する必要があります.
$( "a" ).css( "color", "red" );これは簡潔で実用的なjqueryコードセグメントですが、jqueryの背後がどのように働いているか知っていますか.「$」関数だけで要素を選択すると、
jqueryオブジェクト.このオブジェクトには、jqueryが呼び出すことができるすべての方法が含まれています.たとえば、これらの(.css().click()...など).
これらの方法は、jqueryセレクタで選択したすべての要素に適用されます.jqueryオブジェクトのこれらの方法は$からである.fn objectが継承したものです.
$.fnオブジェクトにはすべてのjqueryのオブジェクトメソッドが含まれています.自分のメソッドをjqueryに追加したい場合は、カスタムメソッドを$に書く必要があります.fn上.
基本的なプラグインの作成方法:
例えばgreenifyプラグインを作成したいのですが、このプラグインでdom要素の文字を緑に設定します.グリーンという方法を
$.fnでは、他のjqueryオブジェクトメソッドと同じです.
$.fn.greenify = function() {
this.css( "color", "green" ); }; $( "a" ).greenify(); // 。注意:ここで使用しています.css()は、$(this)オブジェクトではなく、前に呼び出されたthisです.これは私たちのgrenifyの方法と.css()メソッドが呼び出されるオブジェクトと同様に、
これはjqueryオブジェクトを表します.
チェーンの有効化:
このステップでは、プラグインが実際に使用できるようにするには、2つのことをします.
第一に、チェーン操作はjqueryの特徴であり、選択された要素の後に5つまたは6つの操作を追加することができます.これは、jqueryオブジェクトメソッドが元のjqueryオブジェクトに再び戻ることによって行われ、チェーン操作を有効にするには1行だけ追加する必要があります.
$.fn.greenify = function() { this.css( "color", "green" ); return this;//
}
$( "a" ).greenify().addClass( "greenified" );
ここでは、aラベルの文字を緑色にする後、aラベルにclassを追加することもできる.
$別名の保護、役割ドメインの追加
第二に、$記号はjavascriptライブラリやフレームワークで非常に流行しています.プロジェクトで他のクラスライブラリとjqueryを同時に使用している場合は、jqueryに$記号を使用させることはできません.
jqueryでnoConflict()メソッドは$記号を解放するが,我々のプラグインは$記号を用いて構築されたjqueryメソッドを仮定する.しかし、私たちは引き続き使用する必要があります.
$記号は他のプラグインと一緒に動作します.私たちのコードを匿名関数式に置かなければなりません($汚染を防ぐ).そしてjqueryをパラメータとして渡し、
対応するパラメータは$記号を使用します.
(function ( $ ) { $.fn.greenify = function() { this.css( "color", "green" ); return this; }; }( jQuery ));また、匿名関数式を使用するのは、変数を私有化するためであり、異なる色を使用したい場合に加えて、変数でキャッシュすることができます.
(function ( $ ) { var shade = "#556b2f"; $.fn.greenify = function() { this.css( "color", shade ); return this; }; }( jQuery )); $は1つしか使用しません.fnはプラグインを構築するために:
$は1つしか使用しません.fnは、プラグインメソッドが上書きされる確率を低下させます.次の例は推奨されていません.
(function( $ ) { // $.fn.openPopup = function() { // Open popup code.
}; $.fn.closePopup = function() { // Close popup code.
}; }( jQuery )); 最良の実践は1ドルしか使用しないことだ.fnは、その後、内部で異なる動作を判断し、異なる動作を実行する.
(function( $ ) { $.fn.popup = function( action ) { if ( action === "open") { // Open popup code.
} if ( action === "close" ) { // Close popup code.
} }; }( jQuery ));each()メソッドを使用して(each()method)を巡回する
典型的なjqueryメソッドには、任意の数のdom要素が含まれています.これは、jqueryオブジェクトがオブジェクトセットと呼ばれる理由です.一定数の要素を実行したい場合は
どんな操作でもeachを使ってdomツリーを巡るに違いありません.(操作には、要素の属性get attribute、要素位置positionsを取得することが含まれる).
$.fn.myNewPlugin = function() { return this.each(function() { // do something
}); };注意:私たちが帰ってきたのは.each()の結果はreturn thisに代わった.each()はすでにチェーン式なので、each内部はreturnが必要なthisを返しています.
これはこれまでチェーンを適用するのに一番いい方法です.
パラメータの構成の使用:
プラグインがますます複雑になると、プラグインにパラメータを受信させるのが最善です.このようなプラグインはカスタマイズできます.最も簡単な方法は、多くのパラメータを1つのオブジェクトに使用することです.
字面量を詰める.次にgreenifyプラグインにパラメータを受信します.
(function ( $ ) { $.fn.greenify = function( options ) { //
var settings = $.extend({ color: "#556b2f", backgroundColor: “white" }, options ); // Greenify return this.css({ color: settings.color, backgroundColor: settings.backgroundColor }); }; }( jQuery ));実際に呼び出されたときにパラメータが入力されます.
$( "div" ).greenify({ color: "orange" });デフォルトのcolor色設定「#556 b 2 f」は、color"orange"で上書きされます.
すべてのものを統合します.
次のプラグインは、上記のテクノロジーを使用しています.
(function( $ ) { $.fn.showLinkLocation = function() { this.filter( "a" ).each(function() { var link = $( this ); link.append( " (" + link.attr( "href" ) + ")" ); }); return this; }; }( jQuery ));//実際に呼び出す
$( "a").showLinkLocation();
このプラグインの動作は、aラベルのhref属性の値をaラベルの中に追加することです.
Foo
Foo (page.html)
プラグインの最適化:
(function( $ ) { $.fn.showLinkLocation = function() { this.filter( "a" ).append(function() { return " (" + this.href + ")"; }); return this; }; }( jQuery ));私たちはただ使います.append()メソッドはコールバックを受け入れ,このコールバック関数が返す値は遍歴する各a要素集合に追加される.
注意:私たちは使用していません.attr()法は,元のDOM APIがhref属性を簡単に取得する方法を与えたため,要素の属性を取得する.
(オリジナルの方法はjqueryの方法より性能が良い)
本文はapiから来た.jquery.comのプラグインは公式ドキュメントを作成します.文章に翻訳ミスがあれば、訂正してください.(転載は出典を明記してください、ありがとうございます)
倉庫住所:https://github.com/ollieSk8/create_jq_plugins
参照元アドレス:http://learn.jquery.com/plugins/basic-plugin-creation/