Skip to content
On this page

为什么要使用模块化?有哪几种方式可以实现模块化,各有什么特点?

为什么要使用模块化?

好处

  • 解决命名冲突
  • 提高代码复用性
  • 提高项目的可维护性

有哪几种方式可以实现模块化,各有什么特点

  • IIFE(立即执行函数)
  • AMD
    js
      define(['./a', './b'], function(a, b) {
        // 加载模块完毕可以使用
        a.do()
        b.do()
      })
    
  • CMD
    js
      define(function(require, exports, module) {
        // 加载模块
        // 可以把 require 写在函数体的任意地方实现延迟加载
        var a = require('./a')
        a.doSomething()
      })
    
  • CommonJS

CommonJS 最早是 Node 在使用,目前也仍然广泛使用,比如在 Webpack 中你就能见到它,当然目前在 Node 中的模块管理已经和 CommonJS 有一些区别了

js
  // a.js
  module.exports = {
      a: 1
  }
  // or 
  exports.a = 1

  // b.js
  var module = require('./a.js')
  module.a // -> log 1
  • ES Module

ES Module 是原生实现的模块化方案,与 CommonJS 有以下几个区别:

方案导出导入语法this
CommonJS值拷贝/只能单个导出动态导入(运行时加载)/同步导入动态语法,可以写在判断中当前模块
ES Module值的引用/可以导出多个编译时输出接口/异步导入静态语法,只能写在最顶层undefined

ES Module 会编译成 require/exports 来执行的

js
// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}