Javascript modülü kalıbı: Kendi kütüphanemize yöntemler/eklentiler nasıl enjekte edilir/yaratılır/genişletilir?

Question

javascript’te yeni terim var. Üzgünüm, sorumun bir sorunu varsa.

Kendi kitaplığımıza yöntemler veya eklentiler nasıl eklenir/oluşturulur/genişletilir? burada "yourlib.js" aşağıda

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

    // some privt. funct 
    function something() { 

    } 

    return { 
     getById : function() { 

     }, 
     setColor : function() { 

     } 
    } 
}()); 

Ve senin "plugin.js" senin işlevin iki yöntemle bir nesne döndürür

/* 
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

Bildirimi olduğunu. Doğrudan buna özellikler ekleyebilirsiniz:

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

Answer 2

Onları chainable yapmak için fonksiyonlar dahilinde this dönmek gerekir. Aşağıdaki örnek kod, zincirleme çağrılara izin vermek ve gerekirse yeni işlevler eklemek için modülünüzü nasıl genişleteceğinizi gösterir. ayrıca başvuru için

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>

ayrıca JavaScript Module Pattern in Depth okuyabilirsiniz.

Answer 3

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

Şimdiki Modül'ü genişleteceğim.

var Ext = (function(Module){ 

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

return Module 

})(Module) 

Şimdi bunu yapabilirsiniz:

Module.get() 
Ext.get()