Home >Web Front-end >JS Tutorial >What are JavaScript namespaces? What is the use?
What are JavaScript namespaces? What is the use?
- 不言Original
- 2019-01-14 16:08:224623browse
Namespace is called namespace in English. It is one of the concepts in programming. The concept of "namespace" can avoid name conflicts. In this article, we will take a look at the content and usage of namespaces in JavaScript.
#What is a namespace?
Namespace refers to an ordering mechanism so that there is only one identical name in the "space".
Space is like a container.
For example, the name "Tom" may refer to multiple people, but by creating a namespace for each last name, we can distinguish which "Tom" is which.
In fact, you can know that "Tom" in the namespace "Shangguan" and "Tom" in "Ouyang" are different people.
Benefits of using namespaces
The main purpose of namespaces is to avoid name conflicts.
For small-scale programs, the benefits of using namespaces may not be too great.
However, some kind of large-scale program may be related to other programs, servers, etc.
In this case, using namespaces can reduce the burden on the programmer.
Since we can prevent problems caused by name conflicts, we can eliminate unnecessary processing.
How to use namespace?
Let's actually introduce the concept of namespaces into JavaScript programs.
First, let’s look at a simple program that doesn’t use namespaces.
<html>
<body>
<script>
function addition(num1,num2) {
return num1+num2;
}
function multiplication(num1,num2) {
return num1*num2;
}
var operation = addition(5,10);
console.log(operation)
</script>
</body>
</html>Execution result: 15
In the above code, we first define an addition function addition and a multiplication function multiplication.
The result of the addition is then stored in a global variable and displayed in the JavaScript console.
The parameters added to the function are 5 and 10, so 15 is displayed on the console.
In the above code, everything exists as global variables.
Therefore, if functions and variables with the same name exist in the global scope, a conflict will result.
Next, I tried improving the above code using namespaces.
<html>
<body>
<script>
var MYFUNCTIONS = {
addition: function(num1,num2){
return num1+num2;
},
multiplication: function(num1,num2){
return num1*num2;
}
}
var operation = MYFUNCTIONS.addition(5,10);
console.log(operation)
</script>
</body>
</html>Execution result: 15
In the above code, the only global variable defined is an uppercase MYFUNCTION variable.
In it we define addition and multiplication functions.
By doing this, we create a space called MYFUNCTION and contain arbitrary functions within it.
To call a function in MYFUNCTION, use the syntax: MYFUNCTION.function name.
Call the addition function by writing MYFUNCTION.addition(5,10).
The result is the same as the previous code.
How to layer namespaces?
Finally, let’s introduce how to “hierarchy” the namespace.
This will be very convenient because more functions and variables can be managed through layers.
The code example is as follows
<html>
<body>
<script>
var MYAPPLICATION = {
OPERATIONS: {
addition: function(num1,num2){
return num1+num2;
},
multiplication: function(num1,num2){
return num1*num2;
}
},
OTHER: {
show: function(num1,num2){
console.log("Your numbers are " + num1 + " and " + num2);
}
}
}
MYAPPLICATION.OTHER.show(5,10);
</script>
</body>
</html>Execution result: Your numbers are 5 and 10
In the above code, we set the only global variable MYAPPLICATION divided into multiple spaces.
The addition function and multiplication function are added in the OPERATION space, and the new function show is included in the OTHER space.
Creating spaces within spaces makes it easier to layer and generate clean code.
For example, to call the show function in the OTHER space, you can use the syntax of external space, internal space and function name.
Actually, if you write MYAPPLICATION.OTHER.show(5,10), the show function specified in parameters 5 and 10 will be called.
The show function outputs phrases such as "Your numbers are parameter 1 and parameter 2" to the JavaScript console.
Therefore, the result is displayed as Your numbers are 5 and 10.
This article ends here. For more exciting content, you can pay attention to other column tutorials on the php Chinese website! ! !
The above is the detailed content of What are JavaScript namespaces? What is the use?. For more information, please follow other related articles on the PHP Chinese website!