Five Ways of Creating Namespace in JavaScript

In JavaScript, global variables often cause naming conflicts, and sometimes even rewriting variables is not in the order you think. Take a look at the following example:

var sayHello = function() {

  return 'Hello var';

};
function sayHello(name) {

  return 'Hello function';

};
sayHello();

The final output is

> "Hello var"

Why, according to StackOverFlow's explanation, JavaScript's are actually parsed in the following order.

function sayHello(name) {

  return 'Hello function';

};
var sayHello = function() {

  return 'Hello var';

};
sayHello();

The function declaration without var is resolved in advance, so the modern JS writing suggests that you always use the pre-var to declare all variables;

The best way to avoid global variable name conflicts is to create namespaces. Here are some common ways to create namespaces together in JS.

1. Create by using the function (function)

This is a more common writing, through the declaration of an function implementation, the function set initial variables, public methods written to prototype, such as:

var NameSpace = NameSpace || {};

/*

Function

*/

NameSpace.Hello = function() {

  this.name = 'world';

};

NameSpace.Hello.prototype.sayHello = function(_name) {

  return 'Hello ' + (_name || this.name);

};

var hello = new NameSpace.Hello();

hello.sayHello();

This is a lengthy way to compress code (jQuery uses fn instead of prototype) and requires instantiation (new) before calling. Writing JSON using Object makes it more compact:

2. Create an Object from an JSON object

/*

Object

*/

var NameSpace = NameSpace || {};

NameSpace.Hello = {

    name: 'world'

  , sayHello: function(_name) {

    return 'Hello ' + (_name || this.name);

  }

};

Call

NameSpace.Hello.sayHello('JS');

> Hello JS;

This writing is compact, but the disadvantage is that all variables must be declared public (public), which leads to the need to add this to indicate the scope of all references to these variables, and the writing is slightly redundant.

3. Implementation via closures (Closure) and Object

Declare all variables and methods in the closure and return the public interface via an JSON Object:

var NameSpace = NameSpace || {};

NameSpace.Hello = (function() {

  // Public object to be returned 

  var self = {};

  // Private variable or method 

  var name = 'world';

  // Public method or variable 

  self.sayHello = function(_name) {

    return 'Hello ' + (_name || name);

  };

  // Public object returned 

  return self;

}());

4. Improved writing of Object and closure

In the previous example, self needs to be added to the internal call to the public method, such as self. sayHello (); You can return JSON objects for all public interfaces (methods/variables) at the end.

var NameSpace = NameSpace || {};

NameSpace.Hello = (function() {

  var name = 'world';

  var sayHello = function(_name) {

    return 'Hello ' + (_name || name);

  };

  return {

    sayHello: sayHello

  };

}());

5. Concise writing of Function

This is a relatively simple implementation, compact structure, through function instance, and call without instantiation (new), the scheme comes from stackoverflow:

var NameSpace = NameSpace || {};

NameSpace.Hello = new function() {

  var self = this;

  var name = 'world';

  self.sayHello = function(_name) {

    return 'Hello ' + (_name || name);

  };

};

Welcome to add.