Please enable JavaScript.

Coggle requires JavaScript to display documents.

9: The module pattern - Coggle Diagram

9: The module pattern

split into multiple files

main.js

var MYAPP = (function (namespace, $, domUtils, stringUtils) {
  // main code

  // Public methods and properties
  namespace.displayFeedback = displayFeedback;

  return namespace;
})(MYAPP || {}, UTIL.dom.$, UTIL.dom, UTIL.string);

index.html

<head>
    ...
    <script src="js/stringUtils.js"></script>
    <script src="js/domUtils.js"></script>
    <script src="js/generalUtils.js"></script>
    <script src="js/main.js"></script>
</head>

stringUtils.js

var UTIL = (function (namespace) {
  // string utility code

  // Create sub-module called string
  var subModule = namespace.string = namespace.string || {};
  // Public methods and properties
  subModule.numChar = numChar;
  subModule.breakOut = breakOut;
  return namespace;
})(UTIL || {});

domUtils.js

var UTIL = (function (namespace) {
  // dom utility code

  // Create sub-module called dom
  var subModule = namespace.dom = namespace.dom || {};
  // Public methods and properties
  subModule.$ = $;
  subModule.assignEvent = assignEvent;
  subModule.data = data;
  subModule.addClass = addClass;
  subModule.removeClass = removeClass;
  return namespace;
})(UTIL || {});

generalUtils.js

var UTIL = (function (namespace) {
  // general utility code

  // Public methods and properties
  namespace.domReady = domReady;
  return namespace;
})(UTIL || {});

you have a chunk of code

steps

Use the namespace pattern

var MYAPP = MYAPP || {};

(function (namespace) {
  // existing code
})(MYAPP);

condense two statements

var MYAPP = (function (namespace) {
  // existing code
})(MYAPP || {});

Attach public functions/variables

var MYAPP = (function (namespace) {
  // existing code

  // Public methods and properties
  namespace.displayFeedback = displayFeedback;
  namespace.$ = $;
})(MYAPP || {});

Return namespace

var MYAPP = (function (namespace) {
  // existing code

  // Public methods and properties
  namespace.displayFeedback = displayFeedback;
  namespace.$ = $;

  return namespace;
})(MYAPP || {});