js模块(module)和导入,导出(import,export)

什么是模块(module)

一个模块(module)就是一个文件。一个脚本就是一个模块。就这么简单。

模块可以相互加载,并可以使用特殊的指令 export 和 import 来交换功能,从另一个模块调用一个模块的函数或者变量,常量...,即可以引入并调用其他模块的方法,也可以导出自身的方法给其他模块使用,

import和export 关键字

  • export 关键字标记了可以从当前模块外部访问的变量和函数。
  • import 关键字允许从其他模块导入功能。
// a.js:
export function a(){console.log("a");
}// index.html:<script type="module">
import {a} from "./a.js"a();
</script>

在这样index文件就通过导入使用了a文件的a()方法,这里的 "./a.js" 是a文件所在的相对路径

模块脚本 总是 被延迟的

  • 下载外部模块脚本 <script type="module" src="..."> 不会阻塞 HTML 的处理,它们会与其他资源并行加载。
  • 模块脚本会等到 HTML 文档完全准备就绪(即使它们很小并且比 HTML 加载速度更快),然后才会运行。
  • 保持脚本的相对顺序:在文档中排在前面的脚本先执行。
<script type="module">alert(typeof button); // object:脚本可以“看见”下面的 button// 因为模块是被延迟的(deferred,所以模块脚本会在整个页面加载完成后才运行
</script>相较于下面这个常规脚本:<script>alert(typeof button); // button 为 undefined,脚本看不到下面的元素// 常规脚本会立即运行,常规脚本的运行是在在处理页面的其余部分之前进行的
</script><button id="button">Button</button>

<scprit>的async属性 可以让module直接执行而不用等待html文档就绪

<script async type="module"></script>

对于模块的使用,大部分时候是在框架的构建工具中,比如,webpack工具。

import 和 export

export可以和要导出的部分分开写

// 导出数组
let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];// 导出类
class User {constructor(name) {this.name = name;}
}// 导出 const 声明的变量
const YEAR = 2024;export  {YEAR,User,months} ;

as和default

使用as可以通过指定的名称使用导入的模块,或者导出模块

// say.js
function sayHi(user) {alert(`Hello, ${user}!`);
}function sayBye(user) {alert(`Bye, ${user}!`);
}export {sayHi as Hi, sayBye as Bye};-------------------------------// main.js
import {Hi as hi, Bye as bye} from './say.js';hi('John'); // Hello, John!
bye('John'); // Bye, John!

default只能与export一起使用,表示默认导出,一个文件只能有一个默认导出

命名的导出默认的导出
export class User {...}export default class User {...}
import {User} from ...import User from ...

 有default的导出模块,引用时不能带括号,同时引用的名称可以自定义,(比如上面的默认导出可以写成 import one from ... 这样one就表示User类)

没有default的导出模块,引用时必须带括号,引用的名称不可以自定义

import() 表达式

import(module) 表达式加载模块并返回一个 promise,该 promise resolve 为一个包含其所有导出的模块对象,我们可以在代码中的任意位置调用这个表达式

尽管 import() 看起来像一个函数调用,但它只是一种特殊语法,只是恰好使用了括号,它不是一个函数。

// index.html
<script>async function load() {let say = await import('./say.js');say.hi(); // Hellolet bye = say.default;bye();// bye}
</script>
<button onclick="load()">Click me</button>// say.js
export function hi() {alert(`Hello`);
}
export default function bye() {alert("bye");
}

在HTML中使用import() 不需要使用module类型script标签,可以通过default属性访问到默认导出。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql(54) : dbcp多实例使用

mysql版本: 8.0.11 java版本: 8 maven版本: 3.6.3 mave依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.18</version></dependency><dependency><groupId&…

使用C#反射中的MAKEGENERICTYPE函数,来为泛型方法和泛型类指定(泛型的)类型

MakeGenericType 是一个在 C# 中用于创建开放类型的实例的方法。开放类型是一种未绑定类型参数的泛型类型。当你有一个泛型类型定义&#xff0c;并且想要用特定的类型实例化它时&#xff0c;你可以使用 MakeGenericType 方法。 public Type MakeGenericType (params Type[] ty…

Windows API 开发桌面应用程序,在窗口按下鼠标左键不放可以拖图,并且拖图期间鼠标图标变成手掌

在Windows API中&#xff0c;要实现鼠标左键按下并拖动以移动窗口中的某个图形&#xff0c;并且同时改变鼠标图标为“手掌”形状&#xff08;这通常指的是“拖动”或“移动”的图标&#xff09;&#xff0c;你需要执行几个步骤。 以下是一个基本的步骤指南&#xff0c;用于在W…

java---程序逻辑控制(详解)

目录 一、概述二、顺序结构三、分支结构3.1 if语句3.1.1 语法格式13.1.2 语法格式23.1.3 语法格式3 3.2 练习3.2.1 判断一个数字是奇数还是偶数3.2.2 判断一个数字是正数&#xff0c;负数&#xff0c;还是零3.2.3 判断一个年份是否为闰年 3.3.switch语句 四、循环结构4.1 while…

部署Jar包教程

文章目录 引言I 编写脚本1.1 启动1.2 关闭1.3 SSH上传jar包II 打包2.1 build中的plugins中标签的含义2.2 jar中没有主清单属性引言 I 编写脚本 1.1 启动 chmod a+x start.sh #!/bin/bash nohup java -Xms1024m -Xmx1024m -Xmn256m -XX:MaxDirectMemorySize=5G -jar SOAP-0.…

在Linux平台下使用 .NET Core技术的UI方案

在Linux平台下使用 .NET Core 实现精美的界面&#xff0c;你可以考虑以下几种方案&#xff1a; 1. 使用 Avalonia Avalonia 是一个跨平台的 .NET UI 框架&#xff0c;支持 Windows、macOS 和 Linux。它类似于 WPF&#xff0c;但能够在多个平台上运行。 安装 Avalonia 你可以…

Flutter vscode环境如何进行真机测试

目录 1. 准备工作 1.1 安装Flutter和VS Code 1.2 安装必要的VS Code扩展 1.3 手机设置 2. 配置VS Code调试环境 3. 手机如何退出开发者模式 1. 准备工作 1.1 安装Flutter和VS Code 确保你已经在电脑上安装了Flutter SDK和VS Code。如果还没有&#xff0c;可以参考以下指…

项目文章 | Nature Commun蓝藻转录因子PhoB对磷/铁的营养元素限制的调控机制

近日&#xff0c;华中师范大学邱保胜教授团队在《Nature Communications》发表题为“Phosphorus deficiency alleviates iron limitation in Synechocystis cyanobacteria through direct PhoB-mediated gene regulation”文章&#xff0c;其重点研究了Synechocystis蓝藻转录因…

硬件产品经理

边端协调管理平台 主页模型管理配置管理设备管理设备检测组态数据服务传输通道服务 定义与范围&#xff1a; 边测&#xff1a;通常指的是边缘计算的测试&#xff0c;这里的“边缘”可以理解为离用户更近的计算节点或设备&#xff0c;如小 型数据中心、具有计算能力的小基站等。…

深度学习课程设计:构建未来的教育蓝图

深度学习课程设计&#xff1a;构建未来的教育蓝图 在近年来&#xff0c;深度学习已经从一项前沿的技术发展成为计算机科学领域不可或缺的一部分。随着其在多个行业中的应用日益增多&#xff0c;对深度学习教育的需求也在急剧上升。对于计划将深度学习纳入学术课程的教育者而言…

【WRF理论第二期】运行模型的基础知识

WRF理论第二期&#xff1a;运行模型的基础知识 1 Basics for Running the Model2 Geogrid程序2.1 Geogrid2.2 Terrestrial Input Data 3 Ungrid程序3.1 Ungrid3.2 Intermediate Files3.3 Required Fields 4 Metgrid程序参考 官方介绍-Basics for Running the Model 本博客主要…

耐用好用充电宝有哪些?畅销排行榜前四款充电宝推荐

在日常生活中&#xff0c;一款耐用且好用的充电宝是我们出行必备的利器&#xff0c;它可以为我们的手机、平板等设备提供持续的电力支持。然而&#xff0c;在市面上琳琅满目的充电宝品牌中&#xff0c;究竟哪些才是真正耐用又好用的选择&#xff1f;为了帮助大家更好地了解市场…

BubbleML: A Multiphase Multiphysics Dataset and Benchmarks for Machine Learning

我们使用以下六个分类标准: 研究方法: 这个标准根据如何收集和分析数据来区分研究方法。 实验研究,如参考文献[64]中的研究,涉及在受控环境中研究人员操纵变量并观察结果的物理实验。这种方法对于收集真实世界的数据很有价值,但可能成本高且耗时。模拟研究利用计算模型来模…

Qt5学习笔记(一):Qt Widgets Application项目初探

笔者长期使用MFC开发Windows GUI软件。随着软件向Linux平台迁移的趋势越发明朗&#xff0c;GUI程序的跨平台需求也越来越多。因此笔者计划重新抓一下Qt来实现跨平台GUI程序的实现。 0x01. 看看Qt Widgets Application项目结构 打开Qt5&#xff0c;点击“ New”按钮新建项目。…

2024.05.25 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、夏令营 | 2024年中物院暑期招生夏令营活动报名启动 夏令营 | 2024年中物院暑期招生夏令营活动报名启动 2、实习 | 新华三集团2025届实习体验生招聘全面启动&#xff01; 实习 | 新华三…

基于Kubernetes和DeepSpeed进行分布式训练的实战教程

目录 ​编辑 一、前期准备 二、部署和配置训练任务 三、编写和运行训练代码 四、监控和调优 五、代码实现 5.1. Dockerfile 5. 2. DeepSpeed 配置文件 (ds_config.json) 5.3. Kubernetes 部署文件 (deployment.yaml) 5.4. PyTorch 训练脚本 (train.py) 注意事项&am…

windows任意窗口置顶/前台显示/不被最小化或遮挡

问题&#xff1a;在办公时&#xff0c;当同时需要打开好几个重要的窗口&#xff0c;比如需要对若干个文件夹里的文件进行操作&#xff0c;几个窗口都需要一直在桌面前台显示&#xff0c;但这样的话容易在打开其他页面或是切其他窗口的时候被遮挡&#xff0c;因此考虑如何让几个…

我们如何用npm发布自己的插件包?详细的教程来了

一、什么是npm插件&#xff1f; npm&#xff08;“Node 包管理器”&#xff09;是 JavaScript 运行时 Node.js 的默认程序包管理器。npm插件是指通过npm安装的第三方包&#xff0c;可以在Node.js项目中直接使用。这些插件涵盖了各种领域&#xff0c;包括Web开发、数据测试、构建…

如何把linux安装到单片机中

1.如何把linux安装到单片机中 将Linux安装到单片机中通常不是一个直接的过程&#xff0c;因为单片机&#xff08;如51系列、STC系列等&#xff09;的硬件资源和处理能力有限&#xff0c;而Linux是一个为更强大硬件平台&#xff08;如个人电脑、服务器&#xff09;设计的操作系…

用于精准治疗和预防细菌感染的生物功能脂质纳米颗粒

引用信息 文 章&#xff1a;Biofunctional lipid nanoparticles for precision treatment and prophylaxis of bacterial infections. 期 刊&#xff1a;Science Advances&#xff08;影响因子&#xff1a;13.6&#xff09; 发表时间&#xff1a;2024年4月5日 作 者&a…