1. 程式人生 > >js 的模組化的幾種用法和方式

js 的模組化的幾種用法和方式

 <script type="text/javascript">
           //   在JavaScript裡最令人懊惱的事情是變數沒有使用範圍。任何變數,函式,陣列,物件,只要不在函式內部,都被認為是全域性的,這就是說,這個頁面上的其它指令碼也可以訪問它,而且可以覆蓋重寫它。
            //  解決辦法是,把你的變數放在一個匿名函式內部,定義完之後立即呼叫它。例如,下面的寫法將會產生三個全域性變數和兩個全域性函式:
           var name = 'Chris';
            var age = '34';
           var status = 'single';
            function createMember(){


                }
            function getMemberDetails(){


                }
           //如果這個頁面上的其它腳本里也存在一個叫 status 的變數,麻煩就會出現。如果我們把它們封裝在一個 myApplication 裡,這個問題就迎刃而解了:
              var myApplication=function(){
                  var name = 'Chris';
                  var age = '34';
                  var status = 'single';
                  function getage(){
                        return age;
                  }
                  function getname(){
                           return name;
                  }
              }();
          //但是,這樣一來,在函式外面就沒有什麼功能了。如果這是你需要的,那就可以了。你還可以省去函式的名稱
                      (function(){
                          var name = 'Chris';
                          var age = '34';
                          var status = 'single';
                          function getage(){
                              return age;
                          }
                          function getname(){
                              return name;
                          }
                      })();


           //如果你想在函式外面也能使用裡面的東西,那就要做些修改。為了能訪問 getage() 或 getage(),你需要把它們變成 myApplication的屬性,從而把它們暴露於外部的世界:*******
           // 三種方式種方式
              var myf=function(){
                  var name = 'Chris';
                  var age = '34';
                  var status = 'single';
                  return {getage: function (){
                      return age;
                  },
                      getname:function (){
                          return name;
                      }
                  };
              }();


        //   alert( myf.getage()+"*"+ myf.getname());
              var myft= function(){
                  var name = 'Chris';
                  var age = '34';
                  var status = 'single';
                  function getage(){
                      return age;
                  }
                  function getname(){
                      return name;
                  }
                  return {geta:getage,getn:getname};
              }();
     //    alert( myft.geta()+"*"+ myft.getn());


           //物件的方式
              var myfd={
                      name:'Chris',
                      age:'34',
                      status:'single',
                    getage:function(){ return age;},
                    getname:function(){ return name;}
                      };
         //  alert( myfd.getage()+"**"+ myfd.getname());


           //帶預設引數的
              var $=(function(a,b){
                     return {
                         geta:function(s){return a+s;},
                         getb:function(){return b;}
                     }
              })(1,2);
              alert($.geta(8));


           //不帶預設引數的帶預設引數的
           var $=(function(a,b){
               var n=3;
               return {
                   geta:function(s){return a+s;},
                   getb:function(){return b+n;}
               }
           });
           alert($(2,3).geta(8));
           alert($(2,3).getb(8));


          </script>