ES6-moudle

一。基础认知

结合案例体验module；

前面模拟模块是用立即执行的匿名函数，需要把某些通过window暴露出去，所以还是不能消除全局变量

module模块系统需要服务器环境才能正常执行，在html文件中使用模块化方式引入js，然后open with live sever，模块系统才生效；

 

这样打开文件就可以在服务器环境打开，这里搭建的是本地服务器

想让外界访问到什么（变量 常量），就把他导出，哪个js文件要用就import导入（导出一次，不同文件都可以来导入）

比如a文件中导出a变量，b文件导入a变量，b文件也可以导出a变量，因为a变量也相当于在本次执行的b模块中存在；

控制台打印结果：程序只要读到import，不论有没有特定导出，都会把import后面的js文件执行，所以打印顺序abc

执行顺序：执行c.js中import（c里面其他代码暂时不执行）--->从b.js中导入b----执行b.js----执行b.js中import（b里面其他代码暂时不执行）------>从a.js中导入a-----执行a.js

大概是：c.js需要b，b来自b.js，所以b.js执行完才能确定b（程序规定），b.js里面又需要来自a.js中的a，所以a.js执行完才能确定a（程序规定），然后执行完b确定b，然后执行c

 

课程中不加type的话，会报错，因为引入index.js然后会执行里面的代码，里面有import所以会报错（看控制台打印的原因：import语句不能在module外使用，不是module不能用）

使用import加载js文件（不论有没有特定导出）会把这个文件认定为模块，且会执行这个文件；

也就是说import 'slider.js'或者import slider from 'slider.js'，都会把slider.js认定为模块，且会执行slider.js这个文件；

下图可以体现出module系统管理了加载顺序，且只需要引入一个index.js即可，其他js会在import语句中被控制按照顺序（base-slider-index）执行；

 

 

查看代码

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

    <script>
      // 1.使用 Module 模块化之前的例子

      // 2.使用 script 标签加载模块
      // console.log(Slider);

      // 一个文件就是一个模块

      // 只要用到 import 或 export，在使用 script 标签加载的时候，就要加上 type="module"

      // 3.分析 Module 解决的问题
      // ① 模块化的问题
      // ② 消除全局变量
      // ③ 管理加载顺序
    </script>

import引入(不论有没有特定导出类似import 'slider.js'这种没有特定导出)或者使用script标签src加载模块时，路径即使是同级也要./

 

注意这种写法：也就是说，不管是标签（标签对也相当于是一个js文件）还是js文件，当里面执行了import 或 export时，必须保证标签加了type='module'或者这个js文件执行时被视为是模块了才不会报错；

这个标签对也可以理解为一个独立的模块（js文件）

二。导入导出

1.export default 和 import

使用export default只能导出一个值，可以直接写值或者写个变量名，常量名；

一个模块只能有一个export default

查看代码

     <script type="module">
      // 1.认识导出和导入
      // 导出的东西可以被导入（import），并访问到

      // 一个模块没有导出，也可以将其导入
      // 被导入的代码都会执行一遍，也仅会执行一遍
      // import './module.js';
      // import './module.js';
      // import './module.js';

      // 2.基本用法
      // 可以随便起名
      import age from './module.js';
      console.log(age);

      // 一个模块只能有一个 export default
    </script>

module.js文件

 //module.js文件
const age = 18;
// const sex = 'male';
// console.log(age);

// export default age;
// export default 20;
// export default {};

// const fn = () => {};
// export default fn;
// export default function () {}

export default class {}

// 一个模块只能有一个 export default
// export default sex;

2.export和 import

也可以通过这种方式导出；

注意：

export function fn() {} 和export const age = 18 ，这种写法的意思就是声明了fn，age，并将他们导出，如果再在该模块中写function fn() {}会报错，因为已经声明了fn，export function fn() {}这句代码是将声明和导出写在一起；

统一导出：

export{}里面必须是变量或者常量名，不能是直接写值，因为import{}括号里面的名字得对上

import有特定值导入时都必须起名字，不起名字导进来怎么用？对不对？

注意：html中添加script标签对，里面直接写代码这种，和<script src="./module.js"></script>，里面的js代码都是在全局作用域中

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

    <script type="module">

        import  './module.js '

    </script>

的区别：前者是把module.js当作模块，然后引入，执行这个js文件里面的代码, 后者script标签对就相当于一个js文件模块，也相当于src方式引入，执行标签对中的代码import ./module.js ，执行module.js模块里面的代码，注意不是把module.js里面的代码放到script标签对中执行，而是在module.js模块中执行；

 

导出导入起别名：

整体导入：既有export也有export default

*的意思是把所有的导出全部选中

export和export default可以一起用

同时导入：既有export也有export default

注意：在一个模块中export default只能使用一次，export可以使用多次;export default导出时，可以使用任意变量名接收，但是，导入时不可以添加{}

源码;

      // 1.基本用法
      // export 声明或语句
      // export const age = 18;

      // const age = 18;
      // export { age };

      // 不能随意命名
      // import { age } from './module.js';
      // console.log(age);

      // import aaa from './module.js'; // 对应 export default

      // 2.多个导出
      // import { fn } from './module.js';
      // console.log(fn);
      // import { className } from './module.js';
      // console.log(className);

      // import { fn, age, className } from './module.js';
      // console.log(fn, age, className);

      // 3.导出导入时起别名
      // export { fn as func, className, age };
      // import { func, age, className as Person } from './module.js';
      // console.log(Person);

      // 4.整体导入
      // 会导入所有输出，包括通过 export default 导出的
      // import { func, age, className } from './module.js';
      // console.log(func, age, className);

      // import obj from './module.js';
      // import * as obj from './module.js';
      // console.log(obj);

      // 5.同时导入
      // import { func, age, className } from './module.js';
      // import age2 from './module.js';

      // 一定是 export default 的在前
      // import age2, { func, age, className } from './module.js';
      // import { func, age, className },age2 from './module.js'; ×
      console.log(age2);
    

module.js

 // const age = 18;

// export default age;
// export age;
// export 18;

// export 声明或语句
// export const age = 18;

// const age = 18;
// // export age; ×
// export { age }; // √

function fn() {}
// export fn; // ×

// export function fn() {}

// export function () {} // 匿名不行

class className {}
// export className;

// export class className {}

// export class  {} // 匿名不行

const age = 18;

// export const age = 18;

export { fn as func, className, age };

export default 18;

三。注意事项

模块顶层的意思是在在外层的作用域中

利用this指向undefined侦察是否以模块方式加载；

补充一下，是该模块所有代码执行之前

import函数就不像import命令和export命令，可以在代码块中执行

虽然等价于但是有区别，导入导出的复合写法，在导入的同时将其导出出去，在当前模块是无法访问导入的变量。

源码：

  </head>
  <body>
    <!-- <script src="./module.js"></script> -->
    <!-- <script src="./module.js" type="module"></script> -->

    <script type="module">
      // 1.模块顶层的 this 指向
      // 模块中，顶层的 this 指向 undefined
      // import './module.js';

      // 2.import 和 import()
      // import 命令具有提升效果，会提升到整个模块的头部，率先执行
      // console.log('沙发');
      // console.log('第二');
      // import './module.js';

      // import 执行的时候，代码还没执行
      // import 和 export 命令只能在模块的顶层，不能在代码块中执行
      // if (PC) {
      //   import 'pc.js';
      // } else if (Mobile) {
      //   import 'mobile.js';
      // }

      // import() 可以按条件导入
      // if (PC) {
      //   import('pc.js').then().catch();
      // } else if (Mobile) {
      //   import('mobile.js').then().catch();
      // }

      // 3.导入导出的复合写法
      // 复合写法导出的，无法在当前模块中使用
      export { age } from './module.js';
      // console.log(age);

      // 等价于
      // import { age } from './module.js';
      // export { age } from './module.js';
      // console.log(age);
    </script>
  </body>

module.js:

// console.log(this);

// if (typeof this !== 'undefined') {
//   throw new Error('请使用模块的方式加载');
// }

export const age = 18;

四。应用

默认值模块也单独一个模块；

常量可以单独放在常量模块；

事件控制模块也单独写，不和子类绑定在一起，更加灵活；

箭头函数在模块中的this指向，也是根据作用域链查找，终点是顶层，也就是指向undefined，注意，这里和严格模式没关系，都是默认非严格模式的

键盘控制里面的数字用常量表示，丢到常量模块