JS Building Blocks

9/21/14

I’ve written a few simple modules which I often use as building blocks when prototyping or building an app having not chosen a library or framework. Each module supports CommonJS (if like me you are using browserify), AMD, and being exposed globally. The modules are available via bower.

Inherit JS

Having some form of chainable inheritance is increadibly useful for any instance where I’m creating many instances of a particular object. This module is pretty ubiquitous in JavaScript but may be obsolete when full support for ES6 Classes arrives.

  	  
  // example using with commonjs and it’s simplest form
  var inherit = require(‘inherit’);

  function Parent() {}
  function Child() {}
  inherit(Parent, Child); // child now has access to parent's prototype methods

  // add child prototype methods
  Child.prototype.myMethod = function() {};
  	  
  	

Mixin JS

Mixins are equally as useful as chained inheritance when the situation is right. This helper module will help you mix any number of properly structured modules into another.

  	  
  // a typical mixin
  function MyMixin() {
    this.prop = 10;
    this.method = function() {}

    return this;
  }

   // a revealing module
  function MyModule() {
    function privateMethod() {}
    function publicMethod() {}
    
    return {
      publicMethod: publicMethod
    };
  }

  // example applying the mixin to our module ( can alternatively be done inside our module definition )
  var module = MyModule();
  MyMixin.call(module);

  // using the mixin helper to create a new constructor which will automatically apply any number of mixins
  var WrappedConstructor = mixin(MyModule, MyMixin, MyNextMixin);
  var module = WrappedConstructor(); // mixins applied
  	  
  	

Extend JS

A simple extend mechanism, an abstraction for copying object properties with a for in loop. Useful for overriding a module’s default options, extending a module's prototype, and formatting data. This is a method I use everywhere.

  	  
  var extend = require(‘extend’);
    
  // extending objects
  var model = {};
  var updated_model = {};
  extend(model, updated_model); // model now has changes from updated model

  // extending a module prototype
  function MyModule() {}
  extend(MyModule.prototype, {
    methodName: function() {}
  });        
  	  
  	

This method can be found in most popular libraries that come to mind, for example jQuery.extend and _.extend.

Events JS

A revealing module mixin or inheritable prototype class ( both versions available ) that serves as a foundation for promoting decoupled modules within an app. The module can be used to create a global event object, and makes it easy to implement patterns like mediator and/or facade.

Using the revealing module mixin:

  	  
  var Events = require(‘events’);
  
  // to mix into a prototype based module
  function MyModule() {
    Events().call(this);
  }
  var module = new MyModule();

  // to mix into a revealing module
  function MyModule() {
    return {};
  }
  var module = Events().call(MyModule()); // always returns this, which will be the module instance

  // using with the mixin helper
  var WrappedModule = mixin(MyModule, Events());
  var module = WrappedModule();
  	  
  	

Using the inheritable prototype ( typically with an inherit function like the one above )

  	  
  var Events = require(‘events’);
  
  function MyModule() {
    Events.prototype.constructor.call(this);
  }

  inherit(Events, MyModule);

  // add prototype methods 
  MyModule.prototype.moduleMethod = function() {};
  	  
  	

To include these utilities in your next prototype, you can use this bower.json file to get you started.

comments powered by Disqus