當在同一個網頁里引入10多個js文件之后，
各js中的同名函數(shù)就很容易沖突了。
比如xxx庫里寫了個addCssStyle方法，
yyy類庫里也寫了個addCssStyle方法，
而這兩個方法的具體實現(xiàn)又有一定差別。
那么同時引用這兩個組件的時候，函數(shù)沖突之后導致頁面效果發(fā)生變化，
調試和修改都是非常痛苦的，如果為了避免沖突，
而放棄引用一些優(yōu)秀的組件，那更是讓人郁悶的事情。
為此，在封裝javascript組件庫的時候，請使用命名空間來避免沖突。
將所有的方法和變量都要按包名類名的方式來寫。
(這個時候寫代碼的感覺和封裝java的util方法一樣方便，呵呵)
由此，我的js庫按如下方式封裝。
google了半天，都沒現(xiàn)成的，于是自己摸索出來，示例代碼如下：
(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', //注意用逗號隔開
??????? 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>
把上面的代碼復制網頁里看看效果吧。
對比兩種實現(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>
只要都按此方式編寫的庫，再也不用擔心引入多個js文件之后的函數(shù)沖突問題了。
?