JavaScript中的模块化

1.原始写法(函数)

 function m1(fn){
           return fn;
      };

      function m2(x){
           return x+1
      };

      document.write(m1(m2(2)));

这种写法会污染全局变量,无法保证不与其它模块发生命名冲突,而且无法直接看出模块成员之间的关系

2.对象

//将函数放入对象里面
 const module1 = {
          count:0,
          increase:function(){
              this.count++
          },
          decrease:function(){
              this.count--
          }
      }
      module1.increase();
      module1.decrease();
      module1.count=100;
      console.log(module1.count);//100

这种写法将对象直接导出,对象的属性可以直接被篡改//module1.count=0

3.立即执行函数

const module2=(function(){
        var count=0;
        const increase=function(){
           count++;
        };
        const decrease = function(){
          count--;
        }

        const getCount=function(){
            return count;
        }
      return {
          increase,
          decrease,
          getCount
      }
      })()

      console.log(module2.count);//undefined
      module2.increase();
      console.log(module2.getCount());//1

//缺点:无法直接访问模块的变量,必须通过暴露方法getCount来访问count

4.放大模式 (立即执行函数升级版)

 var myModule={
          count:0,
          increase:function(){
              this.count++;
              return this.count;
          },
          decrease:function(){
               this.count--;
               return this.count;
          }

      }

     
    myModule=(function(module){
        console.log(module,6666)
        module.setVal =function(value){
            module.count=value;
        };
        return module;
    })(window.myModule);
    //注意这里如果直接写myModule 会报ReferenceError 
    myModule.setVal(200);
    console.log(myModule.count);//200

//这种写法在各种工具库的源码中随处可见

6. ES6 module