वेनिला जावास्क्रिप्ट प्लगइन के लिए डिफ़ॉल्ट सेटिंग्स बनाएं

Question

सादा जावास्क्रिप्ट में एक साधारण टूलटिप प्लगइन बनाने का प्रयास किया।

मेरे कोड में, मैंने अपने कोड में डिफ़ॉल्ट सेटिंग के रूप में bcolor बनाने और डालने की कोशिश की और मुझे लगता है कि यह एक अच्छा तरीका नहीं है जब हम एक से अधिक डिफ़ॉल्ट रखना चाहते हैं।

तो, मैं अपने वेनिला जावास्क्रिप्ट प्लगइन में डिफ़ॉल्ट सेटिंग्स कैसे बना सकता हूं?

JSFIDDLE

var Tooltip = function(selector, bcolor) { 
    this.targetElement = document.querySelectorAll(selector); 
    this.bcolor = bcolor; 
    if (this.bcolor == null || typeof this.bcolor !== "string") { 
    this.bcolor = "#333"; 
    } 

    if (this.targetElement == null) { 
    console.log("Ooops, error!") 
    } 

    return this; 
} 

Tooltip.prototype.tooltip = function() { 
    for (var i = 0; i < this.targetElement.length; i++) { 

    var text = this.targetElement[i].getAttribute("data-tooltip"); 

    this.targetElement[i].style.position = "relative"; 

    var span = document.createElement("span"); 
    this.targetElement[i].appendChild(span); 
    span.style.position = "absolute"; 
    span.style.top = "-25px"; 
    span.style.left = "-20px"; 
    span.style.padding = "4px" 
    span.style.borderRadius = "5px"; 
    span.style.backgroundColor = this.bcolor; 
    span.style.color = "#fff"; 
    span.innerHTML = text; 
    } 
} 

var box = new Tooltip(".box", "red"); 
box.tooltip(); 

Answer 1

पहले, आइए कितनी आसानी से कई विकल्प समर्थन करने के लिए को देखो। इसका एक सामान्य समाधान यह है कि आपका कन्स्ट्रक्टर केवल सरल स्ट्रिंग या संख्या तर्कों के बजाय "कॉन्फ़िगरेशन" ऑब्जेक्ट में ले जाए। बजाय इस प्रपत्र का उपयोग पर विचार करें:

var Tooltip = function(selector, options) { 
    this.targetElement = document.querySelectorAll(selector); 
    this.options = options; 
    ... 
}; 

var box = new Tooltip(".box", { color: "red" }); 

सूचना है कि बजाय एक ही मूल्य में उत्तीर्ण होने की, हम एक उद्देश्य यह है कि है कि एकल मान में गुजरती हैं। लेकिन उस ऑब्जेक्ट में संभावित रूप से कई कॉन्फ़िगरेशन विकल्प हो सकते हैं - केवल एक ही नहीं! उदाहरण के लिए, आप पास कर सकता है:

var box = new Tooltip(".box", { 
    backgroundColor: "red", 
    textColor: "white", 
    fontSize: 12, 
    animated: true, 
    animationSpeed: 1000 
}); 

जब आप उन विकल्पों में से किसी का उपयोग करने की जरूरत है, अपने कोड बस विकल्प के संदर्भ में उपयोग कर सकते हैं आपत्ति: उदाहरण के लिए, this.bcolor के बजाय, आप this.options.backgroundColor का उपयोग हो सकता है।

Tooltip.prototype.tooltip = function() { 
    for (var i = 0; i < this.targetElement.length; i++) { 
     ... 
     span.style.backgroundColor = this.options.backgroundColor; 
     span.style.color = this.options.textColor; 
     span.style.fontSize = this.options.fontSize + "px"; 
     ... 
    } 
} 

---

तो इस तरह आप कई विकल्प संभाल होता है, यहाँ से ऊपर अपने कोड, कुछ और विकल्प के साथ बढ़ाया है लेकिन प्रत्येक के लिए डिफ़ॉल्ट मान के बारे में क्या?

Tooltip.prototype.defaultOptions = { 
    backgroundColor: "#FF9", 
    textColor: "black", 
    fontSize: 12, 
    animated: false, 
    animationSpeed: 1000 
}; 

और फिर अपने निर्माता defaultOptions से अधिक स्पिन सकता है, बशर्ते में अपने मूल्यों का उपयोग कर किसी भी लापता "छेद" को भरने के लिए: ऐसा करने के लिए, आपको पहले मूलभूत मूल्यों दिखाई देते हैं यह कहीं न कहीं परिभाषित करना चाहते हैं options वस्तु:

var Tooltip = function(selector, options) { 
    this.targetElement = document.querySelectorAll(selector); 
    this.options = options; 

    for (var optionName in this.defaultOptions) { 
     if (typeof this.options[optionName] === 'undefined') 
      this.options[optionName] = this.defaultOptions[optionName]; 
    } 
    ... 
}; 

undefined के मूल्य के लिए एक typeof के खिलाफ एक परीक्षण सही ही अगर मूल्य मौजूद नहीं है, इसलिए इस के लिए लूप प्रतियां defaultOptions से options के लिए किसी भी मूल्यों, जब तक कि वे डॉन 'के रूप में टी options में पहले से मौजूद है। यह अच्छा और एक्स्टेंसिबल है: जैसे ही आप defaultOptions पर एक नया मान जोड़ते हैं, लूप इसे options में कॉपी करेगा, इससे कोई फर्क नहीं पड़ता कि कॉलर पहले क्या गुजर रहे थे।

और, सबसे महत्वपूर्ण बात यह है कि for लूप वास्तव में सभी jQuery.extend हुड के तहत कर रहा है: एक ऑब्जेक्ट से दूसरे ऑब्जेक्ट को कॉपी करना। (JQuery समाधान थोड़ा और अधिक सुरुचिपूर्ण है, लेकिन मैं यहाँ बातें क्या हो रहा है यह और भी स्पष्ट करने के लिए सरल बनाया।)

---

लेकिन क्या होगा अगर आप कुछ स्थानों में डिफ़ॉल्ट व्यवहार करना चाहते हैं? उदाहरण के लिए, यदि आप एक विशिष्ट फ़ॉन्ट आकार को परिभाषित नहीं करते हैं, तो हो सकता है कि आप इसे defaultOptions से कुछ असाइन किए जाने के बजाय मूल तत्व या दस्तावेज़ से प्राप्त करना चाहते हैं।

यदि आप उस तरह के "डॉन-असाइन-इन-जब तक प्रदान नहीं किए गए" व्यवहार चाहते हैं, तो उपरोक्त एक ही मूलभूत पैटर्न काम कर सकता है, लेकिन आपको डिफ़ॉल्ट विकल्पों को थोड़ा छोटा करने की आवश्यकता है, और फिर एक शर्त जोड़ें आप विकल्प लागू कर रहे हैं। विचार करें कि इस उदाहरण क्या मैं ऊपर से पता चला है से अलग है:

// Notice that we specifically leave out fontSize here in the defaults. 
Tooltip.prototype.defaultOptions = { 
    backgroundColor: "#FF9", 
    textColor: "black", 
    animated: false, 
    animationSpeed: 1000 
}; 

Tooltip.prototype.tooltip = function() { 
    for (var i = 0; i < this.targetElement.length; i++) { 
     ... 
     span.style.backgroundColor = this.options.backgroundColor; 
     span.style.color = this.options.textColor; 

     // Now, we only assign the fontSize if it was provided by the user. 
     if (typeof this.options.fontSize !== 'undefined') 
      span.style.fontSize = this.options.fontSize + "px"; 
     ... 
    } 
} 

यह उम्मीद है कि पर्याप्त आप के साथ काम करने के लिए किया जाना चाहिए। इस पर

---

बदलाव (Object.extend पैटर्न और undefined के खिलाफ परीक्षण) सभी जावास्क्रिप्ट में जगह उपयोग किया जाता है, और भारी jQuery और अन्य पुस्तकालयों की एक पूरी मेजबान के द्वारा किया जाता है। यदि आप वही मूल डिजाइन का पालन करते हैं, तो आप बहुत अच्छी कंपनी में होंगे।