Javascript模块导入导出详解

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site)	//输出： www.helloworld.net

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"
 
 //将上面的变量导出
 export { siteUrl ,siteName }  
 
 
 
 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl)	//输出： www.helloworld.net
 console.log(siteName)	//输出： helloworld开发者社区

//a.js 中定义并导出一个函数
function sum(a, b) {
    return a + b
}
//将函数sum导出
export { sum } 


//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
    siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

//a.js 中定义对象，并在最后导出
var obj = {
   	siteUrl:'www.helloworld.net',
    siteName:'helloworld开发者社区'
}

export default obj	//导出对象obj


//b.js 中导入并使用
import obj from './a.js'   	//路径根据你的实际情况填写
console.log(obj.siteUrl)	//输出：www.helloworld.net
console.log(obj.siteName)	//输出：helloworld开发者社区

//a.js 中定义一个类并直接导出
export default class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}


//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net

//a.js 中定义一个类，最后导出
class Person {
    //类的属性
    site = "www.helloworld.net"

    //类的方法
    show(){
        console.log(this.site)
    }
}

//导出这个类
export default Person 



//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show()  	//输出：www.helloworld.net