ES6 modules 详解

概述

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

下面介绍一下es6的简单使用。

1. 引入模块

首先在根目录的src文件夹下创建一个test.js和index.js,在test.js中我们随便干点什么简单的事情即可。

// src/test.js
console.log('first module');

在index.js中通过import引入test.js,这是我们要学会的第一个语法

// src/index.js
import test from './test' console.log(test);
  • import表示引入一个模块,
  • test 我们暂时理解为引入模块的名字,
  • from表示从哪里引入
  • ./test为./test.js的简写,表示将要引入模块的路径

引入这个动作执行时,test.js中的代码也执行了。由于在test.js中并没有对外暴露任何接口,因此index.js中的test为一个空对象,那么对外暴露接口的方式,则是我们要学习的第二个语法。

2. 对外提供接口

ES6 modules使用export关键字对外提供接口,在我们刚才创建的test.js中,我们添加如下代码

   const num = 20;
const arr = [1, 2, 3, 4];
const obj = {
a: 0,
b: function() {}
}
const foo = () => {
const a = 0;
const b = 20;
return a + b;
} export default {
num,
arr,
obj,
foo
}

在test.js中,我们使用export default对包暴露了一个对象。他的意思就是当我们使用import test from ‘./test’时,这个test对象就默认等于export default暴露的对象。

我们还可以在test.js中,仅仅通过export暴露几个方法与属性,我们来看看index.js中test会变成什么样子。

// src/test.js
export const bar = () => {}
export const zcar = 12345;

保存运行后,我们发现,index.js中的test对象并没有变化,因为它仅仅等于export default抛出的对象,因此,为了获得模块test.js暴露的所有接口,我们得通过如下的方式。

// src/index.js
import * as test from './test';

其中的 表示所有,这是比较常用的通配符,as表示别名, as test的意思是将test.js暴露的所有接口组成的对象,命名为test。那么我们在index.js中log出test,结果就如下。

 

ES6 modules 详解

 

如果大家对ES6解析结构的语法熟悉,那么对于如下的用法相信就不难理解。

/ src/index.js
import test, { bar, zcar } from './test'; console.log(test);
console.log('bar:', bar);
console.log('zcar:', zcar);

test,仍然表示为export default暴露的对象,而 { bar, zcar }则表示利用解析结构的语法,从整个返回对象中去取得对应的接口。输出结果也就很清晰了。

 

ES6 modules 详解

 

这种方式还是比较常见,比如我们在使用vuex时,常常这样使用:

import { mapMutations } from "Vuex";

它其实暗示了vuex的封装方式,也暗示了我们应该如何去封装我们的模块。

这里我们能够直接引入vuex的原因,是因为我们将它安装到了文件夹node_modules中,该文件夹中安装的所有模块都可以这样直接引用。例如我们安装一个jquery。

// 安装jquery
> npm install jquery

然后在其他模块中就可以直接引入

import $ from 'jquery'

这样,我们可以和往常一样使用jquery。
通过这样方式,我们还可以扩展更多的库,这就使得我们这个开发环境不仅仅能够用于vue的开发,怎么用,完全取决与你自己。

结束语

ES6 模块的基础语法大概就这些吧,他告诉了我们在ES6中,一个模块应该如何对外暴露接口与如何引入其他模块暴露的接口,这个知识点在实际开发中非常常用,因此虽然简单,但是不得不掌握,这也是大家进一步学习react或者vue的基础,主要的难点大概在于本地开发环境的折腾,如果你是初次折腾这些,可能会遇到一些小问题,所以一定要有一点耐心。

上一篇:LeetCode之“字符串”:ZigZag Conversion


下一篇:linux command screen