前端模塊化匯總

模塊化

含義

模塊化： 模塊化就是將單個文件當成一個模塊，在日常項目開發里面我們不會將所有邏輯寫在一個文件里面，不管是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')
      })
  

• 項目的源代碼地址
  • 碼雲gitee