ES6从入门到入狱-模块篇

在这里插入图片描述

ES6之模块化

概念

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。

介绍

1. 导出模块和引入模块

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来创建一个module4.js文件，来对这一个变量进行输出：

导出模块

export let str1 = "ECMAScript6";

引入模块

import { str1 } from "./module1";

console.log(str1);

导出模块中的多个变量，可以将变量包装成对象形式

let arr = ["ECMAScript", true, "Loki"];

let boo = true;

let first = "first";

export { arr, boo, first };//包装成对象并导出

引入模块，并接收多个变量

import { arr, boo, first, str1 } from "./module4";

console.log(str1);

console.log(arr);

console.log(first);

console.log(boo);

2. 如果不想暴露模块当中的变量名字，可以通过as来进行操作**

let myName = "Decepticon";

let myAge = 100;

let sex = "male";

let boo = true;

let fun = function() {

  return `我的名字是${myName} ,我的年龄是${myAge}，我的性别是${sex} `;

};

fun();

export { myName as name, myAge as age, boo as boo1 };

import { age, boo1, name } from "./module4";

console.log(name);

console.log(age);

console.log(boo1);

3. 将整个模块一起导入

import * as data from "./module4";

console.log(data.age);

console.log(data.name);

console.log(data.boo1);

4. 默认导出（default export）

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

全部导出

export default {

  myName: "Loki",

  myAge: 20,

  sex: "female",

  fun: function() {

    console.log(this.myAge);

  },

};

全部引入

import module4 from "./module4";

console.log(module4.myAge);

console.log(module4.myName);

5.处理浏览器不识别export 和 import 语法

使用babel转换工具将ES6转换成ES5