ES6模塊化之import的使用方式

　　1.引入外部文件：

<script src='文件路徑' type='module'><!--PS：這個type="module" 必須要寫，否則瀏覽器會報錯-->

　　2.標簽內嵌式：

<script type='module'><!--PS：這個type="module" 必須要寫，否則瀏覽器會報錯-->
</script>

 

　　上述兩種任意一種都可，

　　然后在外部文件或script標簽之間寫入代碼

關於引入的方式：

//模塊引入

//1.通用的導入方式
//引入index1.js
import * as index1 from './index1.js';
console.log(index1);
index1.print('通用方式導入-分別暴露',index1.name);

//引入index2.js
import * as index2 from './index2.js';
console.log(index2);
index2.print('通用方式導入-統一暴露',index2.name);

//引入index3.js
import * as index3 from './index3.js';
console.log(index3);
index3.default.print('通用方式導入-默認暴露',index3.default.name);

//2.解構賦值形式
import {name, print} from './index1.js';
print('解構賦值形式導入-分別暴露',name);

//重復的名字可以用別名
import {name as retrace, print as println} from './index2.js';
println('解構賦值形式導入-統一暴露',retrace);

import {default as index} from './index3.js';
index.print('解構賦值形式-默認暴露',index.name);

//3.簡便形式   針對默認暴露
import m3 from './index3.js';
m3.print('簡便形式-針對默認暴露',m3.name);

 

　　其中index1.js 

//分別暴露
//要暴露的屬性
export let name = 'retrace';
//要暴露的方法
export function print(method,msg){
    console.log(method,'index1.js','打印數據：',msg);
}

　　index2.js

//統一暴露

let name = 'retrace';

function print(method,msg){
    console.log(method,'index2.js','打印數據：',msg);
}

export {
    name,
    print
}

　　index3.js

//默認暴露
export default {
    name:'retrace',
    print:function (method,msg){
        console.log(method,'index3.js','打印數據：',msg)
    }
}