ES6的模块化

 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,console,log,模块化,暴露,js,export,m1
来源： https://www.cnblogs.com/zhh-blogs/p/15567338.html