Module Pattern

Recap: Objects

• Defining an empty object

  var employee = {};

• Defining an object with data

  var employee = {
    name: "John",
    age: 32
  };

• Accessing a property of an object

  alert(employee.name);

• Adding a new property to an existing object

  employee.title = "Developer";

Recap: Functions

We've seen the two ways to declare a function in JavaScript:

1. Function Declaration

   function doSomething() {
     // do something in here
   }

2. Variable Assignment

   var doSomething = function() {
     // do something in here
   };

doSomething();                 // call the function
anotherFunction(doSomething);  // pass it into another function

Recap: Using Objects to Organize Code

• Creates a namespace to avoid collision with other developers' function and variable names.
• Groups your code into logical components, making it easier to read for others.

var cocktails = {};

cocktails.create = {

  init: function() {
    $("#create").click(cocktails.create.submitForm);
  },

  getDataFromForm: function () {
    // returns an object containing the form data
  },

  submitForm: function() {
    var data = cocktails.create.getDataFromForm();
    // send the Ajax request to the server
  }
};

Recap: Immediately-Invoked Functions

What is the type of maxLength here?

var maxLength = function() {
  return 255;
};

alert(typeof maxLength); // will display "function"

alert(maxLength()); // will display "255"

Recap: Immediately-Invoked Functions

What is the type of maxLength here?

var maxLength = function() {
  return 255;
}();

alert(typeof maxLength); // will display "number"

var maxLength = 255;

Using Functions to Organize Code

var cocktails = {};

cocktails.create = function() {

  return {
    init: function() {
      $("#create").click(cocktails.create.submitForm);
    },

    getDataFromForm: function () {
      // returns an object containing the form data
    },

    submitForm: function() {
      var data = cocktails.create.getDataFromForm();
      // send the Ajax request to the server
    }
  };

}();

Using Functions to Hide Code

var cocktails = {};

cocktails.create = function() {

  function getDataFromForm() {
      // returns an object containing the form data
  }

  return {
    init: function() {
      $("#create").click(cocktails.create.submitForm);
    },

    submitForm: function() {
      var data = getDataFromForm();
      // send the Ajax request to the server
    }
  };

}();

cocktails.create.init();                       // works fine
var data = cocktails.create.getDataFromForm(); // error
cocktails.create.submitForm();                 // works fine

Let's go!

https://ericdouglaspratt.com/misc/academy