ES6指北【3】——5000字长文带你彻底搞懂ES6模块

2018-08-09 admin

1.模块

1.1 什么是模块?什么是模块化?

玩过FPS游戏的朋友应该知道,一把装配完整的M4步枪,一般是枪身+消音器+倍镜+握把+枪托

如果把M4步枪看成是一个页面的话,那么我们可以做如下类比 枪身 -> <main></main> 消音器 -> <header></header> 倍镜 -> <nav></nav> 握把 -> <aside></aside> 枪托 -> <footer></footer>

OK,你刚才做了一件事情,就是把m4步枪拆成了五个部分,你拆分的每一个部分就是一个模块【module】,你拆分的这个过程就是模块化【modularization】

模块化是一种编程思想,其核心就是拆分任务,把复杂问题简单化,这样一来既方便多人分工协作,又可以帮助我们迅速定位问题

  • 方便多人分工协作 —— 可以不同的人开发不同的模块,再组合,大大增加团队效率
  • 帮助我们迅速定位问题 —— 后坐力太大,那八成是枪托或握把的问题;声音过大,那八成是消音器的问题。

1.2 模块化的血泪史

下面用一个小栗子讲一讲模块化的发展史

龚先生和棚先生一起接了一个项目,他们俩需要分别实现一些功能,很简单,就是Console出来自己的变量a

于是他们俩一合计,安排龚先生的代码单独放在script1.js里写,棚先生的代码单独放在script2.js里写,然后用script标签分别引入

// script1.js文件

var a = 1
console.log(a)
// script2.js文件

var a = 2
console.log(a)
<!--HTML文件-->

<script src="./script1.js"></script>
<script src="./script2.js"></script>

很快他们遇到了第一个问题 —— 变量命名冲突 尤其是包含了异步的时候,会出现如下情况

// script1.js文件

var a = 1
setTimeout(()=>{
  console.log(a)  // 我们想console出来1,却console出了2
},1000)
// script2.js文件

var a = 2
console.log(a)

上面的问题明显是由于a是一个全局变量导致的,所以解决思路也很明确——造一个局部变量呗

局部变量

ES5时代使用立即执行函数制造局部变量

// script1.js文件
!function(){
    var a = 1
    setTimeout(()=>{
      console.log(a)  // 这下是2了
    },1000)
}()
// 下面有5000行代码
// script2.js文件

console.log(2)

ES6时代直接使用块级作用域+let

// script1.js文件
{
    let a = 1
    setTimeout(()=>{
      console.log(a)  // 这下是2了
    },1000)
}
// script2.js文件
{
    let a = 2
    console.log(a)
}

通过window连接各个模块

后来公司招了一个前端大佬,说现在只能由他来控制什么时候console变量,于是他新建了一个control.js文件 并通过window对象连接script1.js和scirpt2.js

// script1.js文件
{
    let a = 1
    window.module1 = function() {
        console.log(a)
    }
}
// script2.js文件
{
    let a = 2
    window.module2 = function() {
        console.log(a)
    }
}
// control.js文件
setTimeout(()=>{
    window.module1()
},1000)

window.module2()

这个时候,非常重要的一点就是window是一个全局变量并且充当了一个公用仓库,这个仓库有两个关键作用,存【导出】取【依赖】

// script1.js文件
{
    let a = 1
    // 把这个函数存放进window,就是导出到window
    window.module1 = function() {
        console.log(a)
    }
}
// control.js文件
setTimeout(()=>{
    // 我们从window里取出module1函数进行调用,就是依赖了script1.js文件
    window.module1()
},1000)

window.module2()

依赖加载的顺序

烦人的产品对需求又进行了更改,给了一个name.js文件

// name.js文件
window.names = ['gongxiansheng','pengxiansheng']

要求现在龚先生和棚先生需要Console出自己的名字 这还不简单?几秒钟写好

// script1.js文件
{
    window.module1 = function() {
        console.log(window.names[0])
    }
}
// script2.js文件
{
    window.module2 = function() {
        console.log(window.names[1])
    }
}
// control.js文件
setTimeout(()=>{
    window.module1()
},1000)

window.module2()
<!--HTML文件-->

<script src="./script1.js"></script>
<script src="./script2.js"></script>
<script src="./control.js"></script>
<script src="./name.js"></script>

但很快他们发现,console出来的都是undefined 前端大佬一眼看出了问题,对他们俩说 你们依赖的代码一定要在你们自己的代码前引入,不然是取不到值的;你看我的control.js是不是在你们俩的代码后面引入的,因为我用到了你们俩的代码了呀 噢噢,原来是js文件加载顺序问题,改一下吧

<!--HTML文件-->

<script src="./name.js"></script>
<script src="./script1.js"></script>
<script src="./script2.js"></script>
<script src="./control.js"></script>

但是在人多了以后,我们到时候会搞不清楚到底谁依赖了谁,保险起见只能全部都加载,性能浪费了太多,前端大佬摇头叹息道

2. ES6的模块

2.1 ES6之前模块化的痛点

  1. 变量冲突
  2. 要用window连接各个模块
  3. 依赖需要全部加载
  4. 还要TMD注意加载顺序

模块化是ES6的最大的亮点之一,因为在ES6之前的语法里从未有过模块化的体系这对开发大型的、复杂的项目形成了巨大障碍。因为我们无法对项目进行拆分,无法更好地进行多人协作开发。更重要的是,其它大部分语言都支持模块化

既然语言不支持,那么如何将模块化引入JS呢?

前端社区就自己制定了一些模块加载方案——这也是CommonJS【服务器】和AMD、CMD【浏览器】的由来。 clipboard.png

但是现在ES6引入了模块化的功能,实现起来非常简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

2.2 import和export的用法

import和export语法较为简单,大家去MDN可以看非常详细的讲解,笔者在这里知识用注释简单介绍一下

export语法

// 命名导出
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 将其它模块内的导出作为当前文件的导出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

import用法

import defaultExport from "module-name"; // 导入默认默认变量
import * as name from "module-name"; // 将模块内所有变量导出,并挂载到name下【name是一个module对象】。什么要有as——为了防止export出来的变量命名冲突
import { export } from "module-name"; // 导入某一个变量
import { export as alias } from "module-name"; // 导入某一个变量并重命名
import { export1 , export2 } from "module-name"; // 导入两个变量
import { export1 , export2 as alias2 , [...] } from "module-name"; // 导入多个变量,同时可以给导入的变量重命名
import defaultExport, { export [ , [...] ] } from "module-name"; // 导入默认变量和多个其它变量
import defaultExport, * as name from "module-name"; // 导入默认变量并重新命名
import "module-name"; // 导入并加载该文件【注意文件内的变量必须要通过export才能被使用】
var promise = import(module-name); // 异步的导入

使用import和export改写第一节的代码

// name.js文件
let names = ['gongxiansheng','pengxiansheng']
export default names
// script1.js
import names from './name.js'

let module1 = function () {
  console.log(names[0])
}
export default module1
// script2.js
import names from './name.js'

let module2 = function() {
  console.log(names[1])
}
export default module2
// control.js
import module1 from './script1.js'
import module2 from './script2.js'

setTimeout(() => {
  module1()
}, 1000)
module2()
<!--HTML文件-->

<script type="module" src="./control.js"></script>
<!--注意一定要加上type="module",这样才会将这个script内的代码当做模块来对待-->

2.3 拓展:import和export的一些运行原理

2.3.1 ES6 模块输出的是值的引用,输出接口会动态绑定

其实就是按照数据类型里的引用类型的概念去理解。 这一点与 CommonJS 规范完全不同。 CommonJS 模块输出的是值的缓存,不存在动态更新。

// module1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
// module2.js
import {foo} from './module1.js'
console.log(foo)
setTimeout(() => console.log(foo), 1000);

// console的结果
// bar
// baz

2.3.2 export可以出现在模块内的任何位置,但不能处于块级作用域内

// 报错
{
  export let foo = 'bar';
}

2.3.3 import具有提升效果(类似于var),会提升到整个模块的头部,首先执行

console.log(foo)
import {foo} from './script1.js'

参考资料:ECMAScript 6 入门

本文纯属原创,为了方便大家理解,小故事,小栗子都是笔者自己想的。如果您觉得对你有帮助,麻烦给个赞,给作者灰暗的生活挥洒挥洒积极向上的正能量,谢谢啦^_^。

原文链接:https://segmentfault.com/a/1190000015945917

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37649.html

文章标题:ES6指北【3】——5000字长文带你彻底搞懂ES6模块

相关文章
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
IO.js 1.0.0 正式发布,支持 ES6 语言特性!
IO.js 是为 V8 引擎编写的基于事件 IO 的实现。Node.js中一群不满Joyent公司控制的信徒发起了另外一个项目io.js,即另外一个支持服务器端JavaScript的变种,称为io.js或iojs 。 IO.js 1.0.0...
2015-11-12
javascript字面量
你在JavaScript中使用文字代表值。 这些都是固定的值,而不是变量 从字面上 提供在你的脚本。 本节描述以下类型的文字: 数组 布尔 浮点型 整数 对象 字符串字面值 数组字面量 数组文字是零个或多个表达式的列表,每个代表一个数组元素...
2015-11-12
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
2015年2月国内操作系统市场份额概况,xp占46.29%,
规则调整:2012年6月1日开始,Mac操作系统中不再包含ipad、iphone市场份额。 ...
2015-11-12
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
回到顶部