坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › ES6入门之Module

ES6入门之Module

坚果大叔
2019-11-29 17:56:29技术阅读 1,599

本文首发于公众号:执行上下文,同步更新个人博客:卖坚果的怪叔叔,转载请署名。

ES6入门之Module-坚果大叔

## 1、概述

> JS中一直没有 module 体系,无法将一个大程序拆分成依赖的小文件,在用简单的方法拼接起来。ES6 的模块设计思想是尽量静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

ES6模块不是对象,而是通过 export 命令显式指定输出的代码,再通过import 命令输入。如下:

```
import {state, getNum, setPost} form 'api'

```
以上方法实质上是从 api模块加载了3个方法,api中其他的方法不加载。这种加载就是 **编译时加载或者静态加载**

### 1.1 ES6模块的好处
- 不在需要UMD模块格式。
- 将来浏览器的新API就能用模块格式提供,不在必须做成全局变量或 navigator 对象的属性。
- 不在需要命名空间

## 2、严格模式

> ES6的模块自动采用严格模式,不管你有没有再模块头部加上 「use strict」

### 2.1 严格模式的限制

- 变量必须声明再使用
- 函数的参数不能有同名属性,否则报错
- 不能使用with语句
- 不能对只读属性赋值,否则报错
- 不能删除不可删除的属性,否则报错
- 不能删除变量 delete prop,会报错,只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反应函数的变化
- 不能使用 arguments.callee
- 不能使用 arguments.caller
- 禁止 this 指向全局对象(顶层指向 undefined,**所以不能在顶层代码中使用 this**)
- 不能使用 fn.caller 和 fn.arguments获取调用的堆栈
- 增加了保留字段(如:protected、static、interface)

## 3、export命令

> 模块功能主要由两个命令构成:export 和 import。export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能

另外一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望能够再外部读取某个模块内部的变量,那么就需要使用 export 输出该变量。如下:

```
export function test() {
console.log('export')
}

或者

let test = 'test'

export { test }
```

第一种方法是直接输出该变量,第二种这是一次性输出一组变量。可根据情况酌情使用。

> 通常情况下,export输出的是变量本身的名字,如果想重命名的话,可以通过 as 关键字。

```
function a () {}
function b () {}

export {
a as a1,
b as b1
}
```

**敲黑板:** export 规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

```
export 1 // 报错
var m = 1
export m // 报错

export const m = 1 // 正确
export(const m = 1) // 正确
const n = 1
export {n as m} // 正确

function a(){}
export a // 报错

export function a() {} // 正确
export(a) //正确
```

**export 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域中就会报错。**

## 4、import命令

> 使用了export 输出模块定义的接口之后可以使用 import 加载这个模块。

```
a.js
export function test() {}

b.js
import test from 'a.js'

// 为 test 重新定义名字
import {test as ttt} from 'a.js'
```

```
如果有多个接口可以一行引入
import {a, b, c} from 'a'

import 'a' // 加载a中所有模块
```

**敲重点:** import 输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里改写接口。

## 5、模块的整体加载

> 除了指定加载某个输出值,还可以使用整体加载,即用 星号 (*)指定对象,所有输出值都加载在这个对象上面。如下:

**一般写法**

```
a.js 中
export function add (num) {
return num = num * num
}
export function put (name) {
retrun name = name + 'hh'
}
// 引用
import {add, put} from 'a'
console.log(add(3), put('put'))
```

**整体加载**

```
import * as go from 'a'
console.log(go.add(3), go.put('put'))
```
## 6、export default

> 在上面可以看出,使用 import 命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。如果想快速的加载模块,在这里可以使用 export default, 为模块指定默认输出。

```
export default function () {
console.log('hahha')
}

import hhh from 'a' // 引用的时候可以指定任意名字
```

**非匿名函数**

```
export default function hah(){
console.log('哈哈')
}

// 或者

function hah(){
console.log('hah')
}
export default hah
import hah from 'a'

// 也可以更换名字
import {b as a } import 'a'
```

**敲黑板:**

```
// defautl 方式输出 import 引入的时候变量名直接写
export default function aa(){}
import aa form 'a'

// 非defautl 方式输出 import 引入的时候变量名需加花括号
export function aa(){}
import {aa} form 'a'
```

> export default 命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出。因此 export default 命令只能使用一次。所以 import引入的时候 方法名才不需要加括号。

## 7、export 与 import 的复合写法

> 如果在一个模块中,先输入后输出同一个模块

```
export { c, b } from 'a';

// 可以简单理解为
import { c, b } from 'a';
export { c, b };
```

重学js系列

重学js之JavaScript简介

重学 JS 之在 HTML 中使用 JavaScript

重学js之JavaScript基本概念(上)=> 数据类型

重学js之JavaScript基本概念(中)=> 操作符

重学js之JavaScript基本概念(下)=> 运算符

重学js之JavaScript变量、作用域和内存问题

重学js之JavaScript引用类型

重学js之JavaScript 面向对象的程序设计(创建对象)

重学JavaScript之面向对象的程序设计 => 继承

重学JavaScript之匿名函数

重学JavaScript之window

ES6入门系列

ES6入门之let、cont

ES6入门之变量的解构赋值

ES6入门之字符串的扩展

ES6入门之正则的扩展

ES6入门之数值的扩展

ES6入门之函数的扩展

ES6入门之数组的扩展

ES6入门之对象的扩展

ES6入门之Symbol

ES6入门之Set 和 Map

Es6入门之proxy

ES6入门之Promise对象

Git教程

前端Git基础教程

Python玩转微信

Python 实现微信自动通过好友添加请求!!!

Python + Wxpy 实现微信防撤回。

Python获取好友地区分布及好友性别分布

赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 坚果大叔。未经许可,禁止转载。
前端CSS常用代码集合
上一篇
简单!三步实现微信消息同步!!
下一篇
在小程序中查看
搜你想看的
聚合文章
网页点击平滑滚动效果~
如何在Linux服务器部署自己的网站?
常用的JS 时间转换相关代码!
ES6入门之let、cont
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
551 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,938 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,293 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,011 4
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢