前端模組化彙總

Mjser發表於2021-12-01
前端

模組化

含義

模組化： 模組化就是將單個檔案當成一個模組，在日常專案開發裡面我們不會將所有邏輯寫在一個檔案裡面，不管是css還是js。原因是這樣會導致單個檔案過大，無法實現複用和維護，所以我們會將檔案進行切割分離，這樣分離獨立出來的每一個檔案都是一個模組。

css的模組化

  • 在css裡面，我們可以將單個公用的css檔案進行分離，在需要的css檔案裡面匯入。
  • 原生css裡面我們可以使用 @import(css檔案路徑); 進行匯入。
  • sass/less/stylus都有各自的匯入檔案方法，例如sass的@import css檔案路徑;
  • 所以css檔案的模組化相當於來講比較簡單，不需要匯出，只需要匯入使用css檔案。

js的模組化

  • 在js裡面，原生的js不支援一個js檔案匯入另一個js檔案，我們需要將用到的js檔案按照順序利用script標籤匯入到html裡面使用。這樣檔案依次載入，必須保證嚴格的載入順序，而且檔案之前的依賴關係不能很好的展示，對於開發來說，不利於閱讀和維護。
  • 所以針對於這樣的情況，很多大佬們提出了js模組化的管理機制，下面就詳細介紹四種主流的模組化機制以及程式碼演示。
    1. commonjs規範
      • 以nodejs為代表
      • 匯入
        • const math = require('./math')
      • 匯出
          // 多個匯出
    module.exports = {
        add: function(){

        },
        plus: function(){

        }
    }

          // 單個匯出
    exports.add = function(){

    }
    exports.plus = function(){

    }
    2. esm規範
      • es6提出的模組化方案
      • 匯入
        • 按需匯入 import {add, plus} from './math.js'
        • 預設匯入 import math from './math.js'
      • 匯出
          // 按需匯出
    const add = (a,b) => a+b
    const plus = (a,b) => a-b
    export {add, plus}

          // 預設匯出
    export default {
        add: (a,b)=> a+b,
        plus: (a,b) => a-b
    }
    3. AMD規範
      • 以requirejs為代表
      • 匯入
          require(['./math'], (math)=>{
        console.log(math.add(1,2))
        console.log(math.plus(1,2))
    })
      • 匯出
          define(()=>{
        const add = (a,b) => a+b
        const plus = (a,b) => a-b
        return {
            add,
            plus
        }
    })
    4. CMD規範
      • 以seajs為代表
      • 匯入
          define((requires)=>{
        // 匯入
        const math = requires('./math')
        console.log(math.add(2,3))
        console.log(math.plus(2,3))
    })
      • 匯出
          define((requires, exports, modules)=>{
        // 匯出
        const add = (a,b) => a+b
        const plus = (a,b) => a-b
        exports.add = add
        exports.plus = plus
    })
      • 我們會發現js模組化不管哪一種語法，都包含匯入和匯出，所以模組化管理就是一種話匯入和匯出。

模組化規範的區別

  • esm規範是es6推出的模組化方案，目前這種方案逐漸被各大主流瀏覽器最新版本支援，是未來js在瀏覽器(客戶端)的選擇方向。
  • commonjs目前主要引用範圍是基於node,目前主要適用於js服務端的模組化管理。
  • AMD規範和CMD規範都是在es6模組化出現之前讓瀏覽器（客戶端）支援模組化的方案，兩種的區別主要體現在載入依賴的時機不一樣。
    • AMD推崇的是依賴前置，就是用到哪些依賴就提前匯入
        // requirejs
    defined(['./math'], function(math){
        // 當前模組用到了math模組，要在定義模組的時候匯入math
    })
    • CMD推崇的是依賴就近，就是什麼時候用到什麼時候匯入
        // sea.js
    defined(function(require){
        // 當前模組用到了math模組，在需要的用的時候就近匯入
        const math = require('./math')
    })
  • 專案的原始碼地址

相關文章