ES6 —— 模块化

1）引入

        js代码有3种方式把js脚本写在页面上：

        1.行内式 : js引擎要去执行的标签的某些属性(事件)中

<button onclick="javascript:var a=20;alert(a)">按钮</button>

        2.嵌入式 ：

<a href="javascript:void(0)">链接</a>

         3.导入式: src的地址时一个js的路径  会加载js编码(jsonp)

<script src="./test.js"></script>

2）概述

• ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

• ES6 的模块化分为导出（export） 与导入（import）两个模块。

3）特点

• ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

• 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

• 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

• 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

4）export导出

• 与default关联使用，并且一个js模块中只能有一个export default语句，单独写在一个js文件中

var obj = {name:"xiaozhang"}

export var num = 100
export function tool() {return obj}

// 单独导出的 必须用导出的表示符来按需导入，可以有多个单独导出
// 默认导出  在这个文件中只能有一个或者0个

var a = 20
var arr = [1,2,3,4]
var fm = () => {}
export default {a,arr,fm}

5）import导入

• 与from关联使用，此时script标签的type必须设置为module

• 单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import

<!-- type="module"  因为js读取外部文件然后编码进来  需要babel软件来解码 -->
    <script type="module">
        import x,{num,tool} from "./src/test.js"
        console.log(num);
        console.log(tool);

        console.log(x);
        console.log(x.arr);

    </script>