javascript 命名空間以提高代碼重用性

當在同一個網頁裡引入10多個js檔案之後，
各js中的同名函數就很容易衝突了。
比如xxx庫裡寫了個addCssStyle方法，
yyy類庫裡也寫了個addCssStyle方法，
而這兩個方法的具體實現又有一定差別。
那麼同時引用這兩個組件的時候，函數衝突之後導致頁面效果發生變化，
調試和修改都是非常痛苦的，如果為了避免衝突，
而放棄引用一些優秀的組件，那更是讓人鬱悶的事情。

為此，在封裝javascript組件庫的時候，請使用命名空間來避免衝突。
將所有的方法和變數都要按包名類名的方式來寫。
(這個時候寫代碼的感覺和封裝java的util方法一樣方便，呵呵)
由此，我的js庫按如下方式封裝。
google了半天，都沒現成的，於是自己摸索出來，範例程式碼如下：
(lizongbo原創！！！)

<script language="JavaScript" type="text/javascript" >
<!-- //初始化命名空間
var jscom = jscom ? jscom : {};
jscom.lizongbo = jscom.lizongbo ? jscom.lizongbo : {};
//第一種封裝方法
jscom.lizongbo.util = jscom.lizongbo.util ? jscom.lizongbo.util : {
crtVersion : 'jscom.lizongbo.util version 0.0.1', //注意用逗號隔開
sayHello: function (str){
window.alert('hello : '+str +' by ' + this.getVersion()); //變數引用要加上this
},//注意用逗號隔開
getVersion :function (){
//alert(' jscom.lizongbo.util version ' + this.crtVersion);//變數引用要加上this
return this.crtVersion+' lizongbo';
}//注意不能夠有逗號
}
//第二種封裝方法
jscom.lizongbo.util2 =function (){};//重點是這行，它保證了下面的with調用
jscom.lizongbo.util2.crtVersion=' jscom.lizongbo.util2 version 0.0.2';
jscom.lizongbo.util2.sayHello = function(str){
with (jscom.lizongbo.util2) {//這裡也是重點，不然會找不到getVersion方法。
window.alert('你好 : '+str +' by ' + getVersion());//這種方法不用加this
}
};
jscom.lizongbo.util2.getVersion = function(){
with (jscom.lizongbo.util2) {//這裡也是重點，不然會找不到crtVersion變數。
return crtVersion+' lizongbo2';
}
};
var vutil1= jscom.lizongbo.util; //和java的import差不多好用
vutil1.sayHello('lizongbo'); //第一種調用
var vutil2= jscom.lizongbo.util2;
vutil2.sayHello('lizongbo');//第二種調用
//-->
</script>

把上面的代碼複製網頁裡看看效果吧。
對比兩種實現方式，現有代碼按第二種方式改造最為方便。
再把js檔案按命名空間命名，那樣操作就更加方便了。
例如
<script type="text/javascript" src="/commons/scripts/jscom.lizongbo.util1.js"></script>
<script type="text/javascript" src="/commons/scripts/jscom.lizongbo.util2.js"></script>
只要都按此方式編寫的庫，再也不用擔心引入多個js檔案之後的函數衝突問題了。