一. 模块化的意义

• 函数编程---->闭包---->命名空间---->模块化编程

• 模块化的意义–冲突和依赖

• 模块化思想

  • 就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发
  • 每个模块之间没有必然的联系，互不影响，想要什么功能，就加载什么模块
  • 每个 JavaScript 文件就是一个独立的模块，
  • 大家必须以同样的方式编写模块，否则达不到预想的效果.

二. ES6 模块化讲解

• 历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

• 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。

• ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

定义模块：

• export命令用于规定模块的对外接口

• 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

  //first.js
  let name = 'zhangsan';//普通变量
  const obj = {//对象或者数组name:'lisi',age:18,sex:'men'
  };
  const fn = function() {//普通函数console.log('我是函数');
  }
  class Person {constructor() {}init() {}
  }// 暴露模块
  export {name,obj,fn,Person
  }
  

• 使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。

• export default 暴露一个变量或者函数，调用的时候自定义名称，一个模块只能有一个默认输出，因此export default命令只能使用一次。

  export default function fn() {console.log('我是函数的返回值');
  }
  

导入模块：

• 使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

  import { name,obj,fn,Person  } from './first.js';
  console.log(name)
  console.log(obj)
  fn()
  let p1 = new Person()
  

• 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

  import { lastName as surname } from './profile.js';
  

配置模块：

• 路径配置，说明当前模块是自定义的模块还是第三方模块

  import { name,obj,fn,Person  } from './first.js'; //first.js前面的./表示本地模块的配置
  

HTML页面加载规则

• 浏览器加载 ES6 模块，也使用script标签，但是要加入type="module"属性。

• 浏览器对于带有type="module"的script都是异步加载，不会造成堵塞浏览器

• 即等到整个页面渲染完，再执行模块脚本，等同于打开了script标签的defer(异步)属性。

• 如果网页有多个script type=“module”，它们会按照在页面出现的顺序依次执行。

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