ES6第十三章 用模块封装代码
- 引言
这里封装的代码就是一个js文件,比如我有一些方法需要很多页面都需要用,只想定义一次,那我就把这些方法集中在一个页面里面定义,且在别的js文件里面引入使用,所以就开始有了模块封装
2. 被定义为全局使用的js文件如何定义导出
//example1 导出数据
export var color = "red"
//example2 导出函数
export function sum(num1, num2) {
return num1 + num2
}
//example3 导出类
export class person {
constructor(name, sex) {
this.name = name
this.sex = sex
}
}
//example4 导出的第二种方式
function multiply(num1, num2) {
return num1 * num2
}
export { multiply }
3. 导入已封装的模块
//example1 导入模块中定义的 f1,f2
import { f1, f2 } from "./example.js"
//一次性全部导入
import * as example from "./example.js"
//如果被封装的js中定义了f1方法,这样使用
example.f1()
//
4. js模块引入的说明 "./example.js" "../example.js" "/example"
- "/example" : 表示从根目录引入(表示localhost/example.js)
这表示parent和d.js处于同一级目录 child.js的父级目录和d.js是同一级目录
d.js中引入diff.js的方式是 import XXX from "./diff" child.js引入d.js的方式是 import XXX from "../d"
- "./example.js" : 表示从当前目录引入
- "../example.js" :表示从父级目录引入
5. 神器的导入导出
//同一文件下变量的拷贝
let a = 1
let b = a
console.log(a) // 1
console.log(b) // 1
a = 2
console.log(a) //2
console.log(b) //1
//导入导出的变量拷贝
//a.js
export let name = "m"
exprt function setName(NewName){
name = NewName
}
//b.js
import { name, setName } from "./a.js"
console.log(name) // "m"
setName("q")
console.log(name) // "q"
5 .导入导出的重命名
//导出的时候重命名
function sum(a, b) {
return a + b
}
export { sum as add }
//导入的时候重命名
import { add as sum } from "./b.js"