jQuery विस्तारित मानों को ओवरराइट करता है

Question

मैं डिफ़ॉल्ट पैरामीटर को ओवरराइट करने के लिए प्लगइन में jQuery extend का उपयोग कर रहा हूं। हालांकि, मुझे एक समस्या है।

slider.settings = { 
      background: { 
       animation : { 
        direction : 'horizontal', 
        increment : 15 //can be any number 
       } 
      } 
     } 

अब, मैं direction पैरामीटर अधिलेखित करना चाहते हैं:

यहाँ मेरी डिफ़ॉल्ट सेटिंग्स सरणी है। यहाँ सरणी है कि मैं extend का उपयोग कर के साथ विलय होगा: अब

settingsToOverwrite = { 
     background:{ 
      animation:{ 
       direction:'vertical' 
      } 
     } 
    } 

, मैं दो विलय:

slider.settings = $.extend(slider.settings, options) 

मैं देख सकता हूँ कि दिशा मूल्य अद्यतन किया गया है। हालांकि, वृद्धि अब वहां नहीं है। मुझे पता है कि इस समस्या से बचने के लिए मैं केवल पहले स्तर पर पैरामीटर सेट कर सकता हूं लेकिन मुझे अपना रास्ता करने में अधिक कोड स्पष्टता दिखाई देती है। क्या ऐसा करने का कोई तरीका है? यदि नहीं, तो मैं सबकुछ केवल एक स्तर गहरा होने के लिए बदल दूंगा।

Answer 1

डिफ़ॉल्ट रूप से, jQuery.extend() केवल तत्काल गुण तुलना, एक "उथले प्रदर्शन मर्ज करें। " चूंकि दोनों ऑब्जेक्ट्स में background है, इसलिए यह दूसरी ऑब्जेक्ट से पूरे background लेता है।

लेकिन, pass a true पहले तर्क के रूप में, और"गहरी विलय" करेगा।

slider.settings = $.extend(true, slider.settings, options); 

---

इसके अतिरिक्त, क्योंकि 1 Objecttarget है और दोनों संशोधित किया जाएगा और return 'डी, आप slider.settings बस के साथ अद्यतन कर सकते हैं:

$.extend(true, slider.settings, options); 

और, यदि आप बल्कि था मर्ज से एक new Object है, तो आप यह अपने आप बनाना होगा:

slider.settings = $.extend(true, {}, slider.settings, options); 

Answer 2

आप सही हैं, यह स्पष्ट रूप से हो रहा है क्योंकि jQuery का विस्तार वस्तु "उथले विस्तार" है .. इस प्रकार पूरे "एनीमेशन" संपत्ति को प्रतिस्थापित कर रहा है।

इसे ठीक करने के लिए, अपने ब्रांडी dandy deepExtend का उपयोग करें:

Object.deepExtend = function(destination, source) { 
    for (var property in source) { // loop through the objects properties 
    if (typeof source[property] === "object") { // if this is an object 
     destination[property] = destination[property] || {}; 
     Object.deepExtend(destination[property], source[property]); // recursively deep extend 
    } else { 
     destination[property] = source[property]; // otherwise just copy 
    } 
    } 
    return destination; 
}; 

आप इसे इस रूप में उपयोग कर सकते हैं:

slider.settings = Object.deepExtend(slider.settings, options);