ES6模块化

一、什么是模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来

二、模块化的好处

1)防止命名冲突

2)代码复用

3)高维护性

三、ES6模块化语法

模块化功能主要有两个命令:export和import

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

import命令用于输出其他模块提供的功能

四、模块数据暴露语法

      //统一暴露
      let school = "啦啦啦";
      function lala() {
        console.log("我们可以拉拉");
      }

      export { school, lala };


      //分别暴露
      export let school = "lalala";
      export function lala() {
        console.log("我们可以拉拉");
      }


      //默认暴露
      export default {
        school: "atguigu",
        teach: function () {
          console.log("我们可以教你");
        },
      };

五、模块数据引入语法

      //1、通用导入方式
      improt * as m1 from './src/js/m1.js'

      //2、解构赋值形式
      import {school,teach} from './src/js/m1.js';
      import {school as guigu,lala} from './src/js/m1.js';  //如果有命名重复  需要用 变量名 as 自命名 的方式
      import {default as m1} from './src/js/m1.js'  //针对默认暴露

      //3、简便形式  针对默认暴露
      import m1 from './src/js/m1.js'

六、使用es6模块化的另外一种方式

1)把所有需要引入的变量引入到一个文件夹中(入口文件)

2)在使用变量的文件中引入入口文件,type='module'

你可能感兴趣的:(es6,es6,前端)