ES6深入浅出 模块体系

2023年4月8日 253次阅读 来源: 一歩

一步，一步前进の一步。

模块化主假如协助我们更好的构造代码，模块许可我们将相干的变量和函数放在一个模块中。在 ES6 模块化之前，JS 言语并没有模块的观点，只要函数作用域和全局作用域异常容易发生定名争执。之前的 RequireJS、SeaJS、AMD、UMD、CMD啥的，在肯定层面上都是为了处置惩罚 JS 模块化的题目。

笔者是一个也不会用啊（技术发展太快了，新技术学不过来，照样坐等它们过期吧，果真 webpack 和 es6替换了它们），一步心中有个期待，啥时候我们用的 ES6、ES7直接运转在浏览器上吧，我如今还坐等 webpack 和 babel 死掉呢，一点还不会呢。

什么是模块

模块是自动运转在严厉情势下的JS 代码，在模块中建立的变量不会被添加到全局同享作用域，这个变量只会存在于模块的作用域中，在模块中 this的值是 undefined。模块的真正魔力地点是仅导入、导出你须要的绑定，而不是将所用的东西都放在一个处所。一个文件即一个模块。

严厉情势

模块中的代码是在严厉情势下运转的，等同于在文件的顶部use strict。JS 在严厉情势下运用会越发的严谨。简朴枚举几条严厉情势的划定规矩：

  1. 变量运用前必需声明
  2. 函数不能有重名参数
  3. with 不许可运用

。。。
更多划定规矩请参考阮一峰先生的文章严厉情势

export

在 ES6模块中的声明的作用局限就被限定在了模块文件中，文件外部是无法访问的，必需运用 export关键字将援用显现的暴露出去。

默许导出

能够运用 export default举行默许导出,注重一个模块中只能够有一个默许导出。

export default 1
export default NaN
export default 'foo'
export default { foo: 'bar' }
export default ['foo', 'bar']

定名导出

定名导出和默许导出一样经常使用，假如一个模块想要导出多个声明时较为经常使用，运用以下：

export var foo = 'bar'
export var baz = 'ponyfoo'

导出是绑定

须要注重的是 ES6模块导出的是绑定关联，不是值的复制，意味着假如你导出一个变量 foo,那末 foo 是和模块内部是互相关联连动的，我个人阻挡去变动一个模块所暴露出来的接口(export出来的部份)。

假定你有个模块./a，导出的 foo 变量初始值是 bar 将在500ms 变成 baz，在运用该变量的处所（import处）也会有该变化。

export var foo = 'bar'
setTimeout(() => foo = 'baz', 500)

导出列表

ES6 的模块许可你导出一个定名导出列表，代码片断以下：

var foo = 'ponyfoo'
var bar = 'baz'
export { foo, bar }

同时能够对定名导出举行重定名:

export { foo as ponyfoo }

导出的最好实践

我们学会了定名导出、导出列表、默许导出、导出重定名，此时你应当有点迷惑，我该挑选那种体式格局完成本身的导出呢？人呐之所以懊恼，就是由于挑选太多了。作者引荐人人在文件的尾部运用export default举行默许导出。

var foo = 'ponyfoo'
var bar = 'baz'
...

var api = {
  foo,
  baz,
  ...
}
export default api

如许做的优点以下:

  1. 模块中导出的部份变得显而看法，不须要从头至尾去找模块中那里是私有的，那里是须要export 出去的，只须要滚动到文件底部就能够一览无余。
  2. 不必纠结是应当运用定名导出，列表导出，照样重定名导出了，只运用export default不知道人人有无注重到，当你将一个对象作为默许导出接口时，即能够连系定名导出，还能够重定名，还能支撑导出多个。

import

import 关键字的作用和 export 的作用恰好相反，import 的作用是昔时想运用其他模块中的内容时举行关联绑定。

导入默许导出

当想在另一个模块中运用上一个模块的默许导出时非常轻易，impprt 背面的名字能够随意起，代码以下：

import _ from 'lodash'
import lodash from 'lodash'

导入定名导出

import关键字背面运用花括号包上你想要运用的定名导出。

import {map, reduce} from 'lodash'

导入时也能够举行重定名

import {cloneDeep as clone, map} from 'lodash'

完全导入一个模块

import * as _ from 'lodash'
//运用时采纳_.的情势
_.map()

无绑定的导入

有些模块或许没有举行任何导出，相反只是修正全局作用域的对象。只管这类模块的顶级变 量、函数或类终究并不会自动被到场全局作用域，但这并不意味着该模块无法访问全局作用 域。

加载模块

虽然我们一样平常编码中在运用 ES6的 import和 export 关键字，然则仔细想一下，我们并不相识 ES6的模块是怎样加载的，只知道打包东西帮我们处置惩罚好了，实际上我们并不相识模块化的学问。有时间再更新👻。
。。。。

原文ES6 Modules in Depth

🌚 前端进修QQ群: 538631558 🌚

【开辟环境引荐】
Cloud Studio 是基于浏览器的集成式开辟环境，支撑绝大部份编程言语，包含 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小顺序等等，无需下载安装顺序，一键切换开辟环境。 Cloud Studio供应了完全的 Linux 环境，而且支撑自定义域名指向，动态盘算资本调解，能够完成种种运用的开辟编译与布置。

    原文作者：一歩
    原文地址: https://segmentfault.com/a/1190000015975684
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞