jQuery.extend 関数と使用法の詳細_jquery

jquery.extend関数の詳しい説明

JQuery の extend メソッド:

Jquery の拡張メソッド extend は、プラグインを作成するときによく使用されるメソッドです。このメソッドにはいくつかのオーバーロードされたプロトタイプがあります。ここでは、それについて一緒に学びましょう。

1. Jquery の拡張メソッドのプロトタイプは次のとおりです:

extend(dest,src1,src2,src3...);

その意味は、src1、src2、src3... を dest にマージすることであり、戻り値はマージされた dest です。このメソッドはマージ後に dest の構造を変更していることがわかります。マージ結果を取得したいが、dest の構造を変更したくない場合は、次のように使用できます:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数

このようにして、src1、src2、src3...をマージすることができ、マージ結果がnewSrcに返されます。例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

その後のマージ結果

result={name:"Jerry",age:21,sex:"Boy"}

つまり、後のパラメータが前のパラメータと同じ名前を持つ場合、後のパラメータは前のパラメータ値を上書きします。

2. dest パラメータを省略します

上記の extend メソッドのプロトタイプ内の dest パラメーターは省略できます。省略した場合、メソッドは src パラメーターを 1 つだけ持つことができ、src は次のように extend メソッドを呼び出すオブジェクトにマージされます。

1. $.extend(src)

このメソッドは、次のように src を jquery のグローバル オブジェクトにマージします。

 $.extend({
 hello:function(){alert('hello');}
 });

は、hello メソッドを jquery のグローバル オブジェクトにマージすることです。

2. $.fn.extend(src)

このメソッドは、src を次のような jquery インスタンス オブジェクトにマージします。

 $.fn.extend({
 hello:function(){alert('hello');}
 });

は、hello メソッドを jquery インスタンス オブジェクトにマージすることです。

次に、一般的に使用される拡張機能の例をいくつか示します:

$.extend({net:{}});

これは、jquery グローバル オブジェクトのネット名前空間を拡張します。

 $.extend($.net,{
  hello:function(){alert('hello');}
 })

これは、以前に拡張された Jquery net 名前空間に hello メソッドを拡張するものです。

3. Jquery の extend メソッドにもオーバーロードされたプロトタイプがあります:

extend(boolean,dest,src1,src2,src3...)

最初のパラメータはディープコピーを実行するかどうかを表します。他のパラメータは前に紹介したものと同じです。

の例を見てみましょう。

var result=$.extend( true, {}, 
  { name: "John", location: {city: "Boston",county:"USA"} }, 
  { last: "Resig", location: {state: "MA",county:"China"} } );

サブオブジェクト location:{city:"Boston"} が src1 にネストされており、サブオブジェクト location:{state:"MA"},最初のディープ コピー パラメーターが true の場合、マージされた結果は次のようになります:

result={name:"John",last:"Resig",
    location:{city:"Boston",state:"MA",county:"China"}}

つまり、src 内のネストされたサブオブジェクトもマージします。最初のパラメーターのブール値が false の場合、次のようにマージの結果がどのようになるかを見てみましょう:

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
          ); 

マージされた結果は次のようになります:

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

上記は、$.extend() がプロジェクトでよく使用される詳細の一部です。

追加: jquery プラグインの作成には extend() メソッドもよく使用します。そのため、jquery プラグインの種類は次のとおりです。

jQuery プラグインの種類

1. オブジェクトメソッドのカプセル化 このプラグインは、オブジェクトメソッドをカプセル化し、セレクターを通じて取得した jQuery オブジェクトを操作するために使用されます。このタイプのプラグインは、parent() メソッドや appendTo( など、jQuery スクリプト ライブラリ内のこの形式で、かなりの数の jQuery メソッドがカーネルに「挿入」されます。 ）メソッドを待ってください。

2. グローバル関数をカプセル化すると、独立した関数を jQuery 名前空間に追加できます。たとえば、一般的に使用される jQuery.ajax() メソッドと、先頭と末尾のスペースを削除する jQuery.trim() メソッドはすべて、jQuery 内のグローバル関数としてカーネルにアタッチされるプラグインです。

3. セレクター プラグイン jQuery のセレクターは非常に強力ですが、場合によっては、お気に入りのセレクターの一部を拡張するためにセレクター プラグインを使用する必要があります。

jQuery.fn.extend() は主に、上記の 3 つのタイプのうちの最初のプラグインを拡張するために使用され、jQuery.extend() は後の 2 つのプラグインを拡張するために使用されます。どちらのメソッドも、Object 型のパラメーターを 1 つ受け入れます。 Object オブジェクトの「名前と値のペア」は、それぞれ「関数またはメソッドの名前/関数本体」を表します。

jquery.extend関数の使い方の詳しい説明

最近jQueryを勉強しています。 jQuery.extend 拡張関数の使用法を記録します。

1. jQuery の静的メソッドを拡張します。

$.extend({
test:function(){alert('test函数')}
})

使用法: $.test()

2. 複数のオブジェクトを結合します

jQuery.extend(css1, css2) を例に挙げます。css1 と css2 にはいくつかの属性があります (メソッドは引き続き処理します。ここでは属性について説明します)。 extend 関数は、css2 に存在するが css2 には存在しない属性を css1 に追加します。css2 の特定の属性が css1 の特定の属性と同じ名前を共有する場合、css2 の属性を使用して同じ名前の属性が上書きされます。 css1の。 css1 は最終的な統合オブジェクトです。または、次のこともできます:

3.深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

 // 以前的 .extend()  
  jQuery.extend(  
   { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
  );  
   // 结果:  
   // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  // 新的更深入的 .extend()  
  jQuery.extend( true,  
  { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
 );  
 // 结果  
  // => { name: “John”, last: “Resig”,  
 //   location: { city: “Boston”, state: “MA” } }