html里面

1. <script src="./index.js" type="module"></script>

2.<script  type="module">
2.1  import { obj, sayHi, arr } from './b.js'


2.2 import {a,fn} from "./js/b.js";
    使用as 别名重新给这个常量赋值新的别名
    import {a as a1,fn} from "./js/b.js"; al就是变量a的新名字
    当导入的内容仅有一个时，不需要写{} 直接命名
    import fn1 from "./js/c.js"

2.3 被导入进来的变量不能同名定义覆盖,相当于一个常量
    var a=10;会出错
    a=10;会出错
  </script>

js里面

导出语法1

// 像后端发送了一个请求, 得到了一个用户的详细信息
    const info = {
        id: 'QF001',
        name: '张三',
        username: 'qwe123',
        password: '123456'
    }

function fn() {
    console.log('我是书写在 a.js 中的一个函数')
}



// export default '要导出的数据, 这是默认导出, 一个页面只能有一个'

                export default {
                    userInfo: info,
                    callback: fn
                }

导入语法1 ： import '变量' from '导入的文件地址'

 // 此时的导入方式中必须添加文件后缀
import obj from './a.js'
console.log(obj)
obj.callback()

导出语法2

export 就是导出内容，每个export表示导出一个内容，多个export表示导出多个内容
export const obj = {
    name: '我是书写在 b.js 中的一个对象',
    age: 18,
    qwe: 'QF001'
}

export function sayHi () {
    console.log('早上好')
}

export const arr = [1, 2, 3, 4, 5]

导入语法2 import { 导出的时候的变量名 } from '导入的文件地址'

    import { obj, sayHi, arr } from './b.js'
    console.log(obj)
    console.log(arr)

    sayHi()

混合

导出
export default function abc(){
    console.log("abc");
}

export var arr=[1,2,3,4];
export var obj={a:1,b:2};
// 混合式导出，既导出默认的又导出多个的

导入
 默认导出的写在前面，导出多个写在后面
    import abc,{arr,obj} from "./js/d.js"
    console.log(arr,obj)
    abc();

    import "./js/index.js";