JavaScript 5 ways to create namespaces _php tips

Global variables often cause naming conflicts in JavaScript, and even sometimes rewrite variables are not in the order you imagined, but look at the following example:

Copy Code code as follows:

var SayHello = function () {
Return ' Hello var ';
};

function SayHello (name) {
Return ' Hello function ';
};

SayHello ();

The final output is

Copy Code code as follows:

> "Hello var"

Why, according to StackOverflow's interpretation, JavaScript is actually parsed in the following order.

Copy Code code as follows:

function SayHello (name) {
Return ' Hello function ';
};

var SayHello = function () {
Return ' Hello var ';
};

SayHello ();

function declarations without var are resolved in advance, so modern JS notation suggests that you always declare all variables using the preceding VAR;

The best way to avoid global variable name collisions is to create namespaces, which are some of the common ways to build namespaces in JS.

One, through functions (function) to create

This is a more common way of writing, by declaring a function implementation, which sets the initial variable, and the public method writes prototype, such as:

Copy Code code as follows:

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 formulation that is not conducive to compressed code (jquery uses FN instead of prototype) and requires instantiation (new) before calling. Using object as JSON can be written in a more compact way:

Creating an object from a JSON object

Copy Code code as follows:

/*
Object
*/
var NameSpace = NameSpace | | {};
Namespace.hello = {
Name: ' World '
, Sayhello:function (_name) {
Return ' Hello ' + (_name | | this.name);
}
};

Call

Copy Code code as follows:

NameSpace.Hello.sayHello (' JS ');
> Hello JS;

This kind of writing is compact, the disadvantage is that all variables must be declared publicly (public), resulting in all references to these variables need to add this to the scope, the wording is slightly redundant.

Third, through the closure (Closure) and object implementation

Declare all variables and methods in the closure and return the public interface via a JSON object:

Copy Code code as follows:

var NameSpace = NameSpace | | {};
Namespace.hello = (function () {
Public objects to be returned
var self = {};
Private variable or method
var name = ' World ';
Public method or variable
Self.sayhello = function (_name) {
Return ' Hello ' + (_name | | name);
};
The returned public object
return self;
}());

Modified type of object and closure

The previous example of an internal call to the public method also requires the addition of self, such as: Self.sayhello (), where the JSON object of all public interfaces (methods/variables) can be returned last.

Copy Code code as follows:

var NameSpace = NameSpace | | {};
Namespace.hello = (function () {
var name = ' World ';
var SayHello = function (_name) {
Return ' Hello ' + (_name | | name);
};
return {
Sayhello:sayhello
};
}());

The concise wording of function

This is a relatively simple implementation, compact, through the function instance, and calls without instantiating (new), the scheme from StackOverflow:

Copy Code code as follows:

var NameSpace = NameSpace | | {};
Namespace.hello = new function () {
var self = this;
var name = ' World ';
Self.sayhello = function (_name) {
Return ' Hello ' + (_name | | name);
};
};

Welcome to Add.