ES6的模块化（export导出）

ES6 Module把一个文件当作一个模块，每个模块有自己的独立作用域，那如何把每个模块联系起来呢？核心点就是模块的导入（import）与导出（export）。

模块化的好处：

防止命名冲突
代码复用
高维护性

暴露也就是导出（export）有三种方式：1.分别暴露 2.统一暴露 3.默认暴露

分别暴露：在需要暴露的变量或者方法前面加上export关键字，我们新建一个m1.js文件写上如下代码

 1 //分别暴露

 2 export let team='RNG'

 3

 4 export function play(){

 5     console.log('this is a team of LPL')

 6 }

 7

 8 function own(){

 9     console.log('不想被暴露');

10 }

这个时候再在页面上对这个文件进行引入，同样新建一个页面 main.html，通过import关键字进行引入

1     <script type="module">

2         // 引入模块化js

3         import * as m1 from './modulesJs/m1.js'

4         // 调用暴露的方法

5         m1.play(); // thi is a team of LPL

6         // m1.own() // 由于未暴露own方法这个地方就会报错 m1.own is not a function

7         console.log(m1)

8     </script>

同理书写统一暴露m2.js代码如下：

 1 // 统一暴露

 2 let name = 'IG'

 3 function discription() {

 4     console.log('we are the champion');

 5 }

 6

 7 //以对象的形式进行暴露

 8 export {

 9     name,

10     // 并且可以通过as取一个别名

11     discription as dis

12 }

引入m2.js的方法不变

1     <script type='module'>

2         import * as m2 from './modulesJs/m2.js'

3         m2.dis() // we are the champion

4         console.log(m2.name) // IG

5     </script>

最后默认暴露（暴露一个default对象）

1 // 默认暴露

2 export default {

3     name: 'EDG',

4     say() {

5         console.log('it is a good team');

6     }

7 }

1     <script type='module'>

2         import * as m3 from './modulesJs/m3.js'

3         // 默认暴露的模块JS在调用的时候多了一个default节点

4         m3.default.say() // it is a good team

5         console.log(m3.default.name) // EDG

6     </script>

巴特西

ES6的模块化（export导出）

最新文章

热门文章