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

Answer 1

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.