ES6 模块（module）

ES6 模块（module）
1.html文件

<!-- html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块（module）</title>
</head>
<body>
    <!-- 使用的两种方法 -->
    <!-- 方法一： -->
    <!-- <script type="module" src="./b.js"></script> -->

    <!-- 方法二： -->
    <script type="module">
        import {num,str} from './a.js'
        console.log(num,str);
    </script>

    <script>
        console.log(num,str);
        /*
            按需引入
            ES6 => module语法
            可以通过指定的命令，导出或者导入所需数据，不要将整个Js文件全部引入，提高了代码的维护性和可读性
        */
        // a.js => b.js  a.js用b.js 的内容
    </script>
</body>
</html>

2.a.js文件

// a.js

// 使用export 关键词将数据导出

// 方法一：
export let num = 101;
export let str = "我是a文件的字符串";

// 方法二：
let str1 = "我是字符串";
export {str1};
// export str1 => 错误（这种导出方式是错误的）

// 方法三:
let str2 = "我是第二个字符串";
// 可以用 as 关键词  重新命名
export {str2 as a};


// 除过单个导出之外还可以导出列表
// 导出列表
let x = 10;
let y = 100;
let z = 1000;

// export{
//     x,
//     y,
//     z as bigNum
// }

// 导出函数
function getMin(j,q,k){
    return Math.min(j,q,k);
}

// 类
class Anmail{}

// 也可以一起导出
export{
    getMin,
    Animal,
    x,
    y,
    z as bigNum
}


// export default  默认输出
/*
  一个模块只能有一个默认输出;
  export default   一个
  export           多个

*/
let apple = 10000;
export default apple;


//非匿名函数
// 导出一个函数
// export default function getMax(){
//   return 10;
// }

// 匿名函数
// export default function(i,j){
//   return i+j;
// }

// 这两个函数在默认导出是，都等同于匿名函数

/*
  导出数据是，一般使用export导出，可以导出单个的数据，也可以导出列表。

  一个页面只可以存在一个export default（默认导出）。在默认导出的时候，匿名函数和非匿名函数导出效果相同。
*/

3.b.js文件

// b.js
// b.js用a.js的变量

// 使用 improt 关键词将数据引入
// 方法一：
// 一次性引入（很麻烦）
// import {
//         num,
//         str,
//         getMin,
//         Animal,
//         x,
//         y,
//         z as bigNum} from './a.js';


// 方法二：（list相当于对象）
import * as list from './a.js';

console.log(num,str); 
list.num;
list.str;
list.getMin(3,4,5);
list.x;


// 默认导入
import banana from "./a.js";
console.log(banana);  //10000


// 一般这么导入
import banana,{num,str,getMin} from './a.js';


// 不管匿名函数和非匿名函数，导入了都会被直接使用
// import 函数名(随便使用一个，同banana一样) form './a.js';

/*
   import 命令导入数据时，默认导入不需要加{}，因为默认导入是唯一的
*/

/*
  使用import导入数据，一般在文件开头会提前将所需数据进行导入。接收默认导入的数据时，不需要加大括号{}，并且变量名称也不需要和导出名称一致。接收普通到处（export）数据时，需要导出名称保持一致，并且加上大括号{}。
*/

ES6 模块（module）

悦读