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 的編程學習 閱讀(5878) 評論(3)  編輯  收藏
          主站蜘蛛池模板: 丹巴县| 沿河| 枞阳县| 西吉县| 古浪县| 麦盖提县| 阳山县| 喀喇沁旗| 德化县| 独山县| 天津市| 玛沁县| 阿瓦提县| 额济纳旗| 繁峙县| 大安市| 丰台区| 综艺| 克拉玛依市| 长宁区| 浠水县| 宁阳县| 苍梧县| 潜山县| 密云县| 南漳县| 牙克石市| 巨鹿县| 铜梁县| 海淀区| 祁东县| 定襄县| 上杭县| 和政县| 淳安县| 西峡县| 桂平市| 阿瓦提县| 大洼县| 绍兴市| 卫辉市|