ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery_jqueryにおけるextendの使用例の分析
この記事の例では、JQuery での extend の使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
extend() 関数は jQuery の基本関数の 1 つであり、その機能は既存のオブジェクトを拡張することです。 Extend はプラグインを作成するときによく使用されるメソッドです。このメソッドにはオーバーロードされたプロトタイプがいくつかあります。 $.extend(prop) は、jQuery オブジェクトを拡張するために使用され、jQuery 名前空間に関数を追加するために使用できます。
1. jQuery.extend関数のソースコード
jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {},//参数目标对象 i = 1, length = arguments.length,//参数长度 deep = false;//是否为深度复制 // Handle a deep copy situation //如果为深度复制,则目标对象和原对象游标值i,以及深度值都进行更新 if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; // skip the boolean and the target i = 2; } // Handle case when target is a string or something (possible in deep copy) //当目标对象的值类型错误,则重置为{} if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } // extend jQuery itself if only one argument is passed //当参数值长度为1的情况下,目标对象就为jQuery自身 if ( length === i ) { target = this; --i; } for ( ; i < length; i++ ) { // Only deal with non-null/undefined values if ( (options = arguments[ i ]) != null ) {//忽略空对象 // Extend the base object for ( name in options ) { src = target[ name ]; copy = options[ name ];//存储对象的值 // Prevent never-ending loop if ( target === copy ) { continue; } // Recurse if we're merging plain objects or arrays //深度复制只有属性深度多于俩层的对象关系的结构的,如{a:{s:21,age:11}}或{a:['s'=>21,'age'=>11]} if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) {//如果是数组对象 copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else {//普通对象 clone = src && jQuery.isPlainObject(src) ? src : {}; } // Never move original objects, clone them // 调用自身进行递归复制 target[ name ] = jQuery.extend( deep, clone, copy ); // Don't bring in undefined values } else if ( copy !== undefined ) {//非深度CP直接覆盖目标属性 target[ name ] = copy; } } } } // Return the modified object return target; };
2. Jquery の拡張メソッドのプロトタイプは次のとおりです:
1.extend(dest,src1,src2,src3...);
その意味は、src1、src2、src3... を dest にマージすることであり、戻り値はマージされた dest です。このメソッドはマージ後に dest の構造を変更していることがわかります。マージ結果を取得したいが、dest の構造を変更したくない場合は、次のように使用できます:
2. 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"}
つまり、後のパラメータが前のパラメータと同じ名前を持つ場合、後のパラメータは前のパラメータ値を上書きします。
3.extend(boolean,dest,src1,src2,src3...)
最初のパラメータのブール値はディープ コピーを実行するかどうかを表し、他のパラメータは以前に紹介したものと一致します
例:
var result=$.extend( true, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );
サブオブジェクトの場所: {city: "Boston"} が src1 にネストされており、サブオブジェクトの場所: {state: "MA"} も src2 にネストされていることがわかります。が 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"}}
2. Jqueryのextendメソッドでdestパラメータを省略した場合
上記の extend メソッドのプロトタイプの dest パラメーターは省略できます。省略した場合、メソッドは src パラメーターを 1 つだけ持つことができ、src は次のような extend メソッドを呼び出すオブジェクトにマージされます。
このメソッドは、次のように src を jquery のグローバル オブジェクトにマージします。
$.extend({ hello:function(){alert('hello');} });
2. $.fn.extend(src)
$.fn.extend({ hello:function(){alert('hello');} });
3. 一般的に使用される拡張機能の例をいくつか示します:
$.extend({net:{}});
$.extend($.net,{ hello:function(){alert('hello');} })
この記事が皆さんの jQuery プログラミングに役立つことを願っています。