模块化

使用导出全局变量模块解决全局变量同名问题

aaa.js

//模块对象
var moduleA = (function (param) {
  //导出对象
  var obj = {}
  var name = '小明'
  var age = 22

  function sum(num1, num2) {
    return num1 + num2
  }
  var flag = true
  if (flag) {
    console.log(sum(10, 20))
  }
  obj.flag = false
  return obj
})()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

mmm.js

//小明
//使用全局变量moduleA
if (moduleA.flag) {
  console.log('flag是true')
}

1
2
3
4
5

这样直接使用 aaa.js 导出的 moduleA 变量获取小明自己定义的flag。

CommonJS 的模块化实现

CommonJS 需要 nodeJS 的依支持。

aaa.js

var name = '小明'var age = 22function sum(num1, num2) {  return num1 + num2}var flag = trueif (flag) {  console.log(sum(10, 20))}// module.exports = {//   flag : flag,//   sum : sum// }//导出对象module.exports = {  flag,  sum}

使用module.exports = {}导出需要的对象。

mmm.js

//导入对象,nodejs语法,需要node支持,从aaa.js取出对象var {flag,sum} = require("./aaa")console.log(sum(10,20));if(flag){  console.log("flag is true");}

使用 var {flag,sum} = require("./aaa")获取已经导出的对象中自己所需要的对象。

ES6 的模块化实现

如何实现模块化，在 html 中需要使用type='module'属性。

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

1
2
3

此时表示 aaa.js 是一个单独的模块，此模块是有作用域的。如果要使用 aaa.js 内的变量，需要在 aaa.js 中先导出变量，再在需要使用的地方导出变量。

直接导出

export let name = '小明'

使用

import { name } from './aaa.js'
console.log(name)

1
2

./aaa.js表示 aaa.js 和 mmm.js 在同级目录。

如图打印结果。

统一导出

var age = 22
function sum(num1, num2) {
  return num1 + num2
}
var flag = true
if (flag) {
  console.log(sum(10, 20))
}
//2.最后统一导出
export { flag, sum, age }

1
2
3
4
5
6
7
8
9
10

使用 import {name,flag,sum} from './aaa.js'导入多个变量

import { name, flag, sum } from './aaa.js'

console.log(name)

if (flag) {
  console.log('小明是天才')
}

console.log(sum(20, 30))

1
2
3
4
5
6
7
8
9

使用{}将需要的变量放置进去

导出函数/类

在 aaa.js 中添加

//3.导出函数/类
export function say(value) {
  console.log(value)
}
export class Person {
  run() {
    console.log('奔跑')
  }
}

1
2
3
4
5
6
7
8
9

在 mmm.js 中添加

import { name, flag, sum, say, Person } from './aaa.js'

console.log(name)

if (flag) {
  console.log('小明是天才')
}

console.log(sum(20, 30))

say('hello')
const p = new Person()
p.run()

1
2
3
4
5
6
7
8
9
10
11
12
13

如图

默认导入 export default

导出

export default { flag, sum, age }

导入

//4.默认导入 export default
import aaa from './aaa.js'
console.log(aaa.sum(10, 110))

1
2
3

统一全部导入

使用 import * as aaa from './aaa.js'统一全部导入

// 5.统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag)
console.log(aaa.name)

1
2
3
4

#Vue

上次更新: 2025/02/26, 08:57:57

← 组件化 webpack→