当前位置： 首页 > news >正文

模块化编程原理示意图--CommonJS 模块编程--ES6 模块编程思路分析/图解--三种导出形式--全部代码示例

news 2026/2/9 7:02:24

目录

模块化编程

基本介绍

模块化编程原理示意图

模块化编程分类

CommonJS 模块编程

介绍

应用实例

1. 需求说明

2. 思路分析/图解

 3. 代码实现

 function.js

use.html

use.js

ES6 模块编程

介绍

需求说明

思路分析/图解

代码实现

common.js 

use_common.js

其它导出形式--直接导出

common2.js

use_common2.js

其它导出形式--默认导出

common3.js

use_common3.js--导入默认导出模块/数据

模块化编程

基本介绍

1 传统非模块化开发有如下的缺点：(1)命名冲突 (2)文件依赖[代码演示]

2 Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块

3 Javascript 使用"模 块"（module）的概念来实现模块化编程, 解决非模块化编程问题

4 模块化 也是 ES6 的新特性

模块化编程原理示意图

 

 

模块化编程分类

  1. CommonJS 模块化规范/ES5 的写法
  2.  ES6 模块化规范

CommonJS 模块编程

介绍

1. 每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，都是私有的，对其他 js 文件不可见

2. CommonJS 使用 module.exports={} / exports={} 导出 模块 , 使用 let/const 名称 =require("xx.js") 导入模块

应用实例

1. 需求说明

1) 编写 functions.js , 该文件有函数,变量, 常量, 对象, 数组。。。

2) 要求在 use.js , 可以使用到 function.js 中定义的 函数/变量/常量/对象

3) 请使用模块化编程的方式完成, 将各种写法都写一下

2. 思路分析/图解

 3. 代码实现

 function.js

解读
1. module.exports 导出模块
2. 把你需要导出的数据, 写入到 {}中即可
3. 可以全部导出，也可以部分导出
4. 理解：相当于把我们导出的数据，当做一个对象
5. 如果属性名和函数/变量/对象..名字相同，可以简写
6. 有些前端， 简写 module.exports={} 成 exports={}

//定义对象,变量，常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "xxxx";const PI = 3.14;const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}//导出
/*
解读
1. module.exports 导出模块
2. 把你需要导出的数据, 写入到 {}中即可
3. 可以全部导出，也可以部分导出
4. 理解：相当于把我们导出的数据，当做一个对象
5. 如果属性名和函数/变量/对象..名字相同，可以简写
6. 有些前端， 简写 module.exports={} 成 exports={}*/
exports = {sum,sub,name,PI
}
// module.exports = {
//     sum,
//     sub,
//     name,
//     PI
// }
// module.exports = {
//     sum: sum,
//     sub: sub,
//     myname: name,
//     PI: PI
// }

use.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>use</title><!--在html文件中要使用js--><script type="text/javascript" src="./function.js"></script>
</head>
<body></body>
</html>

use.js

解读
1. 在es5中, 我们通过 require 就包 对应.js中的数据/对象，引入
2. 我们使用的时候，通过m.属性 就可以使用
3. 如果我们导入时，不需要所有的，可以导入部分数据

//导入
//解读
//1. 在es5中, 我们通过 require 就包 对应.js中的
//数据/对象，引入
//2. 我们使用的时候，通过m.属性 就可以使用
//3. 如果我们导入时，不需要所有的，可以导入部分数据
const m = require("./function.js");const {sub} = require("./function.js");//使用
//说明: 只要这里idea可以识别变量/函数/对象, 说明OK
console.log(m.sub("100","200"));
console.log(m.sum(10,90));
console.log(m.name)
console.log(m.PI);
console.log(sub(19,8));

4. 要看运行效果，需要 Node 环境, node 环境这里为了简单, 只要 use.js 可以解析 sum 和 sub 说明是正确

ES6 模块编程

介绍

1、ES6 使用 (1)export {名称/对象/函数/变量/常量} (2) export 定义 = (3) export default {}导出模块

2、使用 import {} from "xx.js" / import 名称 form "xx.js" 导入模块

2 应用实例-批量导出形式

需求说明

1) 编写 common.js , 该文件有函数,变量, 常量, 对象

2) 要求在 use_common.js , 可以使用到 common.js 中定义的 函数/变量/常量/对象

3) 请使用 ES6 模块化编程的方式完成

思路分析/图解

代码实现

common.js 

1. export 就是导出模块/数据
 2. 可以全部导出，也可以部分导出

//定义对象,变量，常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "xxxx";const PI = 3.14;const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}//es6的导出模块/数据
/*** 解读* 1. export 就是导出模块/数据* 2. 可以全部导出，也可以部分导出*/
export {sum,sub,name,monster
}

use_common.js

1. 我可以{} 来接收导出的数据
2. 可以全部接收，也可以选择的接收
3. 细节： 这时要求导入的名称和导出的名称一致

//导入
/*** 解读* 1. 我可以{} 来接收导出的数据* 2. 可以全部接收，也可以选择的接收* 3. 细节： 这时要求导入的名称和导出的名称一致*/
import {sub,sum,name} from "./common";
import {monster} from "./common";//使用
console.log(sumx(10, 90));
console.log(name);
console.log(monster.hi())

4. 说明: ES6 的模块化，需要用 Babel 转码 ES5 后再执行, 我们后面在整体项目中使用
即可, 只要 es6_use.js 可以识别变量名说明是正确的

其它导出形式--直接导出

common2.js

说明：如果在定义时，导出的数据， 在导入时，要保持名字一致

//定义对象,变量，常量, 函数//定义sum函数时，就直接导出
//说明：如果在定义时，导出的数据， 在导入时，要保持名字一致
export const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "xxxx";const PI = 3.14;const monster = {name: "牛魔王",age: 500,hi() {console.log("hi 你好 牛魔王");}
}

use_common2.js

没有导出的数据, 是不可以导入

//可以导入模块/数据
import {sum}  from "./common2";
//没有导出的数据, 是不可以导入
//import {sub}  from "./common2";console.log(sum(10,30));

其它导出形式--默认导出

common3.js

如果是默认导出， 导入的时候，使用的语法
可以这里理解, 类似把 {} 当做一个对象导出

//定义对象,变量，常量, 函数//演示默认导出
//如果是默认导出， 导入的时候，使用的语法
//可以这里理解, 类似把 {} 当做一个对象导出export default {sum(a,b) {return parseInt(a) + parseInt(b);},sub(a,b) {return parseInt(a) - parseInt(b);}
}

use_common3.js--导入默认导出模块/数据

好处是 m 名称是可以自己指定的.
以为m 名字, 程序员可以自己指定，因此我们就可以解决名称冲突问题

//导入默认导出模块/数据
//好处是 m 名称是可以自己指定的.
//以为m 名字, 程序员可以自己指定，因此我们就可以解决名称冲突问题
import m from "./common3";//使用 m.xx
console.log(m.sub(80,90));

相关文章：

模块化编程原理示意图--CommonJS 模块编程--ES6 模块编程思路分析/图解--三种导出形式--全部代码示例

目录 模块化编程 基本介绍 模块化编程原理示意图 模块化编程分类 CommonJS 模块编程 介绍 应用实例 1. 需求说明 2. 思路分析/图解 3. 代码实现 function.js use.html use.js ES6 模块编程 介绍 需求说明 思路分析/图解 代码实现 common.js use_common.js …...

编程日记 2023/5/30 1:42:38

Ansys Zemax | 如何模拟双折射偏振器件

这篇文章介绍了什么是双折射现象、如何在OpticStudio中模拟双折射 (birefringence)、如何模拟双晶体的双折射偏振器以及如何计算偏振器的消光比。&#xff08;联系我们获取文章附件&#xff09; 什么是双折射现象 一般的光学材料都是均匀的各向同性的&#xff0c;也就是说无论光…...

编程日记 2023/4/30 10:48:44

Java关键字之：this

一、this关键字的使用 1、this可以用来修饰、调用&#xff1a;属性、方法、构造器 2、this修饰属性和方法 this理解为&#xff1a;当前对象 或 当前正在创建的对象 在类的方法中。我们可以使用“this.属性"或”this.方法“的方式。调用当前对象属性或者方法。但是&#…...

编程日记 2023/4/30 10:43:43

嵌入式Linux驱动开发（九）Linux中断

1. Linux中断简介 1&#xff09;中断号 linux内核中使用一个int变量表示中断号。 2&#xff09;申请中断&#xff1a; 该函数可以自动激活中断&#xff0c;但是可能引起睡眠&#xff0c;所以需要小心使用。 int request_irq(unsigned int irq, //要申请中断的中断号irq_ha…...

编程日记 2023/4/30 10:38:42

数据库系统-并发控制

文章目录 一、为什么要并发控制1.2 并发控制解决的问题1.2.1 脏读1.2.2 幻读1.2.3 不可重复读1.2.4 数据丢失问题 二、事务调度及可串行性2.1 事务2.1.1 事务的宏观2.1.2 事务的微观2.1.3 事务的特性 ACID 2.2 事务调度与可串行性2.3 冲突可串行化判定 三、基于封锁的并发控制方…...

编程日记 2023/4/30 10:33:41

Java8 教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Java 8 (又称为 jdk 1.8) 是 Java 语言开发的一个主要版本。 Java 8 是oracle公司于2014年3月发布&#xff0c;可以看成是自Java 5 以来最具革命性的版本。Java 8为Java语言、编译器、类库、开发工具与JVM带来了大量新特性。 Java 8入门教程 - 从简单的步骤了解Java…...

编程日记 2023/4/30 10:28:40

从零开始学架构——高可用存储架构

双机架构 存储高可用方案的本质都是通过将数据复制到多个存储设备&#xff0c;通过数据冗余的方式来实现高可用&#xff0c;其复杂性主要体现在如何应对复制延迟和中断导致的数据不一致问题。因此&#xff0c;对任何一个高可用存储方案&#xff0c;我们需要从以下几个方面去进…...

编程日记 2023/4/30 10:23:38

连ChatGPT都不懂的五一调休，到底怎么来的？

今天是周几&#xff1f; 你上了几天班了&#xff1f; 还要上几天班放假&#xff1f; 五一啥安排&#xff1f; 出行的票抢到了吗&#xff1f; 调休到底是谁发明的&#xff1f;&#xff01; 五一劳动节是要劳动吗&#xff1f; 为什么昨天是周一&#xff0c;今天还是周一&a…...

编程日记 2023/4/30 10:18:37

AES工作流程

工作流程 模式 1&#xff1a;加密 ⚫ 复位EN 重置AES模块 ⚫ 设置模式寄存器mode[1:0]00&#xff0c;设置流数据处理模式寄存器CHMOD[1:0] ⚫ 写AES_KEYRx寄存器&#xff0c;CTR和CBC模式下写AES_IVRx寄存器 ⚫ 写EN1&#xff0c;使能AES ⚫ 写AES_DINR 寄存器4次 ⚫ 等待CCF标…...

编程日记 2023/4/30 10:13:36

C++11

C11 统一的列表初始化 在介绍这里的列表初始化之前&#xff0c;首先我认为这是一个比较鸡肋的功能特性&#xff0c;而且使用起来会和之前C98时有些区别。 // 首先可以定义普通的内置类型的变量int x1 1;int x2 { 1 };int x3{ 1 }; // 这样看起来着实有些怪int arry1[] { 1,…...

编程日记 2023/4/30 10:08:35

ubuntu18.04 配置zlmediakit 支持ffmpeg转码记录

1、zlmediakt 默认不支持ffmepg转码&#xff0c;需要在根目录下的CamkeLists.txt里面option(ENABLE_FFMPEG "Enable FFmpeg" OFF) 将OFF改成ON, 删除原有的build目录&#xff0c;sudo mkdir build. cd build,cmake .. 这样在编译生成文件夹release/linux/debug/生…...

编程日记 2023/4/30 10:03:34

H68K配置路由功能

系统环境Armbian ubuntu系统 参考 如何使用Debian/Ubuntu等Linux做软路由&#xff08;物理机版本&#xff0c;非虚拟机容器版&#xff09; - 知乎 https://zhuanlan.zhihu.com/p/587068225 按照他操作的结果,就是只有一个网卡正常 最后一顿操作就出现了我这么个配置 更新源…...

编程日记 2023/4/30 9:58:33

*2.5 迭代法的收敛阶与加速收敛方法

学习目标&#xff1a; 了解迭代法的基本概念和原理。学习者需要理解迭代法的基本概念和原理&#xff0c;包括迭代过程、迭代格式、收敛性等基本概念。 熟练掌握迭代法的收敛阶和收敛速度。学习者需要了解迭代法的收敛阶和收敛速度&#xff0c;掌握如何计算迭代法的收敛阶和收敛…...

编程日记 2023/4/30 9:53:32

仪表板展示 | X-lab开放实验室GitHub开源项目洞察大屏

背景介绍 X-lab开放实验室是一个开源软件产业开放式创新的共同体&#xff0c;由来自国内外著名高校、创业公司、部分互联网与IT企业的专家学者与工程师所构成&#xff0c;目前已在包括开源治理标准制定、开源社区行为度量与分析、开源社区流程自动化、开源全域数据治理与洞察等…...

编程日记 2023/4/30 9:48:31

【c语言】五大内存区域 | 堆区详解

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…...

编程日记 2023/4/30 9:43:30

【JavaScript】动态表格

&#x1f38a;专栏【 前端易错合集】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; &#x1f354;介绍 就是在输入框中输入数字后&#xff0c;再按…...

编程日记 2023/4/30 9:38:29

Css如何优雅的实现抽奖转盘

如图&#xff0c;抽奖转盘&#xff0c;可以拆分为几部分&#xff1a; 1.底部大圆&#xff1b; 2.中间小圆&#xff1b; 3.扇形区&#xff1b; 4.扇形内部奖品区&#xff1b; 5.抽奖按钮&#xff1b; 6.点击抽奖按钮时旋转动效及逻辑&#xff1b; 这其中&#xff0c;扇形区&am…...

编程日记 2023/4/30 9:33:28

在Java的小问题

问题1&#xff1a;如何在Java中创建一个对象&#xff1f; 解决方法&#xff1a; 在Java中&#xff0c;要创建一个对象&#xff0c;需要以下步骤&#xff1a; 创建一个类&#xff0c;定义对象的属性和行为。在类中定义一个构造函数&#xff0c;用于初始化对象的属性。在程序中…...

编程日记 2023/6/1 11:12:11

HashMap的扩容机制、初始化容量大小的选择、容量为什么是2的次幂

前置知识 先来看看HashMap中的成员属性 解释&#xff1a; size当前的容器中Entry的数量&#xff0c;也就是当前K-V的数量loadFactory装载因子&#xff0c;用来衡量HashMap满的程度&#xff0c;loadFactory的默认值是0.75threshold临界值&#xff0c;当实际KV数量超过threshol…...

编程日记 2023/4/30 9:23:25

[jenkins自动化2]: linux自动化部署方式之流水线(下篇)

目录 1. 引言: 2. 进阶操作 流水线 -> 2.1 简介: -> 2.2 最终效果图展示: -> 2.3 有没有心动, 真的像流水线一样, 实现了一键部署启动 3. 实现方式 3.1 下载几个插件 3.2 创建流水线任务 3.3 点击配置 3.4 根据流水线语法 写一个简单的helloworld 3.5 执行…...

编程日记 2023/6/1 3:27:09

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2026/1/29 10:22:28

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31