जावास्क्रिप्ट मॉड्यूल पैटर्न: हमारी लाइब्रेरी में विधियों/प्लगइन को इंजेक्ट/बनाने/बढ़ाने के लिए कैसे?

Question

मैं जावास्क्रिप्ट में नया हूं। क्षमा करें अगर मेरे प्रश्न में कुछ भी गलत है।

हमारी लाइब्रेरी में विधियों या प्लगइन को इंजेक्ट/बनाने/बढ़ाने के लिए कैसे? यहाँ "yourlib.js"

var Yourlib = (function() { 
    // privt. var 
    var selectedEl = {} 

    // some privt. funct 
    function something() { 

    } 

    return { 
     getById : function() { 

     }, 
     setColor : function() { 

     } 
    } 
}()); 

और नीचे है अपने "plugin.js"

/* 
How to create the plugin pattern? 
Example: I want to create/inject a method/plugin named "setHeight" . 
So, i can call it later, like this: Yourlib.getById('an-id').setHeight(value); 
How is the pattern? 
*/ 

Answer 1

सूचना है कि आपके समारोह दो विधियों के साथ एक वस्तु देता है। आप सीधे इसे करने के लिए गुण जोड़ सकते हैं:

Yourlib.setHeight = function (val) { 
    // logic for setting the height 
}; 

Answer 2

आप अपने कार्यों के भीतर this वापस जाने के लिए उन्हें chainable बनाने की जरूरत है। नीचे दिया गया उदाहरण कोड दिखाता है कि जंजीर कॉल की अनुमति देने के लिए अपने मॉड्यूल का विस्तार कैसे करें और यदि आवश्यक हो तो नए फ़ंक्शन जोड़ें।

var Yourlib = (function() { 
 

 
    // privt. var 
 
    var selectedEl = {} 
 

 
    // some privt. funct 
 
    function something() { 
 

 

 
    } 
 

 
    return { 
 

 
    setColor: function(newcolor) { 
 

 
     var obj = document.getElementById('colorbox1'); 
 
     obj.style.background = newcolor; 
 

 
    } 
 
    } 
 

 
}()); 
 

 
// call the original module sub-function 
 
Yourlib.setColor('blue'); 
 

 
/** 
 
* Extend the module again to allow chaining. 
 
* Chainable functions return "this" 
 
*/ 
 
var Yourlib = (function(object) { 
 

 
    // private variable to store id of a box 
 
    var box = ''; 
 

 
    object.getById = function(id) { 
 

 
    box = document.getElementById(id); 
 
    return this; 
 
    }; 
 

 
    object.setColor = function(newcolor) { 
 

 
    box.style.background = newcolor; 
 
    return this; 
 

 
    }; 
 

 
    object.setAnotherColor = function(newcolor) { 
 

 
    var box = document.getElementById('colorbox4'); 
 
    box.style.background = newcolor; 
 

 
    }; 
 

 
    return object; // return the extended object 
 

 
}(Yourlib)); // original module passed in as an object to be extended 
 

 

 
// example of a chained function call 
 
Yourlib.getById('colorbox2').setColor('purple'); 
 

 
// same functions without chained call 
 
Yourlib.getById('colorbox3') 
 
Yourlib.setColor('green'); 
 

 
// new function within extended module 
 
Yourlib.setAnotherColor('orange');

.colorbox { 
 
    height: 40px; 
 
    width: 40px; 
 
    background: #000; 
 
    border: #000 1px solid; 
 
    margin-bottom: 5px; 
 
}

<strong>module sub-function</strong> 
 
<br />Yourlib.setColor('blue'); 
 
<br /> 
 
<div id="colorbox1" class="colorbox"></div> 
 

 
<strong>chained function calls</strong> 
 
<br />Yourlib.getById('colorbox2').setColor('purple'); 
 
<br /> 
 
<div id="colorbox2" class="colorbox"></div> 
 

 
<strong>functions called without chaining</strong> 
 
<br />Yourlib.getById('colorbox3') 
 
<br />Yourlib.setColor('green'); 
 
<br /> 
 
<div id="colorbox3" class="colorbox"></div> 
 

 
<strong>new function added to extended module</strong> 
 
<br />Yourlib.setAnotherColor('orange'); 
 
<br /> 
 
<div id="colorbox4" class="colorbox"></div>

आगे संदर्भ के लिए आप भी JavaScript Module Pattern in Depth पढ़ सकते हैं।

Answer 3

var Module = (function(){ 
var set = {} 
set.show = function(){ 
    alert('Module method') 
} 
return set 
})() 

तो अब मैं वर्तमान मॉड्यूल का विस्तार करूंगा।

var Ext = (function(Module){ 

Module.get = function(){ 
    Module.show() 
} 

return Module 

})(Module) 

अब मैं ऐसा कर सकते हैं:

Module.get() 
Ext.get()