全面理解ES6模块化编程
发布网友
发布时间：2024-09-17 03:27
共1个回答
热心网友
时间：2024-10-01 08:26
今天我们来学习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定义变量一样，引入后what和ever不允许再去更改。
举个例子
//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)0import导入整个模块作为对象沿用上面的例子，我们可以使用*号关键字，将模块中的所有内容作为单个对象导入
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)2import/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语句就好了，可以参考antdesign的组件库的写法。
<!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总结今天我们学习了JavaScriptES6模块化编程的方方面面，如果有问题欢迎留言评论。我们明天见。
如果本文有帮助，微信搜索【小帅的编程笔记】，让我们每天进步
