ES6-第九讲

模块化

模块化概念：将若干份小的js文件合并在一起

小的js文件需要暴露内容

总js文件需要引入模块

表现形式：js中引入其他的js文件

作用：简化html结构，增加代码的独立性和复用性

第一种暴露方式：

export let ok = 1;
export let add = function(a,b){
    return a+b;
}

引入模块：

<script type = "module"> 
import * as m1 from './js/module1.js'
console.log(m1.add(1,2));
</script>

结果：

第二种暴露方式：集中式暴露

let yes = 2;
let getName = function(){
    return 'cege';
}
export{yes,getName};

引入模块： 

1. 

<script type = "module"> 
import * as m2 from './js/module2.js'
console.log(m2);
</script>

结果：

2.

<script type="module">
import {getName} from './js/module2.js'
console.log(getName());
</script>

 

 第三种暴露方式：默认暴露

let add1 = function(){
    return a+b;
}
class Ball{
    constructor(){}
}
export default{
    add1,Ball
}

引入模块： 

1. 

<script type="module">
import * as m3 from './js/module3.js'
console.log(m3.default);
</script>

2.

<script type="module">
import {default as ok} from './js/module3.js'
console.log(ok);
</script>

 3.简洁表示（只适用于默认暴露，其他方式则会报错）

<script type="module">
import m from './js/module3.js'
console.log(m);
</script>

结果：

 如果同时要用三个模块，上述方法太麻烦，所以最好只引入一个模块，使用外部样式

引入：

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

外部样式：

import * as m1 from './module1.js'
import {getName} from './module2.js'
import m3 from './module3.js'
console.log(m1,getName(),m3);

输出结果：