浅谈前端模块化开发的四种方法

最近在了解前端模块化开发，接下来会把相关的笔记/心得分几片文章记录下来。

 一、为什么要模块化开发

• js越多，依赖越强，灵活性越小（如引入顺序）；
• 多人开发，容易出现命名冲突等问题；
• ... ...

二、解决方案：

1. 匿名闭包；
   1. 解决了命名冲突；
   2. 代码复用性变弱；
2. 使用模块作为出口；

   // 3.使用变量接收对象
   var myModule = (function(){
       // 1.在匿名函数内部定义一个对象；
       var obj = {};
       var sum = function(a,b){
           return a+b;
       }
       var flag = true;
       
       obj.sum = sum;
       obj.flag = flag;
       // 2.暴露对象；
       return obj;
   })();

   其他成引入该js就能直接使用属于自己模块的属性和方法：

   if(myModule.flag){
       console.log(myModule.sum(1,0));    
   }

    

3. CommonJS

   1. 核心：导入，导出

   2. 导出示例：

      module.exports={
          flag: true,
           sum: function(a,b){
                return a+b;
          }
      }

       

   3. 导入示例：

      // 1.普通写法
      var someModule = require('./config.js');
      
      if(someModule.flag){
          someModule.sum(1,2);
      }
      
      // 2.解构赋值
      var {flag,sum} = require('./config.js');
      
      if(flag){
          sum(1,2);
      }

       

4. ES6的模块化：export/import

   1. 导出示例：

      var flag = true;
      var sum = function(a,b){
          return a+b;
      }
      
      // 导出方式1:报错就写export default
      // export default导出有且只能有一个，导入的时候也变成了import from './config.js',也就是说名字可以省略，由导入者自己命名；
      export {flag,sum}
      
      // 默认导出函数，导入者不能省略名字，但是可以自己命名
      export default function(){
          console.log("export default function")
      }
      
      
      // 导出方式2:
      export var name = "wayne";
      export function mul(a,b){
          return a*b;
      }
      export class Person{
          run(){
              console.log("run away!")
          }
      }

       

   2. 导入示例：

      // 注意文件名简写的问题
      import {flag,sum, Person} from './config.js';
      
      if(flag){
          console.log(sum(1,2))
      }
      
      var p = new Person;
      p.run()
      
      
      // 导入的东西比较多的时候
      import * as 自定义命名 from './config.js'

       

其他小记：

<!-- type="module"属性会让js文件模块化，其他js文件不能访问其中的变量和方法 -->
<script src="./config.js" type="module"></script>

END;