为什么需要模块化()

1. 为什么需要模块化

  • 如果多人同时开发一个项目的时候,每个人都会创建很多的 .js 文件,可能就会存在命名冲突的问题。
  • 为了解决这个问题我们可以使用立即调用函数。但是立即执行函数会导致一个新的问题,就是我们不能再之后创建的 .js 文件中,再次去使用之前文件的变量或者函数。
  • 因此,我们提出了模块化开发的概念,在 ES6 中,其实就是创建一个 obj 对象,将你想要导出去的对象添加到这个 obj 对象中,然后 return 这个对象,最后,为立即执行函数整体创建一个 const 类型的名字来接收 obj 对象。这样就可以在其他文件中使用 script 引入之后,利用这个名字调用这个 .js 文件了。
// 导出
const moduleA = (function() {
  var obj = {};
  var flag = true;
  obj.flag = flag;
  return obj;
})()
// 导入
<script src='./aaa.js'></script>
console.log('moduleA.flag');

2. 常见的模块化规范

  • CommonJS(Node.js 使用的就是这种模块化方式,webpack 基于 Node 环境)
// 导出
module.exports = {
  flag,
  max
}
// 导入
let {flag, max} = require('./aaa.js'); // 对象解构
// 等价于
const aaa = require('./aaa.js');
let flag = aaa.flag;
let max = aaa.max;
  • AMD
  • CMD
  • ES6 的 Modules
————————

1. 为什么需要模块化

  • 如果多人同时开发一个项目的时候,每个人都会创建很多的 .js 文件,可能就会存在命名冲突的问题。
  • 为了解决这个问题我们可以使用立即调用函数。但是立即执行函数会导致一个新的问题,就是我们不能再之后创建的 .js 文件中,再次去使用之前文件的变量或者函数。
  • 因此,我们提出了模块化开发的概念,在 ES6 中,其实就是创建一个 obj 对象,将你想要导出去的对象添加到这个 obj 对象中,然后 return 这个对象,最后,为立即执行函数整体创建一个 const 类型的名字来接收 obj 对象。这样就可以在其他文件中使用 script 引入之后,利用这个名字调用这个 .js 文件了。
// 导出
const moduleA = (function() {
  var obj = {};
  var flag = true;
  obj.flag = flag;
  return obj;
})()
// 导入
<script src='./aaa.js'></script>
console.log('moduleA.flag');

2. 常见的模块化规范

  • CommonJS(Node.js 使用的就是这种模块化方式,webpack 基于 Node 环境)
// 导出
module.exports = {
  flag,
  max
}
// 导入
let {flag, max} = require('./aaa.js'); // 对象解构
// 等价于
const aaa = require('./aaa.js');
let flag = aaa.flag;
let max = aaa.max;
  • AMD
  • CMD
  • ES6 的 Modules