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

本文介绍如何在JavaScript中通过将变量封装在匿名函数内,避免全局变量冲突的方法,并详细解释了三种实现方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值