JS中模块化管理

从Javascript这个语言的命名就可以看出，最初他是脚本语言，脚本语言的特点肯定就是简单，像我们常用 Shell 脚本，主要就是实现一些简单的功能，不需要处理复杂的业务逻辑。所以Javascript 诞生之初就是网页的 Shell，据说 Javascript 是用了10天的时间开发出来的，作者肯定也没想到 Javascript 如今的发展规模，社区规模。在 Chrome 出来之前，Javascript 的性能还是比较弱，只是做一些 Dom 的操作。随着这个 Google v8 的推出，Javascript 性能有了飞速提升，NodeJS 诞生了，可以用 Javascript 写后台业务逻辑了，而且性能还不错。可以处理复杂业务，要处理复杂业务，那就一定要用到模块化，像Java、Python 语言一些样。JS 中主要的模块化有两种，CommonJS 和 ESModule，CommonJS 主要是 NodeJS 在用，浏览器中支持CommonJS需要试用 Webpack做处理。浏览器只要支持 ES6，都支持 ESModule，ES6中提出的模块化方案，我个人感觉 很像 CommonJS, 在 CommonJS 的基础上加了一些新的特性，例如异步加载，下面我们来看看这两种模块化是如何试用的：

CommonJS

首先，我们创建两个js 文件，一个主文件 main.js，一个模块文件，我们这里起名为 mod1.js。mod1.js 文件中有两个函数。main.js 依赖 mod1.js 中定义的这两个函数。首先在 mod1.js 中需要将定义的两个导出来，通过module.exports进行导出。

//mod1.js
const mod1Fun1 = () => console.log('fun1----')
const mod1Fun2 = () => console.log('fun2----')

module.exports = { mod1Fun1, mod1Fun2 }

导出之后，需要在 main.js 导入，通过 require 关键字进行导入。如果是多个函数需要JS的结构把对应的函数解析出来。

// main.js
({ mod1Fun1, mod1Fun2 } = require('./mod1.js'))

const testFunction = () => {
    console.log('Im the main function')
    mod1Fun1()
    mod1Fun2()
}

testFunction()

在命令行通过 node main.js 直接运行。

ESModule

需要对mod1.js 和 main.js 进行改造，require 关键字改为 import 关键字引入 mod1 中的方法，根据 mod1 中 export 的不同方式，import 的方式也有所不同。
1.直接export 方法变量，import 时候解构，也可以试用别名

// main.js
import {mod1Fun1 as a, mod1Fun2} from './mod1.js'


const testFunction = () => console.log('Im the main function')

document.getElementById('isAlive').addEventListener('click', () => a())
document.getElementById('isRolling').addEventListener('click', () => mod1Fun2())

testFunction()

//mod1.js
export const mod1Fun1 = () => console.log('fun1----')
export const mod1Fun2 = () => console.log('fun2----')

// export { mod1Fun1, mod1Fun2 } 直接 export 也可以

2.Export default, import 时可以随便起名字

// main.js
import f1 from './mod1.js'


const testFunction = () => console.log('Im the main function')

document.getElementById('isAlive').addEventListener('click', () => f1.mod1Fun1())
document.getElementById('isRolling').addEventListener('click', () => f1.mod1Fun2())

testFunction()

//mod1.js
 const mod1Fun1 = () => console.log('fun1----')
 const mod1Fun2 = () => console.log('fun2----')

export  default { mod1Fun1, mod1Fun2 }

ES6 的JS 模块化nodeJS 也是支持的，将 package.json 加上 “type”: “module”，这样 nodejs 中也可以试用 ESModule了，通过 import/export 导入导出。