es6 Module语法

Module语法

1.异步加载
2.私密不漏
3.重名不怕
4.依赖不乱
5.两种写法
一、异步加载
我们先生成三个JS文件方便演示，在第一个JS文件中，我们写入了一个需要访问dom节点的变量。
如果在文件头引入JS文件，此时dom还没有加载，直接报错，在Module语法出现之前有三个解决办法


module写法

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

在引入加上**type=“module”**直接变成模块化加载，类似于defer的异步加载形式，在dom加载完成后才会执行js

二、私密不漏

function A1(){
    console.log("A1")
}
function a1(){
    console.log("a1")
}

在01.js中定义两个函数，假如A1是我们希望公开的函数，而a1则是我们只想在01.js内部使用的函数。如果不加type=“module”。在html文件中，两个函数都可访问得到，这样我们的私密函数a1也就泄露出去了。

而使用module模块化引入，也就是加上type=“module”，则两个函数都访问不到，

所以正确的module写法是导入和导出，在需要使用的文件中导入，在需要到处的内容进行导出
在01.js中

function A1(){
    console.log("A1")
}
function a1(){
    console.log("a1")
}
// 导出方法
export default A1

在html中

    <script type="module">
    	// 导入方法
        import A1 from "./01.js"
        A1() // A1
        a1() // 报错
    </script>

这样就实现私密不漏，导出多个方法

function A1(){
    console.log("A1")
}
function a1(){
    console.log("a1")
}
// 导出方法
export default {
    A1,
    a1
}

    <script type="module">
        import obj from "./01.js"
        obj.A1() // A1
        obj.a1() // a1
    </script>

三、重名不怕
在传统的写法中，引入两个js文件，但是这个文件中存在重名的方法，那么一定会有一个方法被覆盖掉，但是使用module则不要担心。
01.js

function A1(){
    console.log("A1")
}
function a1(){
    console.log("a1")
}

function text(){
    console.log("01.js---text")
}

// 导出方法
export default {
    A1,
    a1,
    text
}

02.js

function text(){
    console.log("02.js---text")
}
function B1(){
    console.log("B1")
}
export default {
    text,
    B1
}

html

 <script type="module">
        import obj1 from "./01.js"
        import obj2 from "./02.js"

        obj1.A1() // A1
        obj1.a1() // a1
        obj1.text() // 01.js---text
        obj2.text() // 02.js---text
        obj2.B1() // B1
    </script>

如此就实现了重名不怕

四、依赖不乱
我们在03.js中写入一下内容

A1()
B1()
export default {}

然后在html中一起导入

  		import obj1 from "./01.js"
        import obj2 from "./02.js"
        import obj3 from "./03.js"

你觉得03.js中的内容会成功执行吗，答案是一定的，在03.js中A1和B1是未定义的，所以会报错。
我们在03.js之中导入

import obj1 from "./01.js"
import obj2 from "./02.js"
obj1.A1()
obj2.B1()
export default {}

最后的执行结果是

这里可以看出，传统的引入相当于把几个文件合并成一个文件，而module模块化的写法，任然是把文件之间隔离开的，你要用就必须先导入，而且导入的东西还必须是目标文件导出的内容。如此逻辑清晰，依赖不乱。

五、两种写法
刚刚所演示的导出导入，在导出端，要么只导出一个方法，要么就是导出多个方法的对象，而导入端对于多个方法只能全盘接收，通过对象的方式点点调用。所以es6提供了第二种导入方法，可以实现按需导入。

function A1(){
    console.log("A1")
}
function a1(){
    console.log("a1")
}

function text(){
    console.log("01.js---text")
}

// 导出方法
export  {
    A1,
    text
}

去掉default直接大括号导出

        import {text} from "./01.js"
        text() // 01.js---text

使用大括号导入，需要什么用什么，但是要注意方法名字必须相同。
你肯定想问，这样重名怎么解决，es6 提供了一个 as 写法，即取别名。

        import {text as text1,A1} from "./01.js"
        import {text as text2,B1} from "./02.js"
        // import obj3 from "./03.js"
        text1() // 01.js---text
        A1() // A1
        text2() // 02.js---text
        B1() // B1

扩展一下as，可以使用*号来代替所以导出的方法，在用as取别名，这样就实现了用第二种写法达到第一种的感觉。

        import * as obj from "./01.js"
        import {text as text2,B1} from "./02.js"
        // import obj3 from "./03.js"
        obj.text() // 01.js---text
        obj.A1() // A1
        text2() // 02.js---text
        B1() // B1

第二种写法导出时还等同于直接在方法前面加export

function text(){
    console.log("02.js---text")
}
export function B1(){
    console.log("B1")
}
export  {
    text,
}