export和import 暴露和引入，es模块代码引入的两种形式

前提（在script中做引入）

<script type='module'>
 </script>

类型是module

一、export暴露数据的语法

1.分别暴露

在暴露的数据的前面分别加一个export

2.统一暴露 ，声明一个export，用对象的简化形式暴露数据

3.默认暴露，用export default的形式后面加一个对象

调用的时候要注意

// 引入m3.js模块内容
        import * as m3 from './js/m3.js';
        console.log(m3);
        // 默认的前面要加一个default
        m3.default.address();

二、模块数据的引入

1.通用的导入方式

 import * as m1 from "./js/m1.js"

2.解构赋值的形式

// 解构赋值的形式
        import {school, has} from './js/m1.js';
        console.log(school);
        console.log(has);
        console.log('');

        // 重名不要紧，就用as别名
        import {school as zoom ,play} from './js/m2.js';
        console.log(zoom);
        console.log(play);
        console.log('');

        // 导入默认的
        import {default as a} from './js/m3.js';
        console.log(a);

3.简便形式的引入

// 简便形式只能针对默认暴露
        import b from './js/m3.js';
        console.log(b);

二、第二种方式

 <script src='./js/app.js' type="module">

    </script>

把模板放在一个总的入口文件中

// 入口文件
// 模块引入
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';
console.log(m1);
console.log(m2);
console.log(m3);

三、可选链操作符 ？.

针对于对象类型的参数，并且层级比较深，不好读取的

 function main(config){
            // const dbHost =config && config.db && config.db.host;
            const dbHost =config ?.  db?. host;
            console.log(dbHost);
        }
        main(
            {
            db:{
                host:'192.168.1.100',
                username:'root'
            },
            cache:{
                host:'191.168.1.200',
                username:'admin'
            }
        }
        )

四、es11里面引入了动态import

可以实现动态加载，也就是懒加载。（用的时候加载，不用不加载）
用import()方法

五、绝对全局对象globalThis