Some of the coding problems that developers often encounter when working with JS can be solved with more sophisticated design patterns, but because javascript is not a traditional object-oriented programming language, design patterns are harder to recognize, but not impossible.

Here are some of the more common design patterns in javascript

Creation pattern

The prototype pattern

This is a design pattern that is specifically used to clone the properties of objects for new objects. Therefore, there is a keyword prototype. Javascript implements this design pattern by creating objects, so creating your own prototype is a very important design pattern.

function Hello (greeting) {
  this.greeting = greeting || 'Hello World! ';
}

Hello.prototype.speak = function (somethingElse) {
  var message = somethingElse || this.greeting;
  console.log(message);
};

var hi = new Hello('Just saying hi! ');

hi.speak();
hi.speak('Something different');

var hello = new Hello();
hello.speak();
hello.speak('Yep');
Copy the code

In javascript, ES6 introduces classes. If you want to implement this design pattern, you can create a class directly, but it’s important to realize that this is syntactic sugar on top of the existing prototype pattern.

The module pattern

The module pattern is probably the most commonly used pattern after the prototype pattern. The module should be an immediately called function expression IIFE, where all module code exists in a closure that imports variables through function execution and exports variables by returning an object (exposing variables).

Why use module mode when modules should be used in any system rather than in a function, which is useful to prevent contamination of global variables and keep functions importable/exportable

var options = {
  username: 'blah'.server: '127.0.0.1'};var ConfigObject = (function (params) {
  var username = params.username || ' ',
    server = params.server || ' ',
    password = params.password || ' ';
  function _checkPassword () {
    if (this.password === ' ') {
      console.log('no password! ');
      return false;
    }
    return true;
  }
  function _checkUsername () {
    if (this.username === ' ') {
      console.log('no username! ');
      return false;
    }
    return true;
  }
  function login () {
    if (_checkPassword() && _checkUsername()) {
      // perform login}}return {
    login: login,
  };
})(options);
Copy the code

The singleton pattern

The creation of a singleton object should be self-invoking, meaning that it will execute and store the instance at definition time.

When to use singletons, use singletons when you only want one instance of an object. When requested, the singleton interface returns the instance.

var GlobalConfigurationObject = (function () {
  var instance;
  function createInstance () {
    return new ConfigObject();
  }

  var getInstance = function () {
    if(! instance) { instance = createInstance(); }return instance;
  };

  return {
    getInstance: getInstance, }; }) ();Copy the code