03月
05

module

发表于 • 字数统计 412
文章目录
  1. 无模块化
  2. CommonJS规范
  3. AMD规范
  4. CMD
  5. ES6模块化
  6. 参考

模块化

无模块化

1
2
<script src="jquery.js"></script>
<script src="main.js"></script>
  1. 容易污染全局作用域
  2. 引用的顺序不能调换
  3. 各文件的依赖关系不明显

CommonJS规范

使用4个重要的环境变量提供支持：

  • module
  • module.exports
  • require (同步加载)
  • global

特点：

  1. 解决了依赖，全局变量污染问题
  2. 同步加载模块，不适用于浏览器端

AMD规范

AMD规范是非同步加载模块，允许指定回调函数
定义了下面三个API：

  1. require([module], callback)
  2. define(id, [depends], callback)
  3. require.config()
1
2
3
4
define(['a', 'b'], function(a, b) {
  a.doSomething()
  b.doSomething()
})

在使用require.js的时候，必须提前加载所有的依赖，然后才可以使用，而不是需要使用时再加载（不能按需加载）

CMD

CMD可以按需加载

1
2
3
4
define(function(require, exports, module) {
  const a = require('./a')
  a.doSomething()
})

ES6模块化

CommomJS和ES6区别：

  1. CommonJS模块输出的是一个值的拷贝，ES6输出的值是引用（ES6中是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块）
  2. CommonJS模块是运行时加载，ES6模块时编译时输出接口。
    CommonJS加载的时一个对象，该对象只有再脚本运行完才会生成。而ES6模块不是对象，它的对外接口只是一种静态定义，再代码静态解析阶段就会生成。（动态引用，只是一个符号连接，所以对它进行重新复制会报错）
  3. CommonJS中this指向当前模块，但是ES6中this为undefined

参考

module

分享到：