lordfpx
12/5/2015 - 10:59 AM

CommonJs Plugin Core

CommonJs Plugin Core

//commonjs
//puginCore
// Module/Plugin core
// Note: the wrapper code you see around the module is what enables
// us to support multiple module formats and specifications by
// mapping the arguments defined to what a specific format expects
// to be present. Our actual module functionality is defined lower
// down, where a named module and exports are demonstrated.
//
// Note that dependencies can just as easily be declared if required
// and should work as demonstrated earlier with the AMD module examples.

(function ( name, definition ){
  var theModule = definition(),
      // this is considered "safe":
      hasDefine = typeof define === 'function' && define.amd,
      // hasDefine = typeof define === 'function',
      hasExports = typeof module !== 'undefined' && module.exports;

  if ( hasDefine ){ // AMD Module
    define(theModule);
  } else if ( hasExports ) { // Node.js Module
    module.exports = theModule;
  } else { // Assign to common namespaces or simply the global object (window)
    (this.jQuery || this.ender || this.$ || this)[name] = theModule;
  }
})( 'core', function () {
    var module = this;
    module.plugins = [];
    module.highlightColor = "yellow";
    module.errorColor = "red";
    
  // define the core module here and return the public API
  // This is the highlight method used by the core highlightAll()
  // method and all of the plugins highlighting elements different
  // colors
  module.highlight = function(el,strColor){
    if(this.jQuery){
      jQuery(el).css('background', strColor);
    }
  }
  
  return {
      highlightAll:function(){
        module.highlight('div', module.highlightColor);
      }
  };
});

// Extension to module core
(function ( name, definition ) {
  var theModule = definition(),
      hasDefine = typeof define === 'function',
      hasExports = typeof module !== 'undefined' && module.exports;

  if ( hasDefine ) { // AMD Module
      define(theModule);
  } else if ( hasExports ) { // Node.js Module
      module.exports = theModule;
  } else { // Assign to common namespaces or simply the global object (window)

      // account for for flat-file/global module extensions
      var obj = null;
      var namespaces = name.split(".");
      var scope = (this.jQuery || this.ender || this.$ || this);
      for (var i = 0; i < namespaces.length; i++) {
          var packageName = namespaces[i];
          if (obj && i == namespaces.length - 1) {
              obj[packageName] = theModule;
          } else if (typeof scope[packageName] === "undefined") {
              scope[packageName] = {};
          }
          obj = scope[packageName];
      }
  }
})('core.plugin', function () {
  // Define your module here and return the public API.
  // This code could be easily adapted with the core to
  // allow for methods that overwrite and extend core functionality
  // in order to expand the highlight method to do more if you wish.
  return {
      setGreen: function ( el ) {
          highlight(el, 'green');
      },
      setRed: function ( el ) {
          highlight(el, errorColor);
      }
  };
});

// usage
$(function(){
    // Our plugin 'core' is exposed under a core namespace in
    // this example, which we first cache
    var core = $.core;
    // Then use use some of the built-in core functionality to
    // highlight all divs in the page yellow
    core.highlightAll();
    // Access the plugins (extensions) loaded into the 'plugin'
    // namespace of our core module:
    // Set the first div in the page to have a green background.
    core.plugin.setGreen("div:first");
    // Here we're making use of the core's 'highlight' method
    // under the hood from a plugin loaded in after it
    // Set the last div to the 'errorColor' property defined in
    // our core module/plugin. If you review the code further down,
    // you'll see how easy it is to consume properties and methods
    // between the core and other plugins
    core.plugin.setRed('div:last');
});