模塊化進化史教程

1. 全局function模式

• module1.js

  //數(shù)據(jù)
  let data = 'atguigu.com'
  
  //操作數(shù)據(jù)的函數(shù)
  function foo() {
    console.log(`foo() ${data}`)
  }
  function bar() {
    console.log(`bar() ${data}`)
  }
  

• module2.js

  let data2 = 'other data'
  
  function foo() {  //與另一個模塊中的函數(shù)沖突了
    console.log(`foo() ${data2}`)
  }
  

• test1.html

  <script type="text/javascript" src="module1.js"></script>
  <script type="text/javascript" src="module2.js"></script>
  <script type="text/javascript">
  
    let data = "修改后的數(shù)據(jù)"
    foo()
    bar()
  </script>
  

• 說明:
  • 全局函數(shù)模式: 將不同的功能封裝成不同的全局函數(shù)
  • 問題: Global被污染了, 很容易引起命名沖突

2. namespace模式

• module1.js

  let myModule = {
    data: 'atguigu.com',
    foo() {
      console.log(`foo() ${this.data}`)
    },
    bar() {
      console.log(`bar() ${this.data}`)
    }
  }
  

• module2.js

  let myModule2 = {
    data: 'atguigu.com2222',
    foo() {
      console.log(`foo() ${this.data}`)
    },
    bar() {
      console.log(`bar() ${this.data}`)
    }
  }
  

• test2.html

  <script type="text/javascript" src="module2.js"></script>
  <script type="text/javascript" src="module22.js"></script>
  <script type="text/javascript">
    myModule.foo()
    myModule.bar()
  
    myModule2.foo()
    myModule2.bar()
  
    myModule.data = 'other data' //能直接修改模塊內(nèi)部的數(shù)據(jù)
    myModule.foo()
  
  </script>
  

• 說明
  • namespace模式: 簡單對象封裝
  • 作用: 減少了全局變量
  • 問題: 不安全

3. IIFE模式

• module3.js

  (function (window) {
    //數(shù)據(jù)
    let data = 'atguigu.com'
  
    //操作數(shù)據(jù)的函數(shù)
    function foo() { //用于暴露有函數(shù)
      console.log(`foo() ${data}`)
    }
  
    function bar() {//用于暴露有函數(shù)
      console.log(`bar() ${data}`)
      otherFun() //內(nèi)部調(diào)用
    }
  
    function otherFun() { //內(nèi)部私有的函數(shù)
      console.log('otherFun()')
    }
  
    //暴露行為
    window.myModule = {foo, bar}
  })(window)
  

• test3.html

  <script type="text/javascript" src="module3.js"></script>
  <script type="text/javascript">
    myModule.foo()
    myModule.bar()
    //myModule.otherFun()  //myModule.otherFun is not a function
    console.log(myModule.data) //undefined 不能訪問模塊內(nèi)部數(shù)據(jù)
    myModule.data = 'xxxx' //不是修改的模塊內(nèi)部的data
    myModule.foo() //沒有改變
  
  </script>
  

• 說明:
  • IIFE模式: 匿名函數(shù)自調(diào)用(閉包)
  • IIFE : immediately-invoked function expression(立即調(diào)用函數(shù)表達式)
  • 作用: 數(shù)據(jù)是私有的, 外部只能通過暴露的方法操作
  • 問題: 如果當前這個模塊依賴另一個模塊怎么辦?

4. IIFE模式增強

• 引入jquery到項目中
• module4.js

  (function (window, $) {
    //數(shù)據(jù)
    let data = 'atguigu.com'
  
    //操作數(shù)據(jù)的函數(shù)
    function foo() { //用于暴露有函數(shù)
      console.log(`foo() ${data}`)
      $('body').css('background', 'red')
    }
  
    function bar() {//用于暴露有函數(shù)
      console.log(`bar() ${data}`)
      otherFun() //內(nèi)部調(diào)用
    }
  
    function otherFun() { //內(nèi)部私有的函數(shù)
      console.log('otherFun()')
    }
  
    //暴露行為
    window.myModule = {foo, bar}
  })(window, jQuery)
  

• test4.html

  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="module4.js"></script>
  <script type="text/javascript">
    myModule.foo()
  </script>
  

• 說明
  • IIFE模式增強 : 引入依賴
  • 這就是現(xiàn)代模塊實現(xiàn)的基石

5. 頁面加載多個js的問題

• 頁面:

  <script type="text/javascript" src="module1.js"></script>
  <script type="text/javascript" src="module2.js"></script>
  <script type="text/javascript" src="module3.js"></script>
  <script type="text/javascript" src="module4.js"></script>
  

• 說明
  • 一個頁面需要引入多個js文件
  • 問題:
    • 請求過多
    • 依賴模糊
    • 難以維護
  • 這些問題可以通過現(xiàn)代模塊化編碼和項目構建來解決