當(dāng)在同一個(gè)網(wǎng)頁(yè)里引入10多個(gè)js文件之后，
各js中的同名函數(shù)就很容易沖突了。
比如xxx庫(kù)里寫了個(gè)addCssStyle方法，
yyy類庫(kù)里也寫了個(gè)addCssStyle方法，
而這兩個(gè)方法的具體實(shí)現(xiàn)又有一定差別。
那么同時(shí)引用這兩個(gè)組件的時(shí)候，函數(shù)沖突之后導(dǎo)致頁(yè)面效果發(fā)生變化，
調(diào)試和修改都是非常痛苦的，如果為了避免沖突，
而放棄引用一些優(yōu)秀的組件，那更是讓人郁悶的事情。

為此，在封裝javascript組件庫(kù)的時(shí)候，請(qǐng)使用命名空間來(lái)避免沖突。
將所有的方法和變量都要按包名類名的方式來(lái)寫。
(這個(gè)時(shí)候?qū)懘a的感覺(jué)和封裝java的util方法一樣方便，呵呵)
由此，我的js庫(kù)按如下方式封裝。
google了半天，都沒(méi)現(xiàn)成的，于是自己摸索出來(lái)，示例代碼如下：
(lizongbo原創(chuàng)?。?！)

<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', //注意用逗號(hào)隔開
sayHello: function (str){
window.alert('hello : '+str +' by ' + this.getVersion()); //變量引用要加上this
},//注意用逗號(hào)隔開
getVersion :function (){
//alert(' jscom.lizongbo.util version ' + this.crtVersion);//變量引用要加上this
return this.crtVersion+' lizongbo';
}//注意不能夠有逗號(hào)
}
//第二種封裝方法
jscom.lizongbo.util2 =function (){};//重點(diǎn)是這行，它保證了下面的with調(diào)用
jscom.lizongbo.util2.crtVersion=' jscom.lizongbo.util2 version 0.0.2';
jscom.lizongbo.util2.sayHello = function(str){
with (jscom.lizongbo.util2) {//這里也是重點(diǎn)，不然會(huì)找不到getVersion方法。
window.alert('你好 : '+str +' by ' + getVersion());//這種方法不用加this
}
};
jscom.lizongbo.util2.getVersion = function(){
with (jscom.lizongbo.util2) {//這里也是重點(diǎn)，不然會(huì)找不到crtVersion變量。
return crtVersion+' lizongbo2';
}
};
var vutil1= jscom.lizongbo.util; //和java的import差不多好用
vutil1.sayHello('lizongbo'); //第一種調(diào)用
var vutil2= jscom.lizongbo.util2;
vutil2.sayHello('lizongbo');//第二種調(diào)用
//-->
</script>

把上面的代碼復(fù)制網(wǎng)頁(yè)里看看效果吧。
對(duì)比兩種實(shí)現(xiàn)方式，現(xiàn)有代碼按第二種方式改造最為方便。
再把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>
只要都按此方式編寫的庫(kù)，再也不用擔(dān)心引入多個(gè)js文件之后的函數(shù)沖突問(wèn)題了。

最新評(píng)論