記錄本身忽略的細節-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      
    })  
}