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
推荐阅读
- 热闹中的孤独
- JS中的各种宽高度定义及其应用
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- Android中的AES加密-下
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 六步搭建ES6语法环境
- 放下心中的偶像包袱吧
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解