This post have

# 模块化的必要性

  • 解决命名冲突,防止全局变量的污染,全局作用域更加干净,而不是到处都有命名冲突之类的问题
  • 我们希望一段代码拥有自己的作用域, 而且不要被其他代码所污染
  • 我们的程序更加井然有序,易于代码的扩展和维护
  • 管理文件依赖,避免引入时的层层依赖
  • 保护私有属性

# package.json 包管理

  • 利用 package.json 可以解决我们项目目录文件跨层级引用问题
  • 当我们需要从当前文件跨越两个目录层级引用另一个文件方法、变量时,我们的目录层级会很长(当目录层级跨越更多时,可能经常弄错,导致不必要的引用错误)
import { test2 } from '../../test-2/test-2-1/a'
export { test2 }
1
2
  • 当我们在导出方法、变量的模块内引入 package.json 之后,在 test-2-1 目录下 init package.json(在目录下 npm init 可生成 package.json)
  • 通过包导入的方式
//  test/test-2/test-2-1/package.json
{
  "name": "test2",//包名
  "version": "1.0.0",
  "description": "",
  "main": "index.js"//入口文件,一般都是index.js,包导出的东西为index.js导出
}

//  test/test-1/test-1-1/a.js
import { test2,test1 } from 'test2';
export { test2,test1 };
1
2
3
4
5
6
7
8
9
10
11

# 命名导出

  • es6 中 export 和 import 一般用法有两种:1.命名导出 2.默认导出
//导出变量
const str = '导出我'
const num = 2
//导出函数
function multiply(x) {
  return x * num
}
export { str, num, multiply }

//引入
import { str, num, multiply } from 'test2'
console.log(str) //'导出我'
console.log(num) //2
console.log(multiply(3)) //6
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 别名引入、空间命名引入

  • 现在我们有个问题,当我们引入两个文件中出现了相同命名的变量怎么办?
import { str } from 'test2'
import { str } from 'test1'
1
2
  • 这时我们可以通过重命名的方式解决
import { str as str1 } from 'test2'
import { str as str2 } from 'test1'
1
2
  • 空间命名引入:当从每个模块需要引入的方法很多的时候,别名引入的写法就显得十分的繁琐、冗长
//反例
import { str as str1, num as num1, fun as fun1 } from 'test2'
//正解
import * as test from 'test2'
test.str
test.num
test.fun()
1
2
3
4
5
6
7

# 默认导出

  • 默认导出每个文件只能有一个,引入时需要自命名(随便你命名什么,瞎几把命名会挨砍而已)
//导出
export default function(){ ... }
//引入
import fun from 'test'
fun()
1
2
3
4
5
  • 一个默认导出,可以导出多个方法
//导出
export default {
    fun1(){},
    fun2(){},
    fun3(){}
}
//引入
import fun from 'test'
fun.fun1()
...
1
2
3
4
5
6
7
8
9
10

# 实战

  • 导出 test 包
// test包index.js
const str = '导出我'
export { str }
export const num = 2
export function fun1(){
    return 'fun1'
}
export default fun2(){
    return 'fun2'
}
1
2
3
4
5
6
7
8
9
10
  • 导入
import * as variable from 'test'
import fun from 'test'
variable.str //'导出我'
variable.num //2
variable.fun1() //'fun1'
fun() //'fun2'
1
2
3
4
5
6
Last Updated: 7/15/2020, 2:33:30 PM