[JavaScript知识库]【Vue学习笔记_12】模块化开发

配套可执行代码示例 => GitHub

为什么要有模块化？

多人开发，维护多个js文件，一方面会产生全局变量命名冲突等问题，另一方面这种代码编写方式对js文件的依赖顺序几乎是强制性的。

将整个js文件作为匿名函数闭包可以解决变量命名冲突的问题，但是会导致两个js文件之间的东西无法相互使用，代码复用性降低。

解决方法：将需要暴露给外面的变量和方法，封装成一个模块作为出口。

常用的模块化规范：CommonJS、AMD、CMD、ES6的Modules

模块化的两个核心：导出、导入

CommonJS

导出：exports

module.exports = {
  flag: true,
  sum(a,b) {
    return a+b
  }
}

导入：require

let {flag, sum} = require('./export.js')

ES6的模块化

给<script>标签添加type="module"属性，可以让每个js文件成为独立的模块。

<script src="export.js" type="module"></script>
<script src="import.js" type="module"></script>

导出：export

可以导出变量、函数、类等

//第一种方式：先声明后导出
var flag = true
function sum(a,b) {
  return a+b
}
export {flag, sum}

//第二种方式：直接在声明时导出
export var flag = true;
export function sum(a,b) {
  return a+b
}

导入：import

//第一种方式：导入指定的变量
import {flag, sum} from './export.js'
console.log(sum(20, 30));

//第二种方式：导入整个模块
import * as ex_module from './export.js'
console.log(ex_module.flag)

default

某些情况下，一个模块包含某个功能，但并不希望给这个功能命名，而是让导入者可以自己命名，这个时候就可以使用export default。注：

• 在同一个模块中，不允许存在多个export default
• export default导出的内容import时不需要加{}

//export default 变量
const address = '南京'
export default address
import addr from './export.js'

//export default 函数
export default function (args) {
  console.log(args)
}
import print_func from './export.js'
print_func('Hello')