Javascript namespace to improve code reusability

After more than 10 js files are introduced to the same webpage,
Functions with the same name in each js are prone to conflicts.
For example, the addCssStyle method is written in the xxx library,
The yyy Library also writes an addCssStyle method,
The specific implementation of these two methods is different.
When these two components are referenced at the same time, the page effect changes after a function conflict occurs,
Debugging and modification are both very painful. To avoid conflicts,
It is even more depressing to give up Referencing some excellent components.

Therefore, when encapsulating javascript Component Libraries, use namespaces to avoid conflicts.
All methods and variables must be written according to the class name of the package name.
(Writing code is as convenient as encapsulating java's util method)
As a result, my js library is encapsulated as follows.
After google for half a day, there was no ready-made product, so I found out it myself. The sample code is as follows:
(Lizongbo original !!!)

<Script language = "JavaScript" type = "text/javascript">
<! -- // Initialize the namespace
Var jscom = jscom? Jscom :{};
Jscom. lizongbo = jscom. lizongbo? Jscom. lizongbo :{};
// The first Encapsulation Method
Jscom. lizongbo. util = jscom. lizongbo. util? Jscom. lizongbo. util :{
CrtVersion: 'jscom. lizongbo. util version 0.0.1 ', // use commas to separate
SayHello: function (str ){
Window. alert ('Hello: '+ str + 'by' + this. getVersion (); // Add this to the variable reference.
}, // Be sure to separate them with commas
GetVersion: function (){
// Alert ('jscom. lizongbo. util version' + this. crtVersion); // Add this to the variable reference
Return this. crtVersion + 'lizongbo ';
} // Note that there cannot be a comma
}
// Second Encapsulation Method
Jscom. lizongbo. util2 = function () {}; // This line of emphasis ensures the following with call
Jscom. lizongbo. util2.crtVersion = 'jscom. lizongbo. util2 version 0.0.2 ';
Jscom. lizongbo. util2.sayHello = function (str ){
With (jscom. lizongbo. util2) {// here is also the focus, otherwise the getVersion method will not be found.
Window. alert ('Hello: '+ str + 'by' + getVersion (); // this method is not required
}
};
Jscom. lizongbo. util2.getVersion = function (){
With (jscom. lizongbo. util2) {// here is also the focus, otherwise the crtVersion variable will not be found.
Return crtVersion + 'lizongbo2 ';
}
};
Var vutil1 = jscom. lizongbo. util; // similar to java import
Vutil1.sayHello ('lizongbo'); // The first call
Var vutil2 = jscom. lizongbo. util2;
Vutil2.sayHello ('lizongbo'); // method 2
// -->
</Script>

Copy the above Code to the webpage to see the effect.
Compared with the two implementation methods, the existing code is most convenient to be transformed in the second method.
Then, name the js file by namespace, which makes the operation more convenient.
For example
<Script type = "text/javascript" src = "/commons/scripts/jscom. lizongbo. util1.js"> </script>
<Script type = "text/javascript" src = "/commons/scripts/jscom. lizongbo. util2.js"> </script>
As long as the libraries are compiled in this way, there is no need to worry about function conflicts after multiple js files are introduced.