addyosmani · September 26, 2011 05:37
diff --git a/index.html b/index.html
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="pluginCore.js"></script>
 <script type="text/javascript" src="pluginExtension.js"></script>

 <script type="text/javascript">

 $(function(){

 	var core = $.core;

 	// use the default module functionality to highlight all divs
 	// with the background color 'yellow'
 	core.highlightAll();

 	// access the plugins (extensions) loaded into the plugin
 	// namespace of our base module:

 	// Set the first div on the page to have a green background.
 	// Here we're making use of the core's 'highlight' function
 	// under the hood
 	core.plugin.setGreen("div:first");

 	// Set the last div to the errorColor property defined in 
 	// the base module/plugin. 
 	core.plugin.setRed('div:last');
 });
    
 </script>


 </body>
 <div class="items">test</div>
 <div class="items">test</div>
 <div class="items">test</div>
 <div class="items">test</div>
 </html>
diff --git a/pluginCore.js b/pluginCore.js
 // Module/Plugin 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)
    (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
  module.highlight = function(el,strColor){
    if(this.jQuery){
      jQuery(el).css('background', strColor);
    }
  }
  return {
      highlightAll:function(){
        module.highlight('div', module.highlightColor);
      }
  };

 });
diff --git a/pluginExtension.js b/pluginExtension.js
 // 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
  // note: all of this can be further optimized and is
  // just here for demonstration purposes
    return { 
      setGreen:function(el){
          highlight(el,'green');
      },
      setRed:function(el){
          highlight(el,errorColor);        
      }
    };

 });
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="pluginCore.js"></script>
	<script type="text/javascript" src="pluginExtension.js"></script>

	<script type="text/javascript">

	$(function(){

	var core = $.core;

	// use the default module functionality to highlight all divs
	// with the background color 'yellow'
	core.highlightAll();

	// access the plugins (extensions) loaded into the plugin
	// namespace of our base module:

	// Set the first div on the page to have a green background.
	// Here we're making use of the core's 'highlight' function
	// under the hood
	core.plugin.setGreen("div:first");

	// Set the last div to the errorColor property defined in
	// the base module/plugin.
	core.plugin.setRed('div:last');
	});

	</script>


	</body>
	<div class="items">test</div>
	<div class="items">test</div>
	<div class="items">test</div>
	<div class="items">test</div>
	</html>
	// Module/Plugin 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)
	(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
	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
	// note: all of this can be further optimized and is
	// just here for demonstration purposes
	return {
	setGreen:function(el){
	highlight(el,'green');
	},
	setRed:function(el){
	highlight(el,errorColor);
	}
	};

	});