ES6中你必须掌握的模块化

 

前言

相信大家多多少都知道一些模块化这个概念。

其实，在JavaScript中是 一直没有模块（module）体系的。

在ES6之前 社区制定了一套模块规范 主要分为以下两个：

1 CommonJS   该规范主要用于服务端，比如nodejs中引入模块会使用：require（'模块'）

2 AMD               该规范主要用于浏览器    代表有一些框架 比如requireJs  curlJs 等。（不过现在基本都不用了）

 而ES6的出现 ，提供了简单的模块系统，

可以完全取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6中的模块化

在es6中 最主要提出的两个命令：export 和 import。

只要清楚两个问题就好：

a、如何去定义模块 

什么是模块？  一个模块就是一个独立的文件，这个文件内的所有变量外部都无法访问，如果你想要访问某个模块内部的某个变量，就必须使用export 来输出该变量。

① 导出模块：export 内容

eg:下面是一个lib.js的文件。分别导出了变量a和b

// lib.js

export const a = 12 

export const b= function (res) {
    return res
}

② 导入模块： import 模块

import的特点：

• import可以是相对路径也可以是绝对路径
• import 模块只可以导入一次 无论你引入多少次
• 有提升效果 import会自动提升到顶部 首先执行
• 导入的模块内容 如果里面有定时器更改 那么模块也会改动

// index.js
import { a, b} from './lib.js'

console.log(a) // 12

let res =  b(5) 

console.log(res) //5

b、如何去使用模块

如果我们是在框架中使用模块化 比如vue angular react

我相信大家都已经很了解其中的一种框架中模块的导入和导出

那么 在原生中若想导入一个模块化文件 需要将script标签的type属性中加入module

export的详细用法

export 不止可以导出变量和函数 他还可以导出对象、类、字符串等等

eg：

export let obj = {
    name:'小明',
    age:18
}

export const test = 'abcde'

exrpot class Test {
    constuctor() {
    }
}

同样 他还可以一次性以对象的形式导出多个变量：

let a = 1
let b = 2
let c = 3
export {
    a,
    b,
    c
}

如果导入的时候不想用a变量的名字应该怎么办呢 这时候要用到一个as的关键字

//lib.js 
let a = 1
let b = 2
let c = 3
export {
    a as apple,
    b,
    c
}
-------------------------
//index.js
import {apple,b,c}  from './lib.js'

那么 接下来 有一个很严峻的问题 也就是上面的import 都有 {  } 来包裹着所有引入的变量

那么我们是否遇到过如下的模式：

这种vue种引入的方式很常见，那么这里为什么没有了 { } 呢

原因就是在导出这个模块的时候 用到的是export default {  }

import的详细用法

• 基础使用方法： 

// 对于 export 导出的
import { add, subtract } from './test'

// 对于export default 导出的

import say from './test'

•  引入时改变模块中变量的名称：import {a as apple, b} from  ...

import {a as apple, b} from './test'

console.log( apple )

• 加载全部模块: import *  as  obj  from ...

// lib.js

export const a= 12

export const b= function (res) {
    return res
}
//index.js

import * as obj from './test.js'

console.log(obj.a)//12

obj.b(10)//10

• 默认的import语法不支持if else语句动态引入
• 若要动态引入 则需要用import( ) <类似于node里的require>

//lib.js
let a = 1
ley b = 2

export {
    a,b
};

//index.js
import('./lib.js').then(res=>{
    console.log(res.a+res.b)
})

好了 关于ES6中的模块化总结大概就到这里了

记得关注我的公众号"我与前端的故事"

谢谢观看