记录本身忽略的细节-ES6模块学习

#在浏览器的script中使用模块化html

在script标签中添加type = module属性，就能够经过import导入

<script type="module">
<!--import ModuleName form 'path'-->
</script>

##该标签的特性api

延迟解析 1.1 估计是由于模块之间的依赖，延迟解析是最佳选项

<script>
    console.log(document.getElementById('btn'));
</script>
<script type="module">
    console.log(document.getElementById('btn'));
</script>  
<body>
   <button id="btn">script声明在我以前也能够找到我，要是没有没有属性type = module 可找不到我喔</button>
</body>

默认严格模式

<script type="module">
    let name = 'Module'; // 把let去掉就会报错
    console.log(window.name);
</script>
<script >
    apple = 'apple';
    console.log(window.apple);
</script>

#模块中的做用域浏览器

模块中的变量，除非导出，不然没法访问
两个模块（B和C）中导入相同模块,B对A提供的API对A模块的某个变量进行修改，C模块2s后访问该变量，该变量是变化后的变量 A.js

let count = 0;
    function add() {
        count++;
    }
    function getCount() {
        return count;
    }
    export {add,getCount}

B.jsapp

import {add,getCount} from "./A.js";

console.log(getCount());

console.log('do add');

add();

console.log(getCount());

C.jsecmascript

import {getCount} from "./A.js";

setTimeout(()=>{
    console.log(getCount());
},2000);

B，C 因此共用一份模块A的数据模块化

<script type="module">
    import {} from './C.js';
    import {} from './B.js';
//结果c打印1，B最后打印1    
</script>

#模块的导入和导出函数

具名导出,导入 A.js

export let site = 'www.baidu.com';
export function show() {
  
}
let a = 'a';
let b = 'b';
export {a,b};

1.1 选择性导入code

import {site} from 'A';

1.2 批量导入orm

import * as total from 'A';
total.site

1.3 别名的使用htm

import {site as siteAliens} from 'A';
let site = 'www.goole.com';

默认导出 export default User.js

class User {
    static render(){
    
    }  
}
export default User;

2.1 咱们能够自定义变量名来接收

import CustomUser from 'User.js';

混合导入导出

export let site = 'www';
    export default function() {
      console.log('Default Export');
    }

let site = 'www';
    function defaultFn() {
      console.log('Default Export');
    }
export {defaultFn as default,site}

import * as api from './A.js'; //分组
    api.default.defaultFn();

#模块的合并导出

对子模块导入时进行分组
主模块导出组就行

#按需动态加载模块-使用import函数

function confirm() {
      //返回一个Promise对象
      import('your module').then(module=>{
        22      
    })  
}