JQuery में विस्तार () कैसे काम करता है?


119

मैंने इसे एक प्लगइन में देखा:

var options = $.extend(defaults, options); 

यह कैसे काम करता है?

क्या करता extend()है?


1
आप इसके बारे में jQuery प्रलेखन पर पढ़ सकते हैं लेकिन मुझे लगता है कि यह इसके लिए एक बेहतर स्पष्टीकरण है।
ifaour

jQuery के पास अच्छे डॉक्स हैं। api.jquery.com खोज jQuery फ़ील्ड में बस विधि का नाम टाइप करें ।
user113716

42
मुझे लगता है कि टोड जानना चाहता है कि jQuery.extend कैसे काम करता है, न कि इसका उपयोग कैसे करें। उदाहरण के लिए, क्या यह प्रत्येक संपत्ति के माध्यम से एक पूरी नई वस्तु बनाने के लिए लूप करता है, या क्या यह कुछ भयानक तरीके से प्रोटोटाइप वंशानुक्रम का उपयोग करता है।
b01

जवाबों:


178

एकाधिक पैरामीटर

दस्तावेज़ यह बताने में सटीक नहीं है कि काम कैसे आगे बढ़ता है, इसलिए मैंने थोड़ा परीक्षण किया:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

( console.logफ़ंक्शन का उद्देश्य फायरबग में काम करना है, इसे अलर्ट के साथ बदलें () या यदि आप चाहें तो कुछ अन्य आउटपुट फ़ंक्शन करें)।

परिणाम हैं:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

इसके द्वारा हम देख सकते हैं कि jQuery.extend ():

  • पहले पैरामीटर द्वारा प्रदान की गई वस्तु से शुरू होता है।
  • किसी भी संपत्ति को दूसरे पैरामीटर में जोड़ता है। यदि संपत्ति पहले से ही पहले पैरामीटर में मौजूद है, तो यह ओवरराइट किया गया है। दूसरे पैरामीटर के लिए ऑब्जेक्ट अपरिवर्तित है।
  • किसी भी बाद के पैरामीटर के साथ उपरोक्त दोहराता है।
  • पहला पैरामीटर लौटाता है।

यह विकल्प का पूरा सेट प्राप्त करने के लिए उपयोगकर्ता और डिफ़ॉल्ट विकल्प-वस्तुओं के संयोजन के लिए उपयोगी है:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var someOtherDefaultOptions = {
    baz: 3
  };

  var allOptions = jQuery.extend(
    defaultOptions,
    someOtherDefaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1, baz:1});

ध्यान दें कि "अशक्त" ओवरराइटिंग के लिए एक वैध मूल्य है, लेकिन "अपरिभाषित" नहीं है। आप इसका उपयोग करने में सक्षम हो सकते हैं।

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);

का परिणाम:

A: Foo=null Bar=a

एकल पैरामीटर

यदि आप केवल एक ऑब्जेक्ट पास करते हैं jQuery.extend(), तो jQuery मान लेता है कि jQueryऑब्जेक्ट खुद "पहला" पैरामीटर है (यानी: जिसे संशोधित किया जाना है), और आपकी वस्तु "दूसरी" है (यानी: पहले जोड़ने के लिए) । इसलिए:

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

का परिणाम:

Before: undefined
After: 1

3
इसलिए अगर b.baz एक वस्तु थी {zed: 'dark'}बजाय कहा 2और आप सेट करते हैं r.baz.zed = 'light', तो मूल्य क्या होगा b.baz.zed? यानी संपत्तियों को संदर्भ द्वारा कॉपी या मर्ज किया जाता है?
एरचबस्चुलज़

4
अपने ही सवाल का जवाब देने, b.baz.zedहोगा light- यानी मूल्यों संदर्भ द्वारा विलय कर रहे हैं। एक बेला
ErichBSchulz

4
शानदार स्पष्टीकरण, +1
कैरी केंडल

2
मुझे उम्मीद है कि आधिकारिक दस्तावेज इस तरह स्पष्ट होना चाहिए। +1
थ्रीक नुगरोहोटो

2
$ .extend (सच्चा, ऑब्जेक्ट 1, ऑब्जेक्ट 2); और $ .extend (object1, object2); अंतर ...
विनय एस जैन

27

यह एक वस्तु की सामग्री को दूसरे में विलय कर देता है । यदि हम दो ऑब्जेक्ट पास करते हैं, तो पहले ऑब्जेक्ट / पहले पैरामीटर में दूसरी ऑब्जेक्ट गुण जोड़े जाते हैं

Ex: $.extend(object1, object2);

अब ऑब्जेक्ट 1 में ऑब्जेक्ट 2 के गुण हैं

यदि हम दो वस्तुओं को मर्ज करना चाहते हैं , तो हमें पहले पैरामीटर में खाली ऑब्जेक्ट को पास करना होगा

Ex: var newObject = $.extend({}, object1, object2);

अब newObject में object1 और object2 दोनों के गुण हैं


12

JQuery के प्रलेखन से

पहली वस्तु में एक साथ दो या दो से अधिक वस्तुओं की सामग्री को मिलाएं।

एक प्लगइन संदर्भ में: यदि उपयोगकर्ता फ़ंक्शन के लिए वैकल्पिक पैरामीटर सेट नहीं करता है, तो इसके बजाय एक डिफ़ॉल्ट मान का उपयोग किया जाएगा।


1
यह उत्तर एक टिप्पणी में होना चाहिए।
नोलो

थैंक यू जॉब !!
हर्षवर्धन

7

JQuery में कैसे काम करता है? [हल]

jQuery की गहरी प्रति और हल्की प्रति है। पहला बूलियन इसे तय करता है, प्रकाश के लिए गहरे और झूठे के लिए सच है।

उदाहरण के लिए:

  • jQuery.extend (गलत, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    परिणाम होगा: {'a': {'a2': 2}} क्योंकि यह हल्की कॉपी है, इसलिए स्तर 1 की तुलना करें।

    यहां छवि विवरण दर्ज करें

  • jQuery.extend (सत्य, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    परिणाम होगा: {'a': {'a1': 1, 'a2': 2}} यह कई स्तर की वस्तु (जैसे सरणी का स्तर) के साथ गहरी प्रतिलिपि है

    यहां छवि विवरण दर्ज करें

  • jQuery.extend (ए, बी, सी) के साथ ए, बी, सी वस्तु या सरणी है। फ्लो ओवरराइट b-> a, c -> a (b ओवरराइट a, c ओवरराइड ए ...) होगा, यह फंक्शन वापस आ जाएगा और मान भी बदल जाता है।

उन्नत उदाहरण:

  • jQuery.extend ({'नंबर_परम': 1})

    मामले में आप सिर्फ एक परम पास करें। jQuery खुद को विस्तारित करेगा। कंसोल.लॉग (jQuery ['नंबर_परम']) 1 आउटपुट करेगा।

    यहां छवि विवरण दर्ज करें

  • jQuery.extend (1, {'नंबर_परम': '2'}); यह उदाहरण स्वयं jQuery का नहीं है। पहला पैरामीटर बूलियन होना चाहिए। इस स्थिति में यह {'नंबर_परम': '2'} और jQuery अपडेट नहीं होगा।

    यहां छवि विवरण दर्ज करें

  • jQuery.extend (ए, बी, सी, डी, ई, एफ); ऑर्डर मर्ज होगा। बी -> ए, सी -> ए, डी -> ए, ई -> ए, एफ -> ए (बी ओवरराइड ए, सी ओवरराइड ए ...)। और परिणाम वापसी एक होगी।

    a = {'p': 1} के साथ। jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) a वापस आएगा, और a = {'p': 6}। इस फ़ंक्शन के लिए संख्या पैरामीटर असीमित है।

    यहां छवि विवरण दर्ज करें


1
से नाव "चेतावनी: पहला तर्क के लिए झूठी पासिंग समर्थित नहीं है।"
नोलो

2

उद्देश्य एक मौजूदा वस्तु का विस्तार करना है। उदाहरण के लिए यदि हमारे पास कोई टेम्प्लेट ऑब्जेक्ट है और हम इसे और अधिक गुणों को जोड़ना चाहते हैं या मौजूदा गुणों को ओवरराइड करना चाहते हैं, तो jquery का विस्तार उपयोगी हो सकता है।

var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"

};

अब अगर हम $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); इसे बढ़ाना चाहते हैं, तो यह हमें ouput देगा, कारओबजेक्टटेम्पलेट का विस्तार और जोड़ देगा

{"color":"red"} property and overriding "model" property from "city" to "amaze"

पहला बूलियन पैरामीटर सही / गलत इंगित करना है अगर हमें गहरी या उथली प्रति चाहिए


गहरी या उथली प्रति का क्या अर्थ है?
सेलवा गणपति

0

यह ठीक यही करता है

विवरण : पहली वस्तु में एक साथ दो या अधिक वस्तुओं की सामग्री को मिलाएं।

JQuery.extend पर अधिक ()


1
डॉक्स के लिए एक लाइन उत्तर और लिंक एक उत्तर के रूप में ज्यादा उपयोग के नहीं हैं और इसे एक टिप्पणी में छोड़ दिया जाना चाहिए।
नोलो
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.