淺談前端模塊化開發的四種方法

最近在瞭解前端模塊化開發，接下來會把相關的筆記/心得分幾片文章記錄下來。

 一、爲什麼要模塊化開發

• 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;