为什么要使用模块化?有哪几种方式可以实现模块化,各有什么特点?
为什么要使用模块化?
好处
- 解决命名冲突
- 提高代码复用性
- 提高项目的可维护性
有哪几种方式可以实现模块化,各有什么特点
- IIFE(立即执行函数)
- AMDjs
define(['./a', './b'], function(a, b) { // 加载模块完毕可以使用 a.do() b.do() })
- CMDjs
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() {}