Javascript模块化 - CommonJS - AMD - CMD - UMD 模块化方式详解

最新推荐文章于 2025-07-13 20:31:25 发布

原创

最新推荐文章于 2025-07-13 20:31:25 发布 · 907 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #模块化 #CommonJS #AMD #CMD #UMD #ES6

模块化理解

在JavaScript发展初期就是为了实现简单的页面交互逻辑，而如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。模块化已经发展了有十余年了，不同的工具和轮子层出不穷，但总结起来，它们解决的问题主要有三个：

外部模块的管理；
内部模块的组织；
模块源码到目标代码的编译和转换；

以下为各个工具或者框架的诞生时间，先了解下时间节奏，方便对内容有所了解：

 生态             诞生时间
 Node.js          2009年   
 NPM              2010年   
 requireJS(AMD)   2010年
 seaJS(CMD)       2011年
 broswerify       2011年
 webpack          2012年
 grunt            2012年 
 gulp             2013年
 react            2013年 
 vue              2014年
 angular          2016年
 redux            2015年 
 vite             2020年
 snowpack         2020年

什么是模块

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起；
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；

模块化的进化过程

全局function模式

将不同的功能封装成不同的全局函数

编码：将不同的功能封装成不同的全局函数
问题：污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

function m1(){
   
  //...
}
function m2(){
   
  //...
}

namespace模式

简单对象封装

作用：减少了全局变量，解决命名冲突；
问题：数据不安全(外部可以直接修改模块内部的数据)；

let myModule = {
   
  data: 'www.baidu.com',
  foo() {
   
    console.log(`foo() ${
     this.data}`)
  },
  bar() {
   
    console.log(`bar() ${
     this.data}`)
  }
}
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo() // foo() other data

这样的写法会暴露所有模块成员，内部状态可以被外部改写。

IIFE自调用模式

匿名函数自调用(闭包)

作用：数据是私有的, 外部只能通过暴露的方法操作
编码：将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
问题：如果当前这个模块依赖另一个模块怎么办?

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
    myModule.foo()
    myModule.bar()
    console.log(myModule.data) //undefined 不能访问模块内部数据
    myModule.data = 'xxxx' //不是修改的模块内部的data
    myModule.foo() //没有改变
</script>

// module.js文件
(function(window) {
   
  let data = 'www.chenghuai.com'
  //操作数据的函数
  function foo() {
   
    //用于暴露有函数
    console.log(`foo() ${
     data}`)
  }
  function bar() {
   
    //用于暴露有函数
    console.log(`bar() ${
     data}`)
    otherFun() //内部调用
  }
  function otherFun() {
   
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = {
    foo, bar } //ES6写法
})(window)

最后得到的结果：

foo() www.chenghuai.com
bar() www.chenghuai.com
otehrFun()
undefined
foo() www.chenghuai.com

IIFE模式增强
这就是现代模块实现的基石

// module.js文件
(function(window, $) {
   
  let data = 'www.baidu.com'
  //操作数据的函数
  function foo() {
   
    //用于暴露有函数
    console.log(`foo() ${
     data}`)
    $('body').css('background', 'red')
  }
  function bar() {
   
    //用于暴露有函数
    console.log(`bar() ${
     data}`)
    otherFun() //内部调用
  }
  function otherFun() {
   
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = {
    foo, bar }
})(window, jQuery)

 // index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
  myModule.foo()
</script>