JQueryプラグインのカスタマイズ---理解を深める
9474 ワード
一.紹介
プラグインの作成の目的は、既存の一連の方法や関数をカプセル化し、他の場所で繰り返し使用し、後期のメンテナンスを容易にすることです.
JQueryは、管理要素とスクリプトを簡単かつ効率的に提供するほか、コアモジュールに独自の方法と追加の機能を追加する例外的なメカニズムを提供します.このメカニズムにより、Jqueryは独自のプラグインを作成し、開発中の効率を向上させることができます.
1.1 JQueryのプラグインは3つのタイプに分けられます.
(1)オブジェクトメソッドをカプセル化するプラグイン(すなわちオブジェクトレベルの開発)
このタイプのプラグインは今日お話しするプラグインです.
(2)グローバル関数をカプセル化するプラグイン(クラスレベル開発)
JQueryネーミングスペースの下に独立した関数を追加できることを指します.
グローバル関数を追加するには、次のように定義します.
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
もちろん、複数のグローバル関数を追加することもできます.
呼び出し時に関数と同じ:jQuery.foo()jQuery.bar();または$.foo();$.bar('bar');
(3)セレクタカード
1.2 JQueryプラグインを作成する上で注意すべき点:
(1)プラグインの推奨ネーミング方法:jquery.[プラグイン名].js
(2)すべてのオブジェクトメソッドはJQuery.fnオブジェクトに付加され,すべてのグローバル関数はJQueryオブジェクト自体に付加されるべきである.
(3)プラグイン内部では,thisは現在セレクタによって取得されているJQueryオブジェクトを指し,一般的な方法のように内部のthisはDOM要素を指す.
(4)this.eachですべての要素を遍歴できる
(5)すべてのメソッドまたは関数プラグインは、セミコロンで終わる必要があります.そうしないと、圧縮時に問題が発生する可能性があります.より安全に書くために、プラグインのヘッダにセミコロン(;)を追加して、彼らの不規範なコードがプラグインに影響を与えないようにすることができます.
(6)プラグインは、プラグインのチェーン操作を保証するためにJQueryオブジェクトを返すべきである.
(7)JQueryオブジェクトの別名として$をプラグイン内部で使用することを避け,完全なJQueryで表すべきである.これにより衝突を避けることができます.
1.3 JQueryプラグインのメカニズム
JQueryは、JQuery機能を拡張するための2つの方法を提供する.次のようになります.
①jQuery.fn.extend()
②jQuery.extend()
1つ目は、プラグインタイプの1つ目のケース、2つ目のケースの2つです.
jQuery.extend()プラグインでは、既存のobjectのオブジェクトを拡張する重要な機能があります.
例:
var newSrc=$.extend(dest,src1,src2,src3...)
src 1,src 2,src 3...をdestにマージし,戻り値をマージ後のdestとすることを意味し,この方法のマージが見られる.
例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
結果は次のとおりです.
result={name:"Jerry",age:21,sex:"Boy"}
詳細は次のとおりです.
jQuery.extend関数の詳細には、この方法についてよく説明されています.
公式サイト:JQuery.extend()とJQuery.fn.extend()
ネーミングスペースの使用jQueryネーミングスペースでは、javaScript関数名と変数名の大量使用は禁止されています.しかし、いくつかの関数または変数名が他のjQueryプラグインと競合することは避けられないため、いくつかの方法を別のカスタムネーミングスペースにカプセル化することに慣れています.
ネーミングスペースを使用する関数は依然としてグローバル関数であり、呼び出すときに使用する方法は次のとおりです.
二.最初のJqueryプラグイン
JQueryプラグインを書く必要がある場合は、$.fnオブジェクトの後ろにプロパティ名を追加する必要があります.このプロパティ名は実際にはプラグイン名です.一般的なフレームワークは次のとおりです.
今私たちが書く必要があるプラグインの機能は簡単で、1つのオブジェクトをゆっくり隠すことです.fadeOut()という方法を使います.
OK、VS 2012を開きます.jscriptファイルを新規作成し、MyPlugin.jsと命名し、次のコードを追加します.
どのように使いますか.簡単です.
新しいhtmlページを作成し、jqueryファイルとMyPlugin.jsファイルを今回のページにインポートします.次のようになります.
HTMLコード:
はい、今ページの上のボタンをクリックすると、divがゆっくりと隠れてしまいます.の私たちがnormalを設定しているので、中にはいくつかの値を設定することもできます.
とても興奮しているのは、これにスマートなヒントがある以上、以下の図です.
ああ!三.プラグインは複数の要素コントロールに適用される.3.1複数の要素コントロールでJQueryプラグインを記述する上で注意すべき点の第4点を用いて、遍歴する場合はthis.eachメソッドを使用することができると書きます.$("ID").eachは、jqueryオブジェクト、配列、およびコレクションを巡回できます.OK.わかりました.では、私たちの新しいコードは次のとおりです.
上では主に.each()メソッドを用いて遍歴した.コードは簡単で、現在のオブジェクトの背景色cssスタイルを「Add」と「Remove」で直接切り替えることです.
HTMLのコードは次のとおりです.
JSコード:
簡単で、説明しません.
3.2チェーン操作
チェーン操作?闻いたことあるでしょ..例えば、次のような言葉があります.
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
すなわち、現在の要素の後に「.」を介してより多くの操作を実施することができる.この動作はとてもスマートだ.
では、私たちはどのようにしてこのような効果を実現することができますか?簡単です.相手を帰らせるだけでいいです.上の6つ目の点に注意してください.プラグインはJQueryオブジェクトを返して、プラグインのチェーン操作を保証する必要があります.
先ほどの例を見てみましょう
コードはすべて同じで、唯一の違いはthis.each(function(){これの前にreturnが追加されました.これで私たちのチェーン操作を実現しました.
そしてあなたはこうします.
文字がyellow色になっているのが見えます.
4独自のプラグインをカスタマイズビジネスプラグインにとって、カスタムプラグインのスタイルは欠かせません.私たちは自分で異なるスタイルを入力することで、開発者のデフォルトのスタイルを変えることができます.例えば、最も一般的なwidth、height、url、colorなどです.これらのカスタムものがなければ、開発者が開発したプラグインの利用価値は大きくなります.小さくなりました.
OK、次の例は、hoverのオブジェクトの場合、text、background、foregroundの3つのプロパティ、すなわちテキスト、背景色、前景色を変更できることを意味します.ユーザーは固定死ではなく、自分が設定したい値を設定することができます.しかし、ユーザーが設定していない場合、デフォルト値を与えます.
このようなプラグインを定義する開発フレームワークは、次のとおりです.
$.fn.YouPlugin = function (options) {...}
怠け者を防ぐためには、デフォルト値を設定する必要があります.設定されていない場合は、これらのデフォルト値を使用します.
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
では、デフォルト値とユーザーから渡された値はどのように結合されていますか?これは私たちが冒頭で話した$.extend()の知識が必要です.
var obj = $.extend(defaultVal, options);
このようにすると、ユーザーがカスタマイズした値がデフォルトのユーザーの値を上書きします.ユーザーが値を定義していない場合は、システムでカスタマイズします.
コードは次のとおりです.
コードも簡単で、上に説明がありますが、今はくどくどしていません.
どうやって使いますか?簡単です.
HTML code:
JS Code:
効果が見えます.
あなたたちに役に立つことを望んでいます.
OK、今まで、一つのプラグイン開発の基本要素はこれだけだったはずです.もともと後ろに複雑なコードがありますが、一緒に送ったので、次の節を待ってください.
プラグインの作成の目的は、既存の一連の方法や関数をカプセル化し、他の場所で繰り返し使用し、後期のメンテナンスを容易にすることです.
JQueryは、管理要素とスクリプトを簡単かつ効率的に提供するほか、コアモジュールに独自の方法と追加の機能を追加する例外的なメカニズムを提供します.このメカニズムにより、Jqueryは独自のプラグインを作成し、開発中の効率を向上させることができます.
1.1 JQueryのプラグインは3つのタイプに分けられます.
(1)オブジェクトメソッドをカプセル化するプラグイン(すなわちオブジェクトレベルの開発)
このタイプのプラグインは今日お話しするプラグインです.
(2)グローバル関数をカプセル化するプラグイン(クラスレベル開発)
JQueryネーミングスペースの下に独立した関数を追加できることを指します.
グローバル関数を追加するには、次のように定義します.
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
もちろん、複数のグローバル関数を追加することもできます.
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
呼び出し時に関数と同じ:jQuery.foo()jQuery.bar();または$.foo();$.bar('bar');
(3)セレクタカード
1.2 JQueryプラグインを作成する上で注意すべき点:
(1)プラグインの推奨ネーミング方法:jquery.[プラグイン名].js
(2)すべてのオブジェクトメソッドはJQuery.fnオブジェクトに付加され,すべてのグローバル関数はJQueryオブジェクト自体に付加されるべきである.
(3)プラグイン内部では,thisは現在セレクタによって取得されているJQueryオブジェクトを指し,一般的な方法のように内部のthisはDOM要素を指す.
(4)this.eachですべての要素を遍歴できる
(5)すべてのメソッドまたは関数プラグインは、セミコロンで終わる必要があります.そうしないと、圧縮時に問題が発生する可能性があります.より安全に書くために、プラグインのヘッダにセミコロン(;)を追加して、彼らの不規範なコードがプラグインに影響を与えないようにすることができます.
(6)プラグインは、プラグインのチェーン操作を保証するためにJQueryオブジェクトを返すべきである.
(7)JQueryオブジェクトの別名として$をプラグイン内部で使用することを避け,完全なJQueryで表すべきである.これにより衝突を避けることができます.
1.3 JQueryプラグインのメカニズム
JQueryは、JQuery機能を拡張するための2つの方法を提供する.次のようになります.
①jQuery.fn.extend()
②jQuery.extend()
1つ目は、プラグインタイプの1つ目のケース、2つ目のケースの2つです.
jQuery.extend()プラグインでは、既存のobjectのオブジェクトを拡張する重要な機能があります.
例:
var newSrc=$.extend(dest,src1,src2,src3...)
src 1,src 2,src 3...をdestにマージし,戻り値をマージ後のdestとすることを意味し,この方法のマージが見られる.
例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
結果は次のとおりです.
result={name:"Jerry",age:21,sex:"Boy"}
詳細は次のとおりです.
jQuery.extend関数の詳細には、この方法についてよく説明されています.
公式サイト:JQuery.extend()とJQuery.fn.extend()
ネーミングスペースの使用jQueryネーミングスペースでは、javaScript関数名と変数名の大量使用は禁止されています.しかし、いくつかの関数または変数名が他のjQueryプラグインと競合することは避けられないため、いくつかの方法を別のカスタムネーミングスペースにカプセル化することに慣れています.
jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
ネーミングスペースを使用する関数は依然としてグローバル関数であり、呼び出すときに使用する方法は次のとおりです.
$.myPlugin.foo();
$.myPlugin.bar('baz');
二.最初のJqueryプラグイン
JQueryプラグインを書く必要がある場合は、$.fnオブジェクトの後ろにプロパティ名を追加する必要があります.このプロパティ名は実際にはプラグイン名です.一般的なフレームワークは次のとおりです.
(function( $ ) {
$.fn.myPlugin = function() {
//
};
})( jQuery );
今私たちが書く必要があるプラグインの機能は簡単で、1つのオブジェクトをゆっくり隠すことです.fadeOut()という方法を使います.
OK、VS 2012を開きます.jscriptファイルを新規作成し、MyPlugin.jsと命名し、次のコードを追加します.
(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
})(jQuery);
どのように使いますか.簡単です.
新しいhtmlページを作成し、jqueryファイルとMyPlugin.jsファイルを今回のページにインポートします.次のようになります.
js ：
<br> $(document).ready(function () {
<br> $("#btn1").click(function () {
<br> $("#div1").myPlugin();
<br> });
<br> });
<br>
HTMLコード:
My God
はい、今ページの上のボタンをクリックすると、divがゆっくりと隠れてしまいます.の私たちがnormalを設定しているので、中にはいくつかの値を設定することもできます.
とても興奮しているのは、これにスマートなヒントがある以上、以下の図です.
ああ!三.プラグインは複数の要素コントロールに適用される.3.1複数の要素コントロールでJQueryプラグインを記述する上で注意すべき点の第4点を用いて、遍歴する場合はthis.eachメソッドを使用することができると書きます.$("ID").eachは、jqueryオブジェクト、配列、およびコレクションを巡回できます.OK.わかりました.では、私たちの新しいコードは次のとおりです.
(function ($) {
$.fn.hoverElement = function () {
this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);
上では主に.each()メソッドを用いて遍歴した.コードは簡単で、現在のオブジェクトの背景色cssスタイルを「Add」と「Remove」で直接切り替えることです.
HTMLのコードは次のとおりです.
First Button..
Second Button..
Third Button..
JSコード:
<br> $(document).ready(function () {
<br> $(".hoverText").hoverElement();
<br> });
<br>
簡単で、説明しません.
3.2チェーン操作
チェーン操作?闻いたことあるでしょ..例えば、次のような言葉があります.
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
すなわち、現在の要素の後に「.」を介してより多くの操作を実施することができる.この動作はとてもスマートだ.
では、私たちはどのようにしてこのような効果を実現することができますか?簡単です.相手を帰らせるだけでいいです.上の6つ目の点に注意してください.プラグインはJQueryオブジェクトを返して、プラグインのチェーン操作を保証する必要があります.
先ほどの例を見てみましょう
(function ($) {
$.fn.hoverElement = function () {
return this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);
コードはすべて同じで、唯一の違いはthis.each(function(){これの前にreturnが追加されました.これで私たちのチェーン操作を実現しました.
そしてあなたはこうします.
$(document).ready(function () {
$(".hoverText").hoverElement().css("color","yellow");
});
文字がyellow色になっているのが見えます.
4独自のプラグインをカスタマイズビジネスプラグインにとって、カスタムプラグインのスタイルは欠かせません.私たちは自分で異なるスタイルを入力することで、開発者のデフォルトのスタイルを変えることができます.例えば、最も一般的なwidth、height、url、colorなどです.これらのカスタムものがなければ、開発者が開発したプラグインの利用価値は大きくなります.小さくなりました.
OK、次の例は、hoverのオブジェクトの場合、text、background、foregroundの3つのプロパティ、すなわちテキスト、背景色、前景色を変更できることを意味します.ユーザーは固定死ではなく、自分が設定したい値を設定することができます.しかし、ユーザーが設定していない場合、デフォルト値を与えます.
このようなプラグインを定義する開発フレームワークは、次のとおりです.
$.fn.YouPlugin = function (options) {...}
怠け者を防ぐためには、デフォルト値を設定する必要があります.設定されていない場合は、これらのデフォルト値を使用します.
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
では、デフォルト値とユーザーから渡された値はどのように結合されていますか?これは私たちが冒頭で話した$.extend()の知識が必要です.
var obj = $.extend(defaultVal, options);
このようにすると、ユーザーがカスタマイズした値がデフォルトのユーザーの値を上書きします.ユーザーが値を定義していない場合は、システムでカスタマイズします.
コードは次のとおりです.
(function ($) {
$.fn.textHover = function (options) {//options 。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
//
var obj = $.extend(defaultVal, options);
return this.each(function () {
var selObject = $(this);//
var oldText = selObject.text();// text
var oldBgColor = selObject.css("background-color");//
var oldColor = selObject.css("color");//
selObject.hover(function () {// hover 。
selObject.text(obj.Text);//
selObject.css("background-color", obj.BackColor);//
selObject.css("color", obj.ForeColor);//
},
function () {
selObject.text(oldText);
selObject.css("background-color", oldBgColor);
selObject.css("color", oldColor);
}
);
});
}
})(jQuery);
コードも簡単で、上に説明がありますが、今はくどくどしていません.
どうやって使いますか?簡単です.
HTML code:
Mouse over here.....
Mouse over here.....
JS Code:
$(document).ready(function () {
$('#div1').textHover({
Text: 'I am going to over..',
ForeColor: 'yellow',
BackColor: 'Red'
});
$('#div2').textHover({ Text: 'I am second div...' });
});
効果が見えます.
あなたたちに役に立つことを望んでいます.
OK、今まで、一つのプラグイン開発の基本要素はこれだけだったはずです.もともと後ろに複雑なコードがありますが、一緒に送ったので、次の節を待ってください.