JQuery プラグインの作成に関する基本的な知識_jquery

JQuery の知識を広める

知識 1: JQuery でプラグインを作成する場合、コア メソッドは次のとおりです:

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

$.extend(object) は、JQuery に静的メソッドを追加するものとして理解できます。

$.fn.extend(object) は、JQuery インスタンスにメソッドを追加するものとして理解できます。

基本的な定義と呼び出し:

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

/* $.extend 定義と呼び出し
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend( { fun1 : function () { alter("実行方法 1") } });
$.fun1();
/* $.fn.extend 定義と呼び出し
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
$.fn.extend({ fun2: function () {alert("メソッド 2 を実行"); } });
$(this).fun2();
//
$.fn.fun3 と同等 = function () {alert( "メソッド 3 を実行"); }
$(this).fun3();

知識 2: jQuery(function () { }) と (function ($) { })(jQuery); の違い:

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

jQuery(function () { });
//
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * と同等* * * * * * * * * * * * /
(function ($) { })(jQuery);
//
var fn = function ($) { };fn (jQuery);

jQuery(function () { }); は、DOM 要素がロードされた後の実行メソッド内のコードです。

(function ($) { })(jQuery); 匿名関数を定義します。ここで、jQuery はこの匿名関数の実際のパラメータを表します。通常、JQuery プラグイン開発で使用され、プラグインのプライベート ドメインを定義する役割を果たします。

3: JQuery プラグインの標準構造を開発する

1. スコープを定義する: JQuery プラグインを定義するには、まず外部干渉のない場所にプラグインのコードを配置する必要があります。より専門的な用語で言うと、このプラグインのプライベート スコープを定義する必要があります。外部コードはプラグイン内のコードに直接アクセスできません。プラグイン内のコードはグローバル変数を汚染しません。これにより、プラグインと実行環境の間の依存関係がある程度切り離されます。そうは言っても、プラグインのプライベート スコープはどのように定義するのでしょうか?

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

(function ($) {
})( jQuery);

ここまでで、最も単純な JQuery プラグインの 1 つが完成しました。呼び出すときは、$("#domName").easySlider({}) または $(".domName").easySlider({}) 以降でこのプラグインを呼び出すことができます。

3. デフォルト値の設定: .net コントロールを定義するのと同じように、JQuery プラグインを定義します。完璧なプラグインは、比較的柔軟な特性を備えている必要があります。このコードを見てみましょう: 。 TextBox コントロールには、Width プロパティと Height プロパティがあります。TextBox を使用する場合、コントロール自体にデフォルト値があるため、ユーザーはコントロールの高さと幅を自由に設定することも、値を設定しないこともできます。 JQuery プラグインの開発を準備する場合、ユーザーが属性を指定しない場合、JQuery ではそのような定義を 2 つのステップで実装できます。次のコード step03-a、step03-b を参照してください。 。

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

//step01 JQuery のスコープを定義します
( function ($) {
//step03-a プラグインのデフォルト値の属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
}; //step03-b ユーザー定義属性、デフォルト属性をマージします
var options = $.extend(defaults, options);
}
})(jQuery);

プログラマは、変数名の変更や行の変更などの革新を好みます。 vardefaults = {} がデフォルト属性を表すために使用されているのを見て、JQuery プラグインを作成するときは違うものにしようと思い、デフォルト属性を表すために vardefault01 ={} と vardefault02 ={} を使用しました。その場合、デフォルトの属性名はあらゆる種類になり、さらに悪化します。したがって、JQuery プラグインを作成するときは、デフォルトのプロパティを定義するときに、defaults 変数を使用してデフォルトのプロパティを表すことをお勧めします。このようなコードは読みやすくなります。

誰かが次のコード行を見た: var options = $.extend(defaults, options) と眉をひそめ、混乱を表しました。それでは、最初に次のコードを見てみましょう:

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

var obj01 = { name: "英語名: サム・シャオ "、年齢: 29、ガールフレンド: { 名前: "ヤン"、年齢: 29} }
var obj02 = { 名前: "中国名: XiaoJian"、ガールフレンド: { 名前: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);

コードを開発環境にコピーし、a、b、c、d の値をそれぞれ見てみると、var options = $.extend(defaults, options) の意味がわかります。オプションがデフォルトの値をオーバーライドし、その値をオプションに割り当てることを示します。
プラグイン環境では、ユーザーが属性をデフォルト値で設定しない場合、ユーザーが設定した値がプラグインのデフォルト値をオーバーライドすることを意味します。はまだ保持されています。

4. JQuery セレクターのサポート: JQuery セレクターは JQuery の優れた機能です。私たちのプラグインが JQuery セレクターをサポートしないように作成されている場合、それは非常に残念です。 JQuery プラグインで複数のセレクターをサポートするには、コードを次のように定義する必要があります:

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

//step01 JQuery のスコープを定義します
( function ($) {
//step03-a プラグインのデフォルト値の属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
}; //step03-b ユーザー定義属性、デフォルト属性をマージします
var options = $.extend(defaults, options);
//step4 JQuery セレクターをサポートします
this.each(function () {

});
}})(jQuery);

5. JQuery リンク呼び出しのサポート: 上記のコードは完璧に見えますが、実際にはそれほど完璧ではありません。リンク呼び出しは今のところサポートされていません。リンク呼び出しの効果を実現するには、ループの各要素を返す必要があります

コードをコピー コードは次のとおりです://step01 JQuery のスコープを定義します

( function ($) {

//step03-a プラグインのデフォルト値の属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
}; //step03-b ユーザー定義属性、デフォルト属性をマージします
var options = $.extend(defaults, options);
//step4 JQuery セレクターをサポートします
//step5 チェーン呼び出しをサポートします
return this.each(function () {

});
}
})(jQuery);

このような定義はリンク呼び出しをサポートできます。たとえば、次のような呼び出しがサポートされています: $(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color" : "red ", "border-bottom-style": "点線" });

6. プラグインのメソッド: プラグインの機能を実装するには、多くの場合、数百、数千、場合によっては数万行にも及ぶ大量のコードが必要になります。このコードを構造化するには関数を使用する必要があります。最初の点で述べたように、プラグインで定義したメソッドを外部から直接呼び出すことはできません。プラグインで定義したメソッドは外部環境を汚染しません。次に、プラグインでいくつかのメソッドを定義してみます:

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

//step01 JQuery のスコープを定義します
( function ($) {
//step03-a プラグインのデフォルト値の属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
};
//step06-a プラグイン内メソッド定義(obj).append(function() { return " (" $(obj).attr("href") ")" });
}

//step02 プラグインの拡張メソッド名 $.fn.easySlider = function (options) {

//step03-b ユーザー定義属性、デフォルト属性をマージ
var options = $ .extend (defaults, options);
//step4 は JQuery セレクターをサポートします
//step5 はチェーン呼び出しをサポートします
return this.each(function () {
//step06-b はプラグイン メソッド
showLink(this);
});
ステップ 06-a: showLink() というメソッドがプラグイン内で定義されています。このメソッドは、C# クラスのプライベート メソッドに似ており、使用することはできません。プラグイン内で。ステップ step06-b は、プラグイン内のメソッドを呼び出す方法を示しています。