一。基础认知

结合案例体验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，注意，这里和严格模式没关系，都是默认非严格模式的

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

最新文章

  1. 【Python】引用计数
  2. 持续集成（CI）相关的一些工具，后续补充。。。。
  3. centos+nginx从零开始配置负载均衡
  4. touch穿透
  5. How to Write and Publish a Scientific Paper: 7th Edition（科技论文写作与发表教程）（11.04更新）
  6. LVS的DR模式配置
  7. 在Windows 7上安装MongoDB 2.6.7
  8. Linux进程控制（二）
  9. POJ_2184_Cow_Exhibition_(动态规划,背包)
  10. Interpreter Expression 解释器模式
  11. C语言库函数大全及应用实例六
  12. Android 中基于 Binder的进程间通信
  13. iOS开发实战-卫P嗯上网项目
  14. vxworks下硬盘测速程序
  15. 并发编程之wait()、notify()
  16. 获取Ip所在城市名与详细
  17. Confluence 6 通过 SSL 或 HTTPS 运行 - 备注和问题解决
  18. vue实现pc端无限加载功能
  19. 树莓派3b安装Apache2+PHP+MySQL+phpyadmin
  20. IntelliJ IDEA 2017版 编译器使用学习笔记(十) (图文详尽版);IDE快捷键使用；IDE关联一切

热门文章

  1. 多重背包问题 II
  2. kali linux生成密码字典方法
  3. 微信小程序分类菜单激活状态跟随列表滚动自动切换
  4. LG P2839 [国家集训队]middle
  5. 地理探测器简介（R语言）
  6. Django中admin的一些知识点
  7. WPF项目需要不断更新前台图片时，碰到“System.IO.IOException: 文件“xxx”正由另一进程使用“问题的解决
  8. ES6判断对象是否为空
  9. 解决windows下使用vscode没有函数提示的问题
  10. GitLab服务器修改用户密码