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 的編程學習 閱讀(5880) 評論(3)  編輯  收藏
          主站蜘蛛池模板: 四会市| 苏尼特左旗| 巴林右旗| 鄂托克前旗| 柞水县| 勐海县| 昭通市| 建德市| 牡丹江市| 明光市| 广河县| 宜黄县| 宜君县| 奉贤区| 寿光市| 淳化县| 桓仁| 湘乡市| 宁强县| 梨树县| 吉林省| 启东市| 肥乡县| 赞皇县| 都昌县| 宿松县| 达拉特旗| 汤阴县| 任丘市| 礼泉县| 平邑县| 白山市| 张掖市| 荥阳市| 洛隆县| 通辽市| 遵义县| 无锡市| 临沂市| 福安市| 延川县|