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

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

news 文章来源：https://blog.csdn.net/apple_67445472/article/details/130380627 2025/4/21 20:11:11

目录

模块化编程

基本介绍

模块化编程原理示意图

模块化编程分类

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

idea使用 ( 二 ) 创建java项目

3.创建java项目 3.1.创建普通java项目 3.1.1.打开创建向导 接 2.3.1.创建新的项目 也可以 从菜单选择建立项目 会打开下面的选择界面 3.1.2.不使用模板 3.1.3.设置项目名 Project name : 项目名 Project location : 项目存放的位置 确认创建 3.1.4.关闭tips 将 Dont s…...

编程日记 2023/5/31 9:18:45

RabbitMq-接收消息+redis消费者重复接收

在接触RammitMQ时&#xff0c;好多文章都说在配置中设置属性 # rabbitmq 配置 rabbitmq:host: xxx.xxx.xxx.xxxport: xxxxusername: xxxpassword: xxxxxx## 生产端配置# 开启发布确认,就是confirm模式. 消费端ack应答后,才将消息从队列中删除#确认消息已发送到队列(Queue)pub…...

编程日记 2023/4/30 9:08:22

Orangepi Zero2 全志H616简介

为什么学 学习目标依然是Linux 系统 &#xff0c;平台是 ARM 架构 蜂巢快递柜&#xff0c;配送机器人&#xff0c;这些应用场景用C51,STM32单片机无法实现 第三方介入库的局限性&#xff0c;比如刷脸支付和公交车收费设备需要集成支付宝SDK&#xff0c;提供的libalipay.so 是…...

编程日记 2023/4/30 9:03:20

Golang每日一练(leetDay0047)

目录 138. 复制带随机指针的链表 Copy List with Random-pointer &#x1f31f;&#x1f31f; 139. 单词拆分 Word Break &#x1f31f;&#x1f31f; 140. 单词拆分 II Word Break II &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &…...

编程日记 2023/4/30 8:58:19

HCL Nomad Web 1.0.7发布和新功能验证

大家好&#xff0c;才是真的好。 要问在HCL Notes/Domino系列产品中&#xff0c;谁更新得最快&#xff0c;那么答案一定是HCL Nomad Web。 你看上图右边&#xff0c;从1.0.1更新到1.0.7&#xff0c;都没花多少时间。 从HCL Nomad Web 1.0.5版本开始&#xff0c;可以支持直接…...

编程日记 2023/4/30 8:53:18

春招网申简历填写三技巧

网申第一关很重要&#xff0c;不夸张的说网申决定了你的笔试机会&#xff0c;从如信银行考试中心了解到&#xff0c;银行网申筛选过程中&#xff0c;有机器筛选人工筛选两道程序&#xff0c;掌握填写技巧后对提升简历通过率有较大帮助&#xff0c;一定要把握住&#xff0c;关于…...

编程日记 2023/4/30 8:48:17

计算机网络基础知识总结

经过学习我们可以知道: 关于计算机网络: ip地址端口号协议协议分层TCP五层协议协议封装两台计算机之间的通信 目录 ip地址 端口号 协议 协议分层 五层协议体系结构 (1) 应用层 (2) 运输层 (3) 网络层 (4)数据链路层 (5)物理层 封装&分用 两台主机之间的通信 …...

编程日记 2023/4/30 8:43:16

（下）苹果有开源，但又怎样呢？

一开始&#xff0c;因为 MacOS X &#xff0c;苹果与 FreeBSD 过往从密&#xff0c;不仅挖来 FreeBSD 创始人 Jordan Hubbard&#xff0c;更是在此基础上开源了 Darwin。但是&#xff0c;苹果并没有给予 Darwin 太多关注&#xff0c;作为苹果的首个开源项目&#xff0c;它算不上…...

编程日记 2023/4/30 8:38:15

row_number 和 cte 使用实例：考场监考安排

row_number 和 cte 使用实例&#xff1a;考场监考安排 考场监考安排使用 cte 模拟两个表的原始数据使用 master..spt_values 进行数据填充优先安排时长较长的考试使用 cte 安排第一个需要安排的科目统计老师已有的监考时长尝试使用 cte 递归&#xff0c;进行下一场考试安排&…...

编程日记 2023/4/30 8:33:14

2023天梯赛记录

文章目录 L2-001 紧急救援L2-002 链表去重L2-004 这是二叉搜索树吗&#xff1f;L2-005 集合相似度L2-006 树的遍历L2-007 家庭房产L2-010 排座位L2-011 玩转二叉树L2-012 关于堆的判断L2-013 红色警报L2-014 列车调度L2-016 愿天下有情人都是失散多年的兄妹L2-019 悄悄关注L2-0…...

编程日记 2023/4/30 8:28:13