js 的模块化的几种用法和方式

来源:互联网 发布:超图软件不动产 编辑:程序博客网 时间:2024/06/15 20:44
 <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>
0 0
原创粉丝点击