JavaScript Module 理论课

教程分享 > WEB技术 > JavaScript (412) 2024-08-06 14:28:00

前言

在其他编程语言中,我们可以通过划分模块,来组织庞大复杂的项目,而JS一开始并没有模块的概念,因为一开始JS的脚本就很简单。

后来随着JS的发展,前端要开发的项目越来越复杂,也越来越大型,因此需要更好的代码组织方式,于是JS也引入了模块功能,比如AMD,UMD,CommonJS等等不同的模块加载方式。

而在ES6规范中,也引入了官方的模块加载方式,也就是我们下面要讨论的知识。

 

什么是模块(Module )

在JS中,一个文件或者脚本就是一个模块,模块可以声明哪些变量或函数供外部使用,也可以引入其他模块的变量与函数为自己所用,在模块中,使用export标记了可以从当前模块外部访问的变量和函数,使用import从其他模块导入所需要的功能,如:

hello.js

//声明当前模块可以被其他模块使用的变量
export function sayHello() {
   alert('Hello');
}

 

main.js

//导入其他模块的变量
import {sayHello} from './hello.js';
alert(sayHello);
sayHello(); 

 

在浏览器中使用模块

在支持ES6规范的浏览器中,可以使用用<script type="module"></script>标签可以声明模块或者导入其他模块,如:

<!doctype html> 
<script type="module"> 
   import {sayHi} from './say.js';
   document.body.innerHTML = sayHi('John'); 
</script>

提示:目前前端项目开发中,很少使用上面这种在浏览器中使用模块的方式(不排除有少数),我们一般是创建一个工程项目,再通过webpack这类的构建工具解析各个模块的导出与依赖,最终打包上线的。

 

模块的特性

现代模式

模块的代码始终默认使用现代模式use strict,例如对一个未声明的变量赋值或者重复声明变量都将产生错误。

<script type="module">
   test = 5; // 未声明就使用,报错
   let a = 1;
   let a = 2;//重复声明,报错
</script>

上面的示例中,如果把type=module去掉,变成非模块代码,则可以正常运行。

模块代码解析

如果同一个模块被导入多次,那么它的代码只在第一次导入时便解析运行,比如下面的示例中,只会弹窗一次:

hello.js

alert(1);

index.html

<script type="module" src="./hello.js"></script>
<script type="module" src="./hello.js"></script>

this的值

在JS模块中,this关键字的值undefined,非模块脚本的顶级 this 是全局对象,比如浏览器的window

非模块代码

<script>
   alert(this)
</script>

输出Object

 

模块代码

<script type="module">
   alert(this)//undefined
</script>

输出undefined

 

export

export命令用于模块内部导出可供外部使用的变量,导出的方式有:

在声明前导出

可以在变量或函数声明加上export命令,便可以直接导出该变量或函数,如:

export function sayHello(){
   return "Hello";
}
export let a = 1;

导出与声明分开

也可以在声明之后,再使用export命令进行导出,不过这时候,导出的变量需要用花括号{}包括起来,如:

//声明
function sayHello(){
   return "Hello";
}
//导出
export {sayHello};//正确
//export sayHello;错误

也可以同时导出多个变量,如:

function sayHello(){
   return "Hello";
}
const username='test';
export {username,sayHello}

默认导出

如果直接使用export导出,则使用者必须知道模块导出的变量名称,否则就无法加载,因为使用者需要先了解你的模块代码,但如果想让使用者直接使用而不用了解你的代码,则可以使用export default来指定模块的默认输出。

hello.js

export default function(){
   return "hello"
}

 

导出时给个别名

在导出的时候,可以使用关键字as给导出的变量重新命名,如:

function sayHello(){
   return "Hello";
}
export {sayHello as sayHi}

 

import

import命令用于在当前模块中导出其他模块的可用变量与函数。

整体导入

如果要导入一个模块的全部变量与函数,可以使用*导出全部,但这种不按需导入的方式,可以会导入很多你不需要的东西,因此一般不推荐使用

import * from './hello.js'

另外,可以使用as关键字给整体导出起一个别名,如:

import * as say from './hello.js';
say.hello();

按需导入

如果我们只需要导入其他模块的部分功能,则可以使用花括号{}来指定要导出的变量与函数,如:

import {sayHi,sayHello} from './hello.js';

导入时给个别名

在导入的时候,也可以使用关键字as给导入的变量与函数起个别名,如:

import {sayHi as hi, sayBye as bye} from './hello.js';

 

 

https://www.leftso.com/article/2408050948472249.html

相关文章
前言在其他编程语言中,我们可以通过划分模块,来组织庞大复杂的项目,而JS一开始并没有模块的概念,因为一开始JS的脚本就很简单。后来随着JS的发展,前端要开发的项
主流模块规范目前主流模块规范有:规范名称运行环境实现加载方式AMD(异步模块定义)客户端require.js异步CMD(通用模块定义)客户端sea.js异步Co
javascript中onclick事件传递对象参数,javascript,javascript传递对象参数
简单使用创建一个js文件。//Say 模块export function Say(words){ alert(words);}H5调用模块&lt;!DOCTYPE h
Import Maps是一种针对web页面去控制imports行为的新方式,潜在地可以使你摈弃掉你的构建系统。当Es modules在Ecmascript 20
JavaScript/JS数组清空,删除数组内所有数据。Array=[]与Array.length=0的区别
JavaScript H5原生操作元素class,包括获取元素class值,设置class值修改元素class值操作。示例数据 &lt;head&gtl; &lt;meta cha
​JavaScript 数学小数精确计算&lt;!DOCTYPE html&gtl; &lt;html&gtl; &lt;head&gtl; &lt;title&gtl;&lt;/tit...
JavaScript正则加上/去掉cdn域名前缀,文本支持&lt;script&gtl;let $domain="https://static-project.example
JavaScript语言中对象的创建和使用
&lt;body&gtl; &lt;script type="text/javascript"&gtl;   function test(){     let obj={        ...
方式一 spliceJavaScript 中的 splice() 方法可用于在数组中添加或删除元素。如果我们需要删除数组中的元素,可以使用 splice() 方
javascript(js)onclick 传递多个字符变量参数&lt;a title="点击下载附件" onclick="downloadFile(\''+row.url+'\',\''+ro...
JavaScript集合(Array)转树(tree)结构js 原生数组转树形结构 /** * 将list装换成tree * @param {Object} myId 数据主键id * ...
步骤:1、配置文件webpack.config.js:  {     test:/\.css$/,     loader:'style-loader!css-loader'  ...