lizongbo 的 編程學習

          http://618119.com

          BlogJava 首頁 新隨筆 聯系 聚合 管理
            23 Posts :: 1 Stories :: 78 Comments :: 0 Trackbacks

          當在同一個網頁里引入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文件之后的函數沖突問題了。

          ?

          posted on 2006-06-19 15:39 lizongbo 的編程學習 閱讀(5877) 評論(3)  編輯  收藏
          主站蜘蛛池模板: 绿春县| 镇赉县| 新乡市| 息烽县| 姜堰市| 双流县| 开远市| 孟村| 康乐县| 高邮市| 含山县| 莒南县| 东海县| 康保县| 青龙| 永寿县| 淮南市| 出国| 曲水县| 北流市| 西丰县| 宁明县| 东辽县| 资兴市| 方山县| 开封县| 昌吉市| 瑞安市| 庆城县| 宜春市| 阿勒泰市| 南陵县| 西峡县| 富民县| 礼泉县| 滦南县| 白沙| 沙坪坝区| 九龙城区| 崇信县| 永宁县|