$.extendの役割
4466 ワード
この使い方を初めて見たのは、jqueryのプラグイン開発で見た書き方で、デフォルトのパラメータとカスタムパラメータの上書きに使用されます.一般的な使用シーン:
このようなオーバーライドでは、optのプロパティにdefのデフォルトの構成と1つのkeyがある場合、他のプロパティに影響を与えることなく、対応するプロパティを直接オーバーライドします.今日開発の仕事の中でまた$を見ました.extend()の新しい使い方は、検索での使用です.検索バーに適切な名前を入力すると、インタフェースには対応する情報のみが表示されます.$を運用するextendの方法も大きく異なる.
$.extend(this.sData, {name: this.soso});//実はまだこの前にsData={}なので、ここがあまり役に立つとは思わなかった$.extend(param, this.sData);//paramはデフォルトのパラメータで自分のすべてのデータを取得してsDataと上書きします.nameがthisに等しい限り.soso
このような使い方に加えて、下のオブジェクトや配列の他の値を保持し、対応するプロパティのみを上書きする深さ遍歴もできます.
このとき,bananaの他の属性が上書きされているのは,深さ遍歴が行われていないことであることが分かった.最初のパラメータをtrueに変更するだけでいいです.
次はjquery実装のコードです
function XXX(opt){
var def = {}//
var optRea = $.extend({},def,opt)
}
このようなオーバーライドでは、optのプロパティにdefのデフォルトの構成と1つのkeyがある場合、他のプロパティに影響を与えることなく、対応するプロパティを直接オーバーライドします.今日開発の仕事の中でまた$を見ました.extend()の新しい使い方は、検索での使用です.検索バーに適切な名前を入力すると、インタフェースには対応する情報のみが表示されます.$を運用するextendの方法も大きく異なる.
$.extend(this.sData, {name: this.soso});//実はまだこの前にsData={}なので、ここがあまり役に立つとは思わなかった$.extend(param, this.sData);//paramはデフォルトのパラメータで自分のすべてのデータを取得してsDataと上書きします.nameがthisに等しい限り.soso
このような使い方に加えて、下のオブジェクトや配列の他の値を保持し、対応するプロパティのみを上書きする深さ遍歴もできます.
$(document).ready(function() {
var htmlCode, statusCh, node;
var object1 = {
apple: [0,1,2,34],
banana: {
weight: 52,
price: 100
},
cherry: 97
};
var object2 = {
banana: {
price: 200
},
durian: 100
};
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
var arr = [];
$.each(obj, function(key, val) {
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
arr.push(next);
});
return "{ " + arr.join(", ") + " }";
};
console.log(printObj(object1))
$.extend(object1,{banana: {
weight: 55,
}})
console.log(printObj(object1))
})
[Log] {"apple":[0,1,2,34],"banana":{"weight":52,"price":100},"cherry":97} (line 28)
[Log] {"apple":[0,1,2,34],"banana":{"weight":55},"cherry":97} (line 32)
このとき,bananaの他の属性が上書きされているのは,深さ遍歴が行われていないことであることが分かった.最初のパラメータをtrueに変更するだけでいいです.
console.log(printObj(object1))
$.extend(true,{banana: {
weight: 55,
}})
console.log(printObj(object1))
[Log] {"apple":[0,1,2,34],"banana":{"weight":52,"price":100},"cherry":97} (base.js, line 28)
[Log] {"apple":[0,1,2,34],"banana":{"weight":52,"price":100},"cherry":97} (base.js, line 32)
次はjquery実装のコードです
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
//target
target = arguments[ 0 ] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
// Skip the boolean and the target
target = arguments[ i ] || {};
i++;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
target = {};
}
// jQuery extend
// Extend jQuery itself if only one argument is passed
if ( i === length ) {
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
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 ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};