Implement namespace in JavaScript

Note: I haven't written it for a long time. Today, I copied my article on the company's Intranet to show my face and just switched to Web development. So I started to learn javascript!

Before the introduction of namespaces, a headache for developers is how to prevent conflicts between function names, class names, and others, the internal project team of a company can solve this problem by naming and booking (such as prefix), but they put their eyes on the entire software development field. In today's era of collaborative development, this problem persists. When using multiple third-party frameworks or class libraries, the only thing you can do is pray that their names do not conflict. If such a disaster occurs, the only thing you can do is give up one of them (Note: it may be that I am ignorant ). The introduction of namespaces solves this problem to a considerable extent. Of course, if the namespace you are using is unfortunately the same as that of other companies, and the other party is a big guy like Microsoft or SUN, congratulations, haha @_@!

JavaScript is inevitable when you are engaged in Web development. Currently, the latest version of JavaScript does not support namespaces, so the naming conflict issue is obvious. Imagine that you have referenced two js files, however, it is very frustrating to find that you have to give up one of them because of naming issues, resulting in a lot of code writing. Before the new version of JavaScript introduces the namespace concept, developing self-reliance and creativity is the basic obligation of our programmers ;-)

Implementation prerequisites: Unlike languages such as Delphi and C #, classes in JavaScript are not the definition of objects. In fact, JavaScript does not have real classes, the class here is actually implemented by function simulation, while the function in JavaScript is actually an object, so in JavaScript: A class is an object. This is very different from the traditional concept. In JavaScript, creating an instance of a class actually copies the class (= object, remember. Here, we can see the concept of a design pattern. In JavaScript, the class mechanism uses the prototype pattern.

Implementation principle: Now that you have understood the nature of the class, the problem is simple. If you put all the JS classes and functions of the GEA project team as attributes in the object named GEA, then put the GEA object in the format of attributes in the object named Grandsoft can not achieve our goal, such as Grandsoft. GEA. person is actually a class Person (or an object) in the attribute GEA (also an object) of the Grandsoft object ).

The implementation is very simple. The implementation of the entire namespace mechanism is no more than 20 lines of code. The analysis is as follows:

// Declare a global object Namespace to register the Namespace
Copy codeThe Code is as follows: Namespace = new Object ();

// The Global object only has the register function. The parameter is the full path of the namespace, for example, "Grandsoft. GEA"
Namespace. register = function (fullNS)
{
// Cut the namespace into N parts, such as Grandsoft and GEA.
Var nsArray = fullNS. split ('.');
Var sEval = "";
Var sNS = "";
For (var I = 0; I <nsArray. length; I ++)
{
If (I! = 0) sNS + = ".";
SNS + = nsArray [I];
// Create statements to construct namespace objects in sequence (if they do not exist)
// For example, create Grandsoft and then create Grandsoft. GEA.
SEval + = "if (typeof (" + sNS + ") = 'undefined')" + sNS + "= new Object ();"
}
If (sEval! = "") Eval (sEval );
}
The above is the complete implementation of the namespace mechanism simulation in JavaScript. The usage is as follows:


// Register the namespace Grandsoft. GEA, Grandsoft. GCM
Namespace. register ("Grandsoft. GEA ");
Namespace. register ("Grandsoft. GCM ");

// Declare the class Person in the Grandsoft. GEA namespace
Grandsoft. GEA. Person = function (name, age)
{
This. name = name;
This. age = age;
}

// Add a public method show () to class Person ()
Grandsoft. GEA. Person. prototype. show = function ()
{
Alert (this. name + "is" + this. age + "years old! ");
}

// Demonstrate how to use the class Person
Var p = new Grandsoft. GEA. Person ("yanglf", 25 );
P. show (); Haha, simple. I won't talk much about this simple code. You can watch it yourself. In fact, I am a little lazy, haha @_@!!!