javascript 命名空間以提高代碼重用性
2024-05-06 14:16:48
供稿：網友
當在同一個網頁里引入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文件之后的函數沖突問題了。
