JavaScript 模組化詳解

阿新 • • 發佈：2021-12-29

前言：

1.概念

將一個複雜的程式依據一定的規則(規範)封裝成幾個塊(檔案),並進行組合在一起；
塊的內部資料與實現是私有的,只是向外部暴露一些介面(方法)與外部其它模組通訊。

2.模組化的好處

避免命名衝突(減少名稱空間汙染)；
更好的分離,按需載入；
更高複用性；
更高可維護性。

3.引入多個script標籤後出現的問題

請求過多（依賴的模組過多，請求就會過多）；
依賴模糊（不知道模組的具體依賴關係，導致載入順序出錯）；

難以維護（以上兩個原因就會造成這個結果）。

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src=".js"></script>
  <script src="module.js"></script>
</head>
<body>
  <div>123</div>
</body>
<script>
  myModule.foo();
  myModule.bar();
  console.log(myModule.data) ;
  myModule.data = 'xxxx';
  myModule.foo();
</script>
</html>

//module.js IIFE（匿名函式自呼叫）
;(function(window,$){
  let data = "www.baidu.com";
  function foo() {
    console.log(`foo() ${data}`);
    //這裡需要使用jQuery庫
    $('body').('background','red')
  }
  function bar() {
    console.log(`bar() ${data}`);
    otherFun();
  }
  function otherFun() {
    console.log(`otherFun()`);
  }
  window.myModule = { foo,bar };
})(window,jQuery)

一、CommonJS

NODE 就是基於commonJS模組規範，每一個檔案就是一個模組；有自己的作用域；在伺服器端，模組的載入是同步的；在瀏覽器端，模組需提前編譯打包處理

特點：

所有程式碼都執行在模組作用域，不會汙染全域性作用域；
模組可以多次載入，但是隻會在第一次載入時執行一次，然後執行結果就被快取了，以後再載入，就直接讀取快取結果。要想讓模組再次執行，必須清除快取。
模組載入的順序，按照其在程式碼中出現的順序。

語法：

暴露模組：js module.exports = value 或者 js exports.xxx = value
引入模組：js require('xxx') 如果是第三方模組，xxx為模組名；如果是自定義模組，xxx為模組檔案路徑

CommonJS規範規定，每個模組內部，module變數代表當前模組。這個變數是一個物件，它的exports屬性（即module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。

require命令用於載入模組檔案。require命令的基本功能是，讀入並執行一個檔案，然後返回該模組的exports物件。如果沒有發現指定模組，會報錯。

CommonJS模組的載入機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，模組內部的變化就影響不到這個值

二、AMD

相比於CommonJS的同步載入模組，AMD更適合於瀏覽器端的非同步模組載入，因為AMD允許指定回撥函式
目錄結構

JavaScript模組化詳解

使用require.js

<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>

//定義一個沒有依賴的module1模組
define('module1',() => {
  let count = 0;
  const add = () => ++ count;
  const reset = () => count = 0;
  const upperCase = string => string.toUpperCase()

  return {
    add,reset,upperCase
  }
})

//定義一個有依賴的module2模組，依賴module1
define('module2',['module1'],(module1) => {
  const showMsg = () => module1.upperCase('hello-amd');

  return {
    showMsg
  }
})

<!-- 在html檔案中使用模組 -->
<body>KaHHTKIMP;

<script>
  require.config({
    paths: {
      module1: './modules/module1',modulehttp://www.cppcns.com2: './modules/module2'
    }
  })
  require(['module1','module2'],(module1,module2) => {
    console.log(module1.add()) // 1
    console.log(module1.reset()) //0
    console.log(module2.showMsg()) //HELLO-AMD
  })
</script>
</body>

三、CMD

CMD集CommonJS與AMD的優點於一身，cmd 規範專門用於瀏覽器端，模組的載入是非同步的，模組使用時才會載入執行（實現了按需載入，而AMD是不支援按需載入的）
目錄結構

JavaScript模組化詳解

使用sea.js

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>

//定義模組module1
define((require,exports,module) => {

  let string = 'I am a stringhttp://www.cppcns.com';
  const readString = () => 'module1 show() ' + string;

  //向外暴露
  exports.readString = readString;
})

//定義模組module2
define((require,module) => {
  exports.msg = "正是在下啊"
})

//定義模組module
define((require,module) => {
  //引入依賴模組（同步）
  var module1 = require('./module1');
  console.log(module1.readString()) // module1 show() I am a string

  //引入依賴模組（非同步）
  require.async('./module2',md2 => {
    console.log(`這是非同步引入的:${md2.msg}`) //這是非同步引入的:正是在下啊
  })
})

<!-- html檔案使用module -->
<body>
<script>
  seajs.use('./modules/module')
</script>

四、ES6模組化

ES6 模組的設計思想是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。CommonJS 和 AMD 模組，都只能在執行時確定這些東西。
兩個關鍵字 import和export

import 匯入
export 匯出

//mian.js
export default {
  showMsg() {
    console.log('hahahahahah')
  }
}
export const msg = "正是花好月圓時！"

//index.js
import module1 from "./module1"; //對應export default
module1.showMsg()
import { msg } from './module1'; //對應export
console.log(msg)

/*tips: 不要在html裡使用<script type="module">
import .....,有跨域問題，可以在vscode裡下載一個外掛，或者本地起服務都可以解決，就不贅述了。
</script>*/

到此這篇關於Script 模組化詳解的文章就介紹到這了,更多相關JavaScript 模組化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！