《深入理解ES6》笔记——用模块封装代码（13）

tunny 发布于2019-08-29 13:05 / 1910人阅读

摘要：模块的定义模块是自动运行在严格模式下并且没有办法退出运行的代码。数据模块函数模块类模块模块的导出给数据函数类添加一个，就能导出模块。数据模块函数模块类模块模块的引用在另外的文件中，我们可以引用上面定义的模块。导入指定的模块。

模块的定义

模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。

模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。

//数据模块
const obj = {a: 1}
//函数模块
const sum = (a, b) => {
  return a + b
}
//类模块
class My extends React.Components {

}

模块的导出

给数据、函数、类添加一个export，就能导出模块。一个配置型的JavaScript文件中，你可能会封装多种函数，然后给每个函数加上一个export关键字，就能在其他文件访问到。

//数据模块
export const obj = {a: 1}
//函数模块
export const sum = (a, b) => {
  return a + b
}
//类模块
export class My extends React.Components {

}

模块的引用

在另外的js文件中，我们可以引用上面定义的模块。使用import关键字，导入分2种情况，一种是导入指定的模块，另外一种是导入全部模块。

1、导入指定的模块。

//导入obj数据，My类
import {obj, My} from "./xx.js"

//使用
console.log(obj, My)

2、导入全部模块

//导入全部模块
import * as all from "./xx.js"

//使用
console.log(all.obj, all.sun(1, 2), all.My)

默认模块的使用

如果给我们的模块加上default关键字，那么该js文件默认只导出该模块，你还需要把大括号去掉。

//默认模块的定义
function sum(a, b) {
    return a + b
}
export default sum

//导入默认模块
import sum from "./xx.js"

模块的使用限制

不能在语句和函数之内使用export关键字，只能在模块顶部使用，作为react和vue开发者的你，这个限制你应该很熟悉了。

在react中，模块顶部导入其他模块。

import react from "react"

在vue中，模块顶部导入其他模块。

修改模块导入和导出名

有2种修改方式，一种是模块导出时修改，一种是导入模块时修改。

1、导出时修改：

function sum(a, b) {
    return a + b
}
export {sum as add}

import { add } from "./xx.js"
add(1, 2)

2、导入时修改：

function sum(a, b) {
    return a + b
}
export sum

import { sum as add } from "./xx.js"
add(1, 2)

无绑定导入

当你的模块没有可导出模块，全都是定义的全局变量的时候，你可以使用无绑定导入。

模块：

let a = 1
const PI = 3.1314

无绑定导入：

import "./xx.js"
console.log(a, PI)

浏览器加载模块

有用过webpack打包js模块的同学可能有经验，使用webpack打包了多个js文件，然后放到HTML使用script加载时，如果加载顺序不对，就会出现找不到模块的错误。

这是因为模块之间是有依赖关系的，就像你使用jQuery的时候，必须先加载jQuery的代码，才能使用jQuery提供的方法。

加载模块的方法，总是先加载模块1，再加载模块2，因为module类型默认使用defer属性。

总结

模块还有很多有意思的特性，对react和vue开发有一定经验的人对这些基本知识应该了如指掌，新手不了解也不用太心急，写几个module.js做一下尝试。如果浏览器报错，不能识别export模块，你可能需要先加载babel的js插件来编译它。

=> 返回文章目录

服务器托管专线服务深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112358.html

《深入理解ES6》笔记——用模块封装代码（13）

摘要：模块的定义模块是自动运行在严格模式下并且没有办法退出运行的代码。数据模块函数模块类模块模块的导出给数据函数类添加一个，就能导出模块。数据模块函数模块类模块模块的引用在另外的文件中，我们可以引用上面定义的模块。导入指定的模块。模块的定义模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。 //...

Mr_houzi 2019-08-20 18:28 评论0 收藏0
《深入理解ES6》笔记——用模块封装代码（13）

摘要：模块的定义模块是自动运行在严格模式下并且没有办法退出运行的代码。数据模块函数模块类模块模块的导出给数据函数类添加一个，就能导出模块。数据模块函数模块类模块模块的引用在另外的文件中，我们可以引用上面定义的模块。导入指定的模块。模块的定义模块是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。 //...

elisa.yang 2019-08-05 11:45 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

wupengyu 2019-08-05 11:37 评论0 收藏0
2017-08-02 前端日报

摘要：前端日报精选浮点数精度之谜前端面试必备基本排序算法从贺老微博引出的遍历器加速那些奥秘进阶之深入理解数据双向绑定全栈天中文深入理解笔记用模块封装代码前端架构经验分享周二放送自制知乎专栏译在大型应用中使用的五个技巧掘金开发指南众成 2017-08-02 前端日报精选 JavaScript 浮点数精度之谜前端面试必备——基本排序算法从贺老微博引出的遍历器（Iterators）加速那些奥秘J...

Worktile 2019-08-20 18:29 评论0 收藏0