JavaScript design patterns security sandbox mode_js object-oriented

Namespace

JavaScript itself does not provide a namespace mechanism, so in order to avoid different function, object and variable names contaminating the global space, the usual approach is to create a unique namespace for your application or library. global object, and then add all methods and properties to this object.

Code Listing 1: Traditional namespace mode


In this paragraph In the code, you create a global object MYAPP and attach all other objects and functions to MYAPP as properties.

Usually this is a better way to avoid naming conflicts, and it is used in many applications. project, but this approach has some disadvantages.

1. You need to add prefixes to 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 modify the global object arbitrarily and cause the rest of the code to be passively updated.

Global Constructor

You can use a global constructor instead of a global object. We named this constructor Sandbox(). You can use this constructor to create objects. You can also pass a callback function as a parameter to the constructor. This callback function is an independent sandbox environment where you store your code.

Code Listing 2: Use of Sandbox


Let’s add some other features to the sandbox


1. You can not use the 'new' operator when creating a sandbox

2. The Sandbox() constructor accepts some additional configuration parameters, which define what is needed to generate the object The name of the module where 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 calls the 'ajax' and 'event' modules without the need for the 'new' operator.



Code Listing 3: Pass the module name in the form of an array

Listing 4: Passing the module name as a separate parameter

Listing 5 shows that you can use the wildcard character ' *' is passed to the constructor as a parameter, which means that all available modules are called. For convenience, if no module name is passed to the constructor as a parameter, the constructor will pass '*' as a default parameter.


Code Listing 5: Calling the available modules


Code Listing 6 shows that you can initialize the sandbox object multiple times, and you can even nest them without worrying about any interaction between them. Conflict.

Code Listing 6: Nested Sandbox Instances

From the above examples It can be seen that using the sandbox mode, by wrapping all code logic in a callback function, you generate different instances according to the different modules required, and these instances work independently without interfering with each other, thus protecting the global naming. space.

Now let’s see how to implement the Sandbox() constructor.


Adding modules

Before implementing the main constructor, let’s see how to add Add modules to the Sandbox() constructor.

Since the Sandbox() constructor function is also an object, you can add an attribute called 'modules' to it. This attribute will be an object containing a set of key-value pairs, where each pair of key-value Key is the name of the module that needs to be registered, and Value is the entry function of the module. When the constructor is initialized, the current instance will be passed to the entry function as the first parameter, so that the entry function can add additional attributes to the instance. and methods.

In code listing 7, we added the 'dom', 'event', and 'ajax' modules.


Code Listing 7: Registration module


Implementation structure Constructor

Code Listing 8 describes the method of implementing the constructor, with several key points:

1. We check whether this is an instance of Sandbox. If not, it proves that Sandbox has not been new operator call, we will call it again as a constructor.
2. You can add attributes to this inside the constructor, and you can also add attributes to the prototype of the constructor.
　3. The module name will be passed to the constructor in various forms such as arrays, independent parameters, wildcard characters '*', etc.
4. Please note that in this example we do not need to load the module from an external file, but in systems such as YUI3, you can only load the base module (often called a seed), and all other modules Will be loaded from an external file.
5. Once we know the required modules and initialize them, this means calling the entry function of each module.
　6. The callback function is passed into the constructor last as a parameter. It will use the latest generated instance and execute it at the end.