JavaScript Namespace Namespace Usage instructions

People who write C or Java habits may find that JavaScript does not have the concept of namespaces, of course, if apes (such as write Js,php,python) do not have access to namespaces, they may not pay attention or attention to namespaces. Such a situation is common, see many people write JavaScript directly on the global variables, such as:

The code is as follows	Copy Code
function A () { } Function B () { }

What is a namespace? A form of code organized by a language is categorized by namespaces to distinguish between different code functions. Regardless of the size of the project, if you start by not strictly following the namespace to write the program, when you write to the tens of thousands of JavaScript programs, I believe you will regret that your object or function naming has been very confusing. So it is recommended that children start to develop the habit of naming space, such as you want to develop a project, the function may be as follows:

Then you can name it like this:

code is as follows

copy code

Configuration var config = {}; Front desk Config.front = {}; Background Config.admin = {}; Background data Config.admin.data = {}; Background module Config.admin.module = {}; Background color module Config.admin.module.color = {}; Background picture Module Config.admin.module.images = {}; Background Search Module Config.admin.module.search = {}; Background color change function for background color module Config.admin.module.color.changeBgColor = function (color) { Document.body.style.background = color; }; Can call this Config.admin.module.color.changeBgColor (' #F30 ');

Let's look at the structure of the object in memory

However, the way the namespaces are declared above does not look intuitive, and we come to a more intuitive structured naming approach:

The code is as follows

Copy Code

Configuration var config = { Front desk Front: {}, Background Admin: { Data tier Data: {}, Module layer Module: { Color module Color: { Background color change function Changebgcolor:function (color) { Document.body.style.background = color; }, Foreground color Change function Changefncolor:function (color) { Document.body.style.color = color; } }, Picture module Images: { }, Search Module Search: { } } } }; Can call this Config.admin.module.color.changeBgColor (' #F30 ');

The above declarative approach to the structure of a very good presentation, the use of namespaces is very convenient management and maintenance expansion procedures, when the number of people development or JavaScript code written in large numbers do not worry about naming conflicts. We can also write a namespace function that eliminates the complexity of declarative representations. For example, the above example actually I just temporarily use config.admin.module.color.changeBgColor this function, then I need to define config first, then admin, then module, finally is Color.changebgcolor, more tedious, So we can write a namespace registration function, direct registration can be used:

The code is as follows

Copy Code

Namespace Registration functions var namespace = { Reg:function (s) { var arr = s.split ('. '); var namespace = window; for (Var i=0,k=arr.length;i<k;i++) { if (typeof namespace[arr[i]] = = ' undefined ') { Namespace[arr[i]] = {}; } namespace = Namespace[arr[i]]; } }, Del:function (s) { var arr = s.split ('. '); var namespace = window; for (Var i=0,k=arr.length;i<k;i++) { if (typeof namespace[arr[i]] = = ' undefined ') { Return }else if (k = = i+1) { Delete Namespace[arr[i]]; Return }else{ namespace = Namespace[arr[i]]; } } } };

You can register namespaces like this

The code is as follows	Copy Code
Register Namespaces First Namespace.reg (' Config.admin.module.color '); Add Features Config.admin.module.color.changeBgColor = function (color) { Document.body.style.background = color; }; Invoke feature Config.admin.module.color.changeBgColor (' #F30 '); Delete namespaces Namespace.del (' Config.admin.module.color ');

Namespaces do not have a unique rule, only according to each project and the project owner of the program analysis and then give a certain naming rules, such as some items according to the function namespace, some items according to the owner name namespace, and so on. However, in either case, a reasonable namespace will not be refactored because of a naming conflict when you are working with large projects. So the JS file in your site will be the first to introduce Namespace.js, which defines all the namespaces and management for this project.

Namespaceobjectfactory: Generates Namespaceobject objects based on FQN.
The Namespaceobjectfactory object has only one create method, and the parameter is the name of the namespace (fully qualified name). The method has a closure environment where a cache variable is used to cache all generated Namespaceobject objects.
A Namespaceobject object contains three attributes, stash (record current namespace), Fqn (namespace name), Proc (Createprocedure object). Methods include: Enqueue,call,valueof,merge,getstash,getexport

The code is as follows

Copy Code

Namespaceobject var = function _private_class_of_namespaceobject (FQN) { Merge (this, { Stash: {CURRENT_NAMESPACE:FQN}, FQN:FQN, Proc:createprocedure () 79}); 80}; Bayi Merge (Namespaceobject.prototype, { Enqueue:function (context) { This.proc.next (context); 84}, Call:function (State,callback) { This.proc.call (State, callback); 87}, Valueof:function () { "#NamespaceObject <" + this.fqn + ">"; 90}, Merge:function (obj) { (This.stash,obj); The return of this; 94}, Getstash:function () { return this.stash; 97}, Getexport:function (ImportName) { if (importname = = = ' * ') return this.stash; 100 The var importnames = Importname.split (/,/), 102 Retstash = {}; for (var i = 0,l=importnames.length;i<l;i++) { retstash[Importnames[i]] = this.stash[Importnames[i]]; 105} The return retstash; 107} 108}); 109 var namespaceobjectfactory = (function () { The var cache = {}; I return { 112 Create:function (FQN) { 113 _ASSERTVALIDFQN (FQN); 114 return (CACHE[FQN] | | (CACHE[FQN] = new Namespaceobject (FQN))); 115} 116}; 117}) ();