js不支持模塊化

注意： 需要放到服務器環境

1、如何定義模塊？

export? 東西

例：1.js文件中

console.log('1模塊加載了');//顯示是否加載了
export const a =12;
export const b = 5;
export let c = 101;

const a=12;
const b=5;
const c=101;export {//可以起別名 as *** 也可以去掉a as aaa,b as banana,c as cup
}

 <script type="module">import {a, b, c} from './modules/1.js';console.log(a,b,c);</script>

起別名版import ：

<script type="module">import {aaa, banana, cup} from './modules/2.js';console.log(aaa, banana, cup);</script>

補充?export?default **? 作用：引用時候可以不用加{ }

2、如何使用？
?在html文件里<script type="module"></script>

引入模塊

import './modules/1.js';

【新增】*表示引用全部

 <script type="module">import * as modTwo from './modules/2.js';console.log(modTwo.aaa);</script>

 <script type="module">import mod,{show, sum, a, b} from './modules/4.js';
// show sum 是函數 let p1 = new mod.Person('老肖');console.log(p1.showName());show();sum();console.log(a,b);</script>

js文件可以引用另一個js文件里的東西 ：格式同理

import:? 特點
?? ??? ?a). import 可以是相對路徑，也可以是絕對路徑
?? ??? ??? ?import 'https://code.jquery.com/jquery-3.3.1.js';
?? ??? ?b). import模塊只會導入一次，無論你引入多少次
?? ??? ?c). import './modules/1.js';? 如果這么用，相當于引入文件
?? ??? ?d). 有提升效果，import會自動提升到頂部，首先執行

? ? ? ? ? ? ?也就是說：不管放前面放后面都最先引入
?? ??? ?e). 導出去模塊內容，如果里面有定時器更改，外面也會改動

? import() ?類似node里面require， 可以動態引入, 默認import語法不能寫到if、for之類里面

錯誤例：

 if(a==12){import {a} from './modules/1.js';}else{import {b} from './modules/2.js';}

正確例：
?? ??? ?返回值是個promise對象?

<script type="module">import('./modules/1.js').then(res=>{console.log(res.a+res.b);});</script>

?路徑也可以動態

 <script type="module">let sign=1;function config(){switch(sign){case 1:return './modules/1.js';break;case 2:return './modules/2.js';break;}}import(config(1)).then(res=>{$(function(){$('body').css({background:'gray'})})});</script>

與promise結合版：

<script type="module">Promise.all([import('./modules/1.js'),import('./modules/2.js')]).then(([mod1,mod2])=>{console.log(mod1);console.log(mod2);})</script>

【ES2017】async ?await