首页>>前端>>JavaScript->全面理解ES6模块化编程

全面理解ES6模块化编程

时间:2023-11-29 本站 点击:0

今天我们来学习ES6的模块化系统,如何从模块中导出变量、函数、类,在其他模块中去使用。

在ES6的模块系统中,每个JS文件可以理解为一个模块,模块代码以严格模式执行,所以模块中的变量、函数不会添加全局作用域中。

在ES6之前,我们可能需要使用require.js来实现模块化编程,在Node.js中使用commonjs规范来模块化编程,JS并没有一个统一的规范,所以在ES6推出了全新的模块化方案。

在浏览器中运行

创建一个文件 message.js

exportletmessage='ES6Modules';

message.js是ES6中的一个模块,包含一个message变量,使用 export 语句将message变量暴露给其他模块。

然后创建一个 app.js,在app.js中我们引入 message.js模块,在app.js中,我们创建一个h1元素并插入到页面中。

import 语句用来从 message.js 模块导入 message 变量。

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)

最后,创建一个html文件,引入 app.js

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>

注意:这里我们需要在script标签上加type="module"用来引入 app.js 模块。运行成功如下

注意:需要起个本地服务器来打开页面,不能直接使用本地打开文件方式。

export 导出

要从一个模块中导出一个变量、函数或者类,我们需要用到export关键字

//log.jsexportletmessage='Hi';exportfunctiongetMessage(){returnmessage;}exportfunctionsetMessage(msg){message=msg;}exportclassLogger{}

在上面的例子中,我们创建了log.js这个模块,里面有1个变量,两个函数,1个类,然后我们使用export来导出它们。

要注意的是,用export导出的函数或者类需要有名称,我们不能使用export导出匿名函数或者类。

我们也可以先定义变量或者函数,然后在后面再将其导出

//foo.jsfunctionfoo(){console.log('foo');}functionbar(){console.log('bar');}exportfoo;

在上面例子中,我们首先定义了foo函数,然后在后面将其导出,由于我们没有导出bar函数,所以在其他模块中是无法访问的,只能在当前模块中使用,我们可以称之为私有函数。

import 导入

有了带有导出的模块后,我们就可以使用import关键字去访问另一个模块中的变量、函数或者类

import{what,ever}from'./other_module.js';

在花括号内指定要导入的变量、函数或者类名称。

注意:当我们导入模块时,就像是const定义变量一样,引入后whatever不允许再去更改。

举个例子

//greeting.jsexportletmessage='Hi';exportfunctionsetMessage(msg){message=msg;}

当我们引入message变量和setMessage()函数后,我们可以调用setMessage() 函数去改变模块内message变量的值。

//app.jsimport{message,setMessage}from'./greeting.js';console.log(message);//'Hi'setMessage('Hello');console.log(message);//'Hello'

但如果直接去修改message变量,就会报错

message='Hallo';//error

其实,当我们调用setMessage()函数时,JS会去到greeting.js模块中去执行代码并修改message变量,然后导入的message变量也会随着变化。

import 导入多个变量/函数

在cal.js中导出a、b、result变量和sum()、multiply()函数

//cal.jsexportleta=10,b=20,result=0;exportfunctionsum(){result=a+b;returnresult;}exportfunctionmultiply(){result=a*b;returnresult;}

接着在app.js中去引入,使用它们

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)0

import导入整个模块作为对象

沿用上面的例子,我们可以使用*号关键字,将模块中的所有内容作为单个对象导入

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)1

然后可以使用cal对象去访问导出的变量和函数

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)2

import / export 的限制

注意,import / export语句只能在代码的最外层执行,不能在其他作用域内执行,下面的代码会报语法错误

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)3

同样下面的import语句也会报语法错误

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)4

产生错误的原因是,ES6的import / export只能通过静态方式确定导入或者导出的内容,无法动态引入模块。

但在ES2020中引入了import()函数,可以支持动态导入模块。

别名导出 /导入

下面我们将add()函数使用别名sum进行导出,我们使用as关键字,在后面写上要导出的别名

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)5

然后在引入模块时,我们要使用引入add()时,我们要用sum去代替

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)6

如果在导入时我们不想使用sum作为导入,我们也可以使用as关键字去使用其他名称

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)7

重新导出

重新导出导入的模块

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)6export{sum};

下面这个语法等同于上面

import{message}from'./message.js'consth1=document.createElement('h1');h1.textContent=messagedocument.body.appendChild(h1)9

我们也可以使用别名进行重新导出

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>0

重新导出所有,我们可以使用*

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>1

有的同学可能不知道这重新导出有什么作用,其实这作用还挺大的,比如我们写了20个组件,我们不想写20条import语句,只想写1条import语句,那么我们就可以建一个中间文件将这个20个组件引入,然后全部导出,然后我们在用的时候就一条import语句就好了,可以参考ant design的组件库的写法。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>2

匿名导入

有时,我们会开发一个不需要指定名称导入的模块,如果我们想给原生Array增加一个方法

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>3

接着,我们直接去import该模块,然后使用数组的contain方法

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>4

默认导出

一个模块只能有一个默认导出,一般来说默认导出更容易被导入,因为我们不需要再去看导入的变量、函数或者类的名称就可以导入,一般来说一个模块若只有一个导出我们可以使用默认导出。

下面的 sort.js模块默认导出一个函数

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>5

使用sort.js模块

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>6

引入的sort就相当于sort.js模块中导出的默认函数。

同样,在有默认导出的同时我们也可以导出其他函数

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>5exportfunctionheapSort(arr){//堆排序}

要从模块中导入默认导出和非默认导出我们要遵循下面的规则

首先,默认导出要在最前面

其他非默认导出,在后面用花括号导入

比如这样

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>8

如果要别名默认导出,我们也可以使用as关键字,像这样

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ES6Modules</title></head><body><scripttype="module"src="./app.js"></script></body></html>9

总结

今天我们学习了JavaScript ES6模块化编程的方方面面,如果有问题欢迎留言评论。我们明天见。

如果本文有帮助,微信搜索【小帅的编程笔记】,让我们每天进步


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/715.html