Javascript module pattern: How to inject/create/extend methods/plugin to our own library?

Question

Im new to javascript. Sorry if there is anything wrong with my question.

How to inject/create/extend methods or plugins to our own library? here is "yourlib.js"

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

    // some privt. funct
    function something() {

    }

    return {
        getById : function() {

        },
        setColor : function() {

        }
    }
}());

And below is your "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?
*/

Euromarket

I think this question belongs on programmers.stackexchange.com – Parlormaid

Answer 1

Notice that your function returns an object with two methods. You can directly add properties to it:

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

Pax

WOw.. so simple! So, which should i do, Yourlib.setHeight = function(va) { }; or use Yourlib.prototype.setHeight?? – Euromarket

@JaheJS take a look at my comment for prototype under the other answer – Pax

@JaheJS: Is Yourlib a constructor function with a prototype property? The one you posted in your question is not. – Taunt

@Konstantin D - Infragistics : Thank you for all your help. I still wonder, should we add Yourlib.prototype = {} first or not (and just go with this-> Yourlib.setHeight=funct...) – Euromarket

Don't use .prototype. You are having a single instance and not a function which you instantiate into an object with new. prototype would just be a property to that object. If you try it out you will see. – Pax

Answer 2

You need to return this within your functions to make them chainable. The example code below shows how to extend your module to allow chained calls and add new functions if needed.

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>

For further reference you may also read JavaScript Module Pattern in Depth.

Unsettle

Answer 3

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

So now I will extend current Module.

var Ext = (function(Module){

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

 return Module

})(Module)

Now I can do this:

Module.get()
Ext.get()

Southing