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"];
【ES6中的模块化】 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

    推荐阅读