千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

  一.模块化(module)开发

  模块化开发不是js业务逻辑，工作中维护和开发js代码的一种方式

  关注的是开发过程中减少代码的冲突和依赖

  冲突：同事间的代码不再覆盖，不再相互影响...

  依赖：通过js文件看到彼此的依赖(相互引用)，开发过程中彼此引用同事的代码或者工具...

  上面的加载方式都不能解决冲突和依赖，引入模块化的概念

  二.模块化的意义(解决冲突依赖)

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

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

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

  三.学习ES6里面的模块化开发，彻底解决冲突和依赖

  1.定义模块(导出模块)：必须导出模块才能给其它同事使用，自己复用

  2.调用模块(导入模块)：导入自己或者同事提供的模块，方便开发

  3.配置模块(路径问题)：调用模块的路径配置(./当前目录  ../上一级目录  /根目录)

  四.定义模块(导出模块)

  1.export导出多个内容

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

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

  五.调用模块(导入模块)

  import

  利用import关键字导入模块

  语法：import {}  from './js模块的路径.js'

  注意这里的(./)表示当前的模块来自本地，不是第三方的，这就是配置模块

  六.HTML页面加载模块化文件的规则

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

  使用静态服务器预览(live Server)

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