Mô-đun mô-đun Javascript: Cách tiêm/tạo/mở rộng các phương thức/plugin vào thư viện của chính chúng ta?

Question

Im mới thành javascript. Xin lỗi nếu có bất cứ điều gì sai với câu hỏi của tôi.

Làm thế nào để tiêm/tạo/mở rộng phương pháp hoặc plugin vào thư viện của chính chúng ta? ở đây là "yourlib.js"

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

    // some privt. funct 
    function something() { 

    } 

    return { 
     getById : function() { 

     }, 
     setColor : function() { 

     } 
    } 
}()); 

Và dưới đây là của bạn "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

Chú ý rằng chức năng của bạn trả về một đối tượng với hai phương pháp. Bạn có thể trực tiếp thêm thuộc tính vào nó:

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

Answer 2

Bạn cần trả lại this trong các chức năng của bạn để làm cho chúng có thể chuỗi. Mã ví dụ bên dưới cho thấy cách mở rộng mô-đun của bạn để cho phép các cuộc gọi bị xích và thêm các chức năng mới nếu cần.

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>

Để biết thêm tham khảo bạn cũng có thể đọc JavaScript Module Pattern in Depth.

Answer 3

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

Vì vậy, bây giờ tôi sẽ mở rộng Mô-đun hiện tại.

var Ext = (function(Module){ 

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

return Module 

})(Module) 

Bây giờ tôi có thể làm điều này:

Module.get() 
Ext.get()