JavaScript namespaces to improve code reuse _javascript Tips

When more than 10 JS files are introduced into the same Web page,
Each JS in the same name function is very easy to conflict.
For example, XXX Library wrote a Addcssstyle method,
The YYY Class library also wrote a Addcssstyle method,
and the concrete realization of these two methods has a certain difference.
Then when the two components are referenced, the function conflict causes the page effect to change.
Debugging and modification are all very painful if, in order to avoid conflict,
Instead of citing some good components, that's a depressing thing to do.

To do this, use namespaces to avoid conflicts while encapsulating the JavaScript component library.
All methods and variables are written in the name of the package name.
(This time write code feeling and encapsulation Java Util method is as convenient, hehe)
As a result, my JS library is encapsulated as follows.
Google for a long time, there is no ready-made, and then groped themselves out, the sample code is as follows:
(Lizongbo original!!! )

<script language= "JavaScript" type= "Text/javascript" >
<!--//initialization of namespaces
var jscom = jscom? Jscom: {};
Jscom.lizongbo = Jscom.lizongbo? Jscom.lizongbo: {};
The first method of encapsulation
Jscom.lizongbo.util = Jscom.lizongbo.util? Jscom.lizongbo.util: {
Crtversion: ' jscom.lizongbo.util version 0.0.1 ',//note separated by commas
Sayhello:function (str) {
Window.alert (' Hello: ' +str + ' by ' + this.getversion ()); Variable reference to add this
},//note separated by commas
Getversion:function () {
Alert (' jscom.lizongbo.util version ' + this.crtversion);//variable reference to add this
Return this.crtversion+ ' Lizongbo ';
}//Note that there can be no commas
}
The second method of encapsulation
Jscom.lizongbo.util2 =function () {};//Emphasis is on this line, which guarantees 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 you will not find the GetVersion method.
Window.alert (' Hello: ' +str + ' by ' + getversion ());//This method does not need to add this
}
};
Jscom.lizongbo.util2.getVersion = function () {
With (JSCOM.LIZONGBO.UTIL2) {//This is also the focus, otherwise you will not find the crtversion variable.
Return crtversion+ ' Lizongbo2 ';
}
};
var vutil1= jscom.lizongbo.util; and Java import almost easy to use
Vutil1.sayhello (' Lizongbo '); The first type of call
var vutil2= jscom.lizongbo.util2;
Vutil2.sayhello (' Lizongbo ');//The second call
-->
</script>

Copy the code above to see how it works.
Comparing the two implementations, the existing code is most convenient to be modified in the second way.
The JS file is named after the namespace, so the operation is 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 you write the library in this way, no longer worry about the introduction of multiple JS files after the function of the conflict problem.