95-ES6模块化编程

模块化编程

没有模块化之前的问题：

• 一个页面中引入多个js文件，文件之间的依赖关系不明确
• 变量名重名，那么会直接报错
• 只会在当前文件中报错，阻塞一个文件的运行

es6之前会使用第三方的插件实现模块化

ES6模块化

• 引入模块

  • html：引入主js文件，并且添加type=module属性

        <script type="module" src="js文件路径"></script>
    

  • 主js文件：引入其他js文件

    import "js文件路径";import "./a.js";
    

• 暴露与引入：

  • 引入：

    import {变量名} from "js文件路径";
    

  • 暴露：

    export{    变量名}
    

• 打开：

  • 注意需要使用live server打开，否则会出现跨域错误

整体暴露与接收

• html

  <script type="module" src="js文件路径"></script>
  

• js文件

  ​
  //整体暴露
  export default{
      变量名1,
      变量名2,
      ...
  }
  //整体接收
  import 对象变量名 from "js文件路径"; 
  对象变量名.变量名1
  对象变量名.变量名2()