Name space
JavaScript itself does not provide a namespace mechanism, so in order to avoid the pollution of global space by different functions, objects, and variable names, it is common practice to create a unique global object for your application or library, and then add all methods and attributes to the object.
Copy Code code as follows:
/* Before:5 Globals * *
Constructors
function Parent () {}
function child () {}
A variable
var some_var = 1;
Some objects
var module1 = {};
Module1.data = {a:1, b:2};
var module2 = {};
/* AFTER:1 Global * *
Global Object
var MYAPP = {};
Constructors
MYAPP. Parent = function () {};
MYAPP. Child = function () {};
A variable
Myapp.some_var = 1;
An object
Myapp.modules = {};
Nested objects
MYAPP.modules.module1 = {};
MYAPP.modules.module1.data = {a:1, b:2};
MYAPP.modules.module2 = {};
Code Listing 1: Traditional namespace patterns
In this code, you create a global object MyApp and attach all other objects, functions as attributes to the MyApp.
This is usually a good way to avoid naming conflicts, and it is used in many projects, but there are some drawbacks to this approach.
1. You need to prefix all functions and variables that need to be added.
2. Because there is only one global object, this means that part of the code can arbitrarily modify the global object and cause the rest of the code to be passively updated.
Global Builder
You can use a global constructor instead of a global object, we name the constructor sandbox (), you can create objects with this constructor, you can also pass a callback function to the constructor as an argument, and this callback function is the independent sandbox environment where you store your code.
Copy Code code as follows:
New Sandbox (function (box) {
Your code here ...
});
Code Listing 2: use of the sandbox
Let's add some other features to the sandbox.
1. You can create a sandbox without using the ' new ' operator
The 2.Sandbox () constructor accepts some additional configuration parameters that define the name of the module required to generate the object, and we want the code to be more modular.
With the above features, let's see how to initialize an object.
Listing 3 shows that you can create an object that invokes the ' Ajax ' and ' event ' modules without needing the ' new ' operator.
Copy Code code as follows:
Sandbox ([' Ajax ', ' event '], function (box) {
Console.log (box);
});
Code Listing 3: Passing the module name as an array
Copy Code code as follows:
Sandbox (' Ajax ', ' Dom ', function (box) {
Console.log (box);
});
Code Listing 4: Passing the module name as a separate parameter
Listing 5 shows that you can pass the wildcard ' * ' as a parameter to the constructor, which means that all available modules are invoked, and for convenience, if no module name is passed to the constructor as an argument, the constructor will pass ' * ' as the default parameter.
Copy Code code as follows:
Sandbox (' * ', function (box) {
Console.log (box);
});
Sandbox (function (box) {
Console.log (box);
});
Code Listing 5: calling the available modules
Code Listing 6 shows that you can initialize the sandbox objects multiple times, and you can even nest them without worrying about any conflicts between them.
Copy Code code as follows:
Sandbox (' Dom ', ' event ', function (box) {
Work with Dom and event
Sandbox (' Ajax ', function (box) {
Another sandboxed "box" object
This ' box ' is not the same as
The "box" outside this function
//...
Done with Ajax
});
No trace of Ajax module here
});
Code Listing 6: Nested sandbox instances
From the above examples, you can see that using sandbox mode, by wrapping all the code logic in a callback function, you generate different instances based on the different modules you need, and the instances do not interfere with each other and work independently, thus protecting the global namespace.
Now let's see how to implement this sandbox () constructor.
adding modules
Before implementing the main constructor, let's see how to add a module to the sandbox () constructor.
Because the sandbox () constructor function is also an object, so you can add a property called ' modules ', which is an object that contains a set of key pairs, where key is the name of the module that needs to be registered, and value is the entry function of the module. When the constructor initializes, the current instance is passed as the first argument to the entry function, so that the entry function can add additional properties and methods to the instance.
In Listing 7, we added the ' Dom ', ' event ', ' Ajax ' module.
Copy Code code as follows:
Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
Box.getelement = function () {};
Box.getstyle = function () {};
Box.foo = "Bar";
};
Sandbox.modules.event = function (box) {
Access to the Sandbox prototype if needed:
BOX.CONSTRUCTOR.PROTOTYPE.M = "MMM";
Box.attachevent = function () {};
Box.dettachevent = function () {};
};
Sandbox.modules.ajax = function (box) {
Box.makerequest = function () {};
Box.getresponse = function () {};
};
Code Listing 7: Registering the module
Implementing constructors
Code Listing 8 describes a method for implementing a constructor, with several key points:
1. We check if this is an instance of sandbox, and if not, prove that sandbox is not invoked by the new operator, we will recall it as a constructor.
2. You can add attributes to this within the constructor, as well as you can add attributes to the stereotype of the constructor.
3. The module name is passed to the constructor in various forms, such as array, independent parameter, wildcard ' * '.
4. Please note that in this example we do not need to load the module from the external file, but in such as YUI3 you can simply load the underlying module (usually called seed), while all other modules are loaded from the external file.
5. Once we know the required modules and initialize them, this means that the entry function for each module is invoked.
6. The callback function is the last constructor passed in as a parameter, and it will use the most recently generated instance and be executed at the end.
Copy Code code as follows:
function Sandbox () {
Turning arguments into an array
var args = Array.prototype.slice.call (arguments),
The last argument is the callback
callback = Args.pop (),
Modules can is passed as an array or as individual parameters
Modules = (Args[0] && typeof args[0] = = = "string")?
Args:args[0],
I
Make sure the function is called
As a constructor
if (!) ( This instanceof Sandbox)) {
return new Sandbox (modules, callback);
}
Add properties to ' this ' as needed:
THIS.A = 1;
this.b = 2;
Now add modules to the core ' this ' object
No modules or "*" both mean "use all modules"
if (!modules | | modules = = ' * ') {
modules = [];
For (i in Sandbox.modules) {
if (Sandbox.modules.hasOwnProperty (i)) {
Modules.push (i);
}
}
}
Init the required modules
for (i = 0; i < modules.length; i++) {
Sandbox.modules[modules[i]] (this);
}
Call the callback
Callback (this);
}
Any prototype properties as needed
Sandbox.prototype = {
Name: "My Application",
Version: "1.0",
Getname:function () {
return this.name;
}
};
Code Listing 8: Implementing the Sandbox constructor
Source: Stoyan stefanov-javascript Patterns part 7:the Sandbox
