5 ways to create a namespace in JavaScript_PHP Tutorial

Global variables in JavaScript often cause naming conflicts, and sometimes even rewriting variables is not in the order you imagine. You can take a look at the following example:

Copy code The code is as follows:

var sayHello = function() {
return 'Hello var';
};

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

sayHello();

The final output is

Copy code The code is as follows:

> "Hello var"

Why is this? According to StackOverFlow's explanation, JavaScript is actually parsed in the following order.

Copy code The code is as follows:

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

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

sayHello();

Function declarations without var are parsed in advance, so modern JS writing recommends that you always use prefixed var to declare all variables;

The best way to avoid global variable name conflicts is to create a namespace. Here are several common ways to create namespaces in JS.

1. Create via function

This is a relatively common way of writing. It is implemented by declaring a function, setting initial variables in the function, and writing public methods into the prototype, such as:

Copy code The code is 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 way of writing is verbose and not conducive to code compression (jQuery uses fn instead of prototype), and it needs to be instantiated (new) before calling. Using Object to write it in JSON format can make it more compact:

2. Create Object through JSON object

Copy code The code is as follows:

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

Call

Copy code The code is as follows:

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

This way of writing is relatively compact. The disadvantage is that all variables must be declared as public, so all references to these variables need to be added with this to indicate the scope, and the writing method is also slightly redundant.

3. Implementation through Closure and Object

Declare all variables and methods in the closure, and return the public interface through a JSON Object:

Copy code The code is as follows:

var NameSpace = NameSpace || {};
NameSpace.Hello = (function() {
//Public object to be returned
var self = {};
//Private variables or methods
var name = 'world';
//Public methods or variables
self.sayHello = function(_name) {
Return 'Hello ' + (_name || name);
};
//Returned public object
return self;
}());

4. Improved writing methods of Object and closure

In the previous example, the internal call to the public method also needs to add self, such as: self.sayHello(); Here you can finally return the JSON objects of all public interfaces (methods/variables).

Copy code The code is as follows:

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 with a compact structure. It uses function instances and does not require instantiation (new) when calling. The solution comes from stackoverflow:

Copy code The code is as follows:

var NameSpace = NameSpace || {};
NameSpace.Hello = new function() {
var self = this;
var name = 'world';
self.sayHello = function(_name) {
Return 'Hello ' + (_name || name);
};
};

Additions are welcome.

http://www.bkjia.com/PHPjc/824824.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/824824.htmlTechArticleGlobal variables in JavaScript often cause naming conflicts, and sometimes even rewriting variables is not what you imagine. In order, you can take a look at the following example: Copy the code code as...