jQuery की विस्तार विधि पर खाली वस्तु क्यों पास करें?

Question

jQuery में बहुत साफ extend विधि है, जो 2 ऑब्जेक्ट्स को एक में विलीन करती है।

इस प्रकार jQuery Plugins authoring page पर वे एक उदाहरण दिखाने:

var settings = $.extend({ 
    'location'   : 'top', 
    'background-color' : 'blue' 
}, options); 

हालांकि, मैंने देखा है कई प्लग, तो जैसे पहले पैरामीटर के रूप में एक खाली वस्तु पारित:

var settings = $.extend({}, { 
    'location'   : 'top', 
    'background-color' : 'blue' 
}, options); 

जहां तक जैसा कि मैं बता सकता हूं, ये दोनों एक ही चीज करते हैं। फर्क सिर्फ इतना है हो सकता है अगर defaults हैं अपनी ही चर में संग्रहीत किया गया है:

var defaults = { 
    'location'   : 'top', 
    'background-color' : 'blue' 
}, 
settings = $.extend({}, defaults, options); 

इस तरह, आप हमेशा उन्हें बिना अपने चूक का उपयोग कर सकते options द्वारा ओवरराइड जा रहा है। तब भी जब वे एक चर में चूक की दुकान नहीं है क्यों इतने सारे प्लगइन लेखकों extend को एक खाली वस्तु पारित करने के लिए चुनते हैं,:

---

यहाँ सवाल है?

क्या मुझे कुछ याद आ रही है?

Answer 1

करने के कारणों में (दूसरा उदाहरण के लिए) ...

• विरासत में प्राप्त अज्ञान ...(देखा कि यह उस तरह से किया, और अभ्यास की नकल की)

• आंतरिक अज्ञान ... (यह अपने पिछले कोड ब्लॉक में के रूप में ठीक से किया देखा है, लेकिन एक ऑन-द-मक्खी वस्तु के साथ कैश की गई वस्तु की जगह और यह नहीं पता था कि खाली वस्तु को हटाया जाना चाहिए)

• ग्लोबल वार्मिंग। विस्तार ... की ओर ध्यान की

• अभाव (2 बात करने के लिए समान है, जानता है कि यह आवश्यक नहीं है, लेकिन वास्तव में कभी नहीं कोड की जांच के लिए समय निकाला)

• वैश्विक ठंडा।

• पीढ़ी बचाव की मुद्रा में कोडिंग ... (डर है कि चूक किसी दिन एक पुन: प्रयोज्य वस्तु में फिर से काम किया जा सकता है, और है कि खाली वस्तु उस समय शामिल नहीं किया जाएगा डर लगता है)

• jQuery डेवलपर्स हमेशा आवाजें उन्हें बताएं ;-)

कुल मिलाकर, आप सही हैं। मध्य वस्तु बनाई जाती है, एक खाली वस्तु पर प्रतिलिपि बनाई जाती है, फिर त्याग दी जाती है। यह एक अनावश्यक और अपमानजनक अभ्यास है।

Answer 2

विस्तार वस्तुओं की प्रतिलिपि बनाने के लिए एक बहुत ही उपयोगी कार्य है।

उदाहरण के लिए इस पर विचार करें:

foo = {'foo':'a'} 
f = foo 
f.foo = 'hello' 
console.log(f) 
    Object {foo="hello"} 
console.log(foo) 
    Object {foo="hello"} 

f = $.extend({},foo) 
f.foo = 'hello world' 
console.log(f) 
    Object {foo="hello world"} 
console.log(foo) 
    Object {foo="hello"} 

तो जैसा कि आप $ .extend देख सकते हैं वास्तव में वस्तु की नकल की।

संपादित

कारण है कि पहले पैरामीटर एक रिक्त वस्तु हो गया है क्योंकि कैसे extend कार्यों की है। यहाँ है कैसे jQuery परिभाषित करता है extend:

jQuery.extend(target [, object1] [, objectN]) 
    target An object that will receive the new properties 
      if additional objects are passed in or that will 
      extend the jQuery namespace if it is the sole argument. 
    object1 An object containing additional properties to merge in. 
    objectN Additional objects containing properties to merge in. 

और अतिरिक्त इस वाक्यांश महत्वपूर्ण है: कि लक्ष्य वस्तु (पहला तर्क) संशोधित किया जाएगा, और भी $ से लौटाया नहीं जाएगा

ध्यान रखें .extend()।

तो {} को पहले पैरामीटर के रूप में पास करके, उस खाली वस्तु को बढ़ाया गया और फिर वापस कर दिया गया।

settings = $.extend({}, defaults, options); के अपने उदाहरण पर वापस लौटना। यदि आप इसे settings = $.extend(defaults, options); पर बदल देंगे, तो सेटिंग्स समान होंगी हालांकि यहां डिफ़ॉल्ट भी बदले जाएंगे। आपको {} होने के पहले तर्क की आवश्यकता क्यों है।

Answer 3

डालने का एक और तरीका क्या Miki ने कहा:

var defaults = { 
    one: 'foo', 
    two: 'bar' 
}; 

var options = { 
    two: 'apples', 
    three: 'bananas' 
}; 

// The safe way to extend 
var settings = $.extend({}, defaults, options); 

console.log(settings); // {one: 'foo', two: 'apples', three: 'bananas'} 
console.log(defaults); // {one: 'foo', two: 'bar'} 
console.log(options); // {two: 'apples', three: 'bananas'} 
console.log(settings === defaults); // false 

// Careless way to extend 
var settings = $.extend(defaults, options); 

console.log(settings); // {one: 'foo', two: 'apples', three: 'bananas'} 
console.log(defaults); // {one: 'foo', two: 'apples', three: 'bananas'} 
console.log(options); // {two: 'apples', three: 'bananas'} 
console.log(settings === defaults); // true