ES6学习——用模块封装代码

    ES6第十三章 用模块封装代码

1.  引言

     这里封装的代码就是一个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"