JavaScript模块系统入门教程

news2024/11/16 14:57:17

🧑‍🎓 个人主页:《爱蹦跶的大A阿》

🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

目录

✨ 前言

✨ 正文

一、模块 (Module) 简介

什么是模块

导出与导入

默认导出

重命名导入/导出

模块的路径

package.json

总结

二、JavaScript动态导入模块

动态导入

按需加载

条件加载

导入合并

总结

✨ 结语


✨ 前言

        随着JavaScript项目越来越复杂,代码的模块化组织变得极为重要。合理地拆分代码到不同的文件模块中,可以让项目更易维护和扩展。

        本文将详细介绍JavaScript的模块系统,包括ES模块的语法、导入和导出、模块路径等等。这些都是现代JavaScript项目不可或缺的知识点。

        通过学习本文提供的详实指导,你将可以自如地使用模块系统组织项目,享受它带来的诸多好处。

✨ 正文

一、模块 (Module) 简介

什么是模块

模块是封装细节,对外提供接口的代码单元。JavaScript模块可以将代码分离到不同的文件中,实现模块化开发。

导出与导入

使用export关键字可以导出变量或函数,使其可供其他模块导入:

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`); 
}

使用import可以导入模块: 

// 📁 main.js
import {sayHi} from './sayHi.js';

sayHi('John'); // Hello, John!

被导入的模块都有自己的本地作用域,不会污染全局空间。

默认导出

每个模块都可以有一个default默认导出:

// 📁 user.js
export default class User {
  // ...
};

导入默认导出时不需要花括号:

// 📁 main.js 
import User from './user.js';

重命名导入/导出

可以使用as关键字来重命名:

export {sayHi as hi};

import {hi as sayHi} from './say.js';

模块的路径

导入路径可以是相对路径或绝对路径,.js扩展名可以省略。

模块系统还可以识别文件 URL 或 npm 模块。

导入路径可以是:

  • 相对路径 './say'
  • 绝对路径 'https://...say'
  • 模块路径 'npm-module'

.js 扩展名可以省略。

package.json

package.json"main" 字段指定了模块的默认文件。这样可以直接导入模块名:

import 'my-module';

package.json 文件可以指定 "main" 字段,表示默认文件:

{
  "main": "main.js"
}

这样就可以直接import "module-name"而不需要相对路径了。

总结

  • 模块化优于全局变量,可以明确依赖关系
  • export导出,import导入
  • 默认导出最为常用
  • 路径可以是相对,绝对,或模块名
  • package.json指定默认入口文件

模块是组织 JavaScript 代码的现代方式,应该掌握使用。

二、JavaScript动态导入模块

动态导入

除了静态导入模块,我们还可以用动态语法按需导入:

import('./module.js')
  .then(module => {
    // 使用模块
  });

import()函数会在需要时才加载模块并返回 promise。

按需加载

动态导入非常适合按需加载:

button.addEventListener('click', async () => {

  let module = await import('./dialog.js');

  module.open();
  
});

点击按钮时才去导入对话框模块,优化加载性能。

条件加载

可以根据条件动态加载:

if(needModule) {
  import('./module.js')
    .then(...); 
} else {
  // ...
}

这样只有在需要时才去加载模块。

导入合并

动态导入会自动合并,不会重复加载同一模块:

import('./module.js');
import('./module.js'); 

// 模块只会加载一次

总结

  • 动态导入语法为import()
  • 可以按需加载模块,优化性能
  • 允许根据条件进行加载
  • 自动合并重复导入调用

动态导入是提升模块灵活性的方式,可以根据需要进行按需、懒加载。

 

✨ 结语

       JavaScript的模块系统为我们带来了实现模块化开发的重要能力。合理利用好它的各项语法,可以让代码组织更加清晰,依赖关系明确,扩展性强。

        希望通过本文你可以对ES模块有一个全面系统的理解,并将它运用到项目中去。这将极大地提升你的JavaScript编码水平,使项目的维护更加轻松高效。

 

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

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

相关文章

uniapp导入uView组件库

目录 准备工作 1. 新建一个项目 2. 导入uview组件库 3. 关于SCSS 配置步骤 1. 引入uView主JS库 2. 在引入uView的全局SCSS 3. 引入uView基础样式 4. 配置easycom组件模式 添加效果实验运行即可成功 准备工作 1. 新建一个项目 2. 导入uview组件库 在进行配置之前&#x…

防御保护---安全策略

文章目录 目录 一.安全策略概述 概述: 安全策略的作用: 安全策略与传统防火墙的区别 二.案例分析 练习 一.安全策略概述 概述: 防火墙安全策略的作用在于加强网络系统的安全性,保护网络免受恶意攻击、非法访问和数据泄露的威胁。…

postman对接口进行加密解密——实战案例

背景 我们在使用postman进行接口测试的时候,尤其是对整个项目主流程的接口化测试,往往会涉及到接口的加密解密。如:在登录的时候,我们可能需要针对密码进行加密传输才能成功调用接口,那么这种情况该如何处理呢&#x…

从零开发短视频电商 Tesseract OCR识别增强

文章目录 概要图像预处理阶段默认反转图像重新缩放二值化噪音消除膨胀/腐蚀旋转/偏移校正边框缺少边框边框太大扫描边框去除 透明度/Alpha通道 引擎处理阶段语言模型配置提高识别速度词典、单词列表和模式表格识别 使用 Tesseract OCR 的 GUI 和其他项目 原文如下: …

《动手学深度学习(PyTorch版)》笔记4.7

Chapter4 Multilayer Perceptron 4.7 Forward/Backward Propagation and Computational Graphs 本节将通过一些基本的数学和计算图,深入探讨反向传播的细节。首先,我们将重点放在带权重衰减( L 2 L_2 L2​正则化)的单隐藏层多层…

【docker】linux系统docker的安装及使用

一、docker应用的安装 1.1 安装方式 Docker的自动化安装,即使用提供的一键安装的脚本,进行安装。 官方的一键安装方式:curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 国内 daocloud一键安装命令:curl -s…

VSCode Debug 参数设置说明

如果想在vscode中debug一个项目,比如python3 run.py --args 这个时候你需要着重关注几个参数,参数用两个双引号分开,不能有空格。 cwd :运行代码的基础目录env: 设置环境变量 PYTHONPATH: 设置项目用到的模块搜索路径&#xff…

数学建模论文笔记

一、概述 1. 数学建模论文组成 论文电子版:摘要页、正文、参考文献、附录支撑材料:源程序代码以及调用说明、中间结果、支撑数据等首页:论文题目、摘要、关键词论文正文:问题重述、问题分析、模型假设、符号说明、模型建立与求解…

@JsonIgnore的使用及相关问题的解决

目录 1 前言 2 对比及其使用方法 3 遇到的相关问题及解决方法 1 前言 在我们编写的后端项目中,有时候可能需要将某个实体类以JSON格式传送给前端,但是其中可能有部分内容我们并不想传送,这时候我们选择将这部分内容变成Null,这…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-1事件处理

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>事件处理</title> </head><body> <input id"btn" type"button" name"btn" value"提交" /> <…

Backtrader 文档学习-Bracket Orders

Backtrader 文档学习-Bracket Orders 1. 概述 组合订单类型是一个非常宽泛的订单类别&#xff0c;只要brokder支持的订单类型都可以&#xff0c; 包括(Market, Limit, Close, Stop, StopLimit, StopTrail, StopTrailLimit, OCO)。 该功能用于回测&#xff0c;交互broker Brac…

Java集合-Map接口(key-value)

Map接口的特点&#xff1a;①KV键值对方式存储②Key键唯一&#xff0c;Value允许重复③无序。 Map有四个实现类&#xff1a;1.HashMap类2.LinkedHashMap类3.TreeMap类4.Hashtable类 1.HashMap类&#xff1a; 存储结构&#xff1a;哈希表 数组Node[ ] 链表&#xff08;红黑…

雨云美国二区云服务器评测

雨云美国二区云服务器评测 官网直接百度搜索雨云就行 我买的时候比较便宜&#xff0c;三个月3.4元&#xff0c;1C1G对于我这种小网站来说够用了 本期测评服务器配置 CPU&#xff1a;1核 内存&#xff1a;1G 硬盘&#xff1a;Linux系统20G&#xff0c;win系统30G 流量&…

Qt中Widget样式表实现圆弧边框

第一步 第二步 第三步 第四步 //插入border-radius: 10px; border: 2px solid #000; 效果图

Elasticsearch介绍以及基本操作

目录 一、Elasticsearch介绍 二、关于Elasticsearch的基本操作 &#xff08;1&#xff09;索引操作 &#xff08;2&#xff09;文档操作 三、域的属性 &#xff08;1&#xff09;index &#xff08;2&#xff09;type &#xff08;3&#xff09;store 一、Elasticsearc…

vue3+elementPlus pc和小程序ai聊天文生图

websocket封装可以看上一篇文章 //pc端 <template><div class"common-layout theme-white"><el-container><el-aside><div class"title-box"><span>AI Chat</span></div><div class"chat-list&…

使用vue_cli脚手架创建Vue项目(cmd和图形化方式)

使用vue_cli脚手架创建Vue项目&#xff08;cmd和图形化方式&#xff09; 创建项目(cmd方式) vue create vue_cli1.方向键选择manually select feature(手动选择方式创建)&#xff0c;回车 2.按空格键选择需要的组件&#xff1a;Babel、PWA、Router、Vuex、CSS&#xff0c;回…

【LeetCode】112. 路径总和(简单)——代码随想录算法训练营Day18

题目链接&#xff1a;112. 路径总和 题目描述 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &#xff1b;否则&…

Pandas.Series.product() 乘积(累乘积) 详解 含代码 含测试数据集 随Pandas版本持续更新

关于Pandas版本&#xff1a; 本文基于 pandas2.2.0 编写。 关于本文内容更新&#xff1a; 随着pandas的stable版本更迭&#xff0c;本文持续更新&#xff0c;不断完善补充。 传送门&#xff1a; Pandas API参考目录 传送门&#xff1a; Pandas 版本更新及新特性 传送门&…

以太网与PON网络的巅峰对决

在这网络的江湖中&#xff0c;各路江湖豪侠都神色匆忙地往同一个地方赶&#xff0c;豪侠们脸上都充满期待和焦虑&#xff0c;生怕错过了什么。这个地方就是传说中的园区网&#xff0c;因为在那里万众期待已久的以太网与PON网络的巅峰对决“将在今天上演。 一方是以太网大侠&am…