【Java前端技术栈】模块化编程

一、基本介绍

1.基本介绍

1 传统非模块化开发有如下的缺点:(1)命名冲突 (2)文件依赖

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

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

4 模块化也是 ES6 的新特性

2.模块化编程原理示意图

3.模块化编程分类

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

2.ES6 模块化规范

二、ES5 CommonJS 模块化规范

1.介绍

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

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

2.实例

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

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

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

function.js

//定义对象,变量,常量, 函数
const sum = function (a, b) {return parseInt(a) + parseInt(b);
}const sub = function (a, b) {return parseInt(a) - parseInt(b);
}let name = "韩顺平教育";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.js

//导入
//1. 在es5中, 我们通过 require 就包 对应.js中的
//数据/对象,引入
//2. 我们使用的时候,通过m.属性 就可以使用
//3. 如果我们导入时,不需要所有的,可以导入部分数据
const m = require("./function.js");const {sub} = require("./function.js");//只要sub属性//使用
//老韩说明: 只要这里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));

use.html使用js的方法回顾

<!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>

要看运行效果需要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" 导入模块

common1

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

.use common1

//导入
/*** 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())

common2

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

use common2

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

common3

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

use common3

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

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

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

相关文章

torch.utils.data

整体架构 平时使用 pytorch 加载数据时大概是这样的&#xff1a; import numpy as np from torch.utils.data import Dataset, DataLoaderclass ExampleDataset(Dataset):def __init__(self):self.data [1, 2, 3, 4, 5]def __getitem__(self, idx):return self.data[idx]def…

第2.2章 StarRocks表设计——排序键和数据模型

该篇文章介绍StarRocks-2.5.4版本的数据模型相关内容&#xff0c;有误请指出~ 目录 一、数据模型概述 1.1 四种模型 1.2 排序键 1.2.1 概述 1.2.2 分类 1.2.3 注意事项 二、明细模型 2.1 概述 2.2 适用场景 2.3 建表语句及说明 三、聚合模型 3.1 概述 3.2 适用场…

网络入门基础

本专栏内容为&#xff1a;Linux学习专栏&#xff0c;分为系统和网络两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握Linux。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;网络 &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

[AIGC] JVM内存结构中的方法区主要存储哪些信息?

在JVM的内存结构中&#xff0c;方法区&#xff08;Method Area&#xff09;被视为JVM的永久代。它主要负责存储已经被虚拟机加载的类信息、常量、静态变量以及编译器编译后的代码等数据。具体可以分为以下几个部分&#xff1a; 类信息 这部分信息包括类数据&#xff08;如类名…

32FLASH闪存

目录 一&#xff0e;FLASH简介 二&#xff0e;代码实现 &#xff08;1&#xff09;读写内部FLASH &#xff08;2&#xff09;读取芯片ID 一&#xff0e;FLASH简介 存储器地址要记得累 系统存储器是原厂写入的Bootloader程序&#xff08;用于串口下载&#xff09;&#xff0…

04.结构体和结构体数组

1.结构体 struct stu{int id;string name;float grade; };2.结构体数组的排序 sort算法如果是非自定义类型可以缺省&#xff0c;默认升序排序&#xff0c;但自定义类型必须自己重写比较规则&#xff0c;因为系统没法知道你怎么比较 sort(首元素地址&#xff0c;尾元素下一位…

Python 写网络监控

大家好&#xff01;我是爱摸鱼的小鸿&#xff0c;关注我&#xff0c;收看每期的编程干货。 网络监控是保障网络可靠性的一项重要任务。通过实时监控网络性能&#xff0c;我们可以及时发现异常&#xff0c;迅速采取措施&#xff0c;保障网络畅通无阻。本文将以 Python为工具&…

Debug系列 GroupNorm和BatchNorm出现Nan或inf的情况

Debug系列 GroupNorm和BatchNorm出现Nan或inf的情况 前言这两个函数做了什么可能出现的问题解决方法train和evalbatchsize或channel设置过小可训练参数的问题数值溢出其它的方法 前言 在复现别人论文的实验结果时&#xff0c;按照README乖乖做完之后&#xff0c;却发现损失函数…

Windows / Linux dir 命令

Windows / Linux dir 命令 1. dir2. dir *.* > data.txt3. dir - list directory contentsReferences 1. dir 显示目录的文件和子目录的列表。 Microsoft Windows [版本 10.0.18363.900] (c) 2019 Microsoft Corporation。保留所有权利。C:\Users\cheng>dir驱动器 C 中…

线性代数:向量组的秩

目录 回顾“秩” 及 向量组线性表示 相关特性 向量组的秩 例1 例2 矩阵的“秩” 及 向量组线性表示 相关特性 向量组的秩 例1 例2

@Async引发的spring循环依赖的问题,

今天发现一个很有意思的问题&#xff0c;正常解决项目中产生的循环依赖&#xff0c;是找出今天添加的注入代码&#xff0c;然后一个个加lazy试过去&#xff0c;会涉及到类中新增的注入 但是今天修改了某个serviceimpl的方法&#xff0c;加入了Async方法后 就发生循环依赖了 ai…

【职场经验】关于自动化用例设计的思考

为什么要设计用例&#xff1f; 作为质量保证(QA)人员&#xff0c;设计测试用例的重要性不亚于开发人员编写技术实现方案。如果实现方案设计不周&#xff0c;编码阶段将可能遇到许多问题&#xff1b;同理&#xff0c;如果我们未能设计测试用例&#xff0c;产品质量就难以得到充…

如何实现一个K8S DevicePlugin?

什么是device plugin k8s允许限制容器对资源的使用&#xff0c;比如CPU和内存&#xff0c;并以此作为调度的依据。 当其他非官方支持的设备类型需要参与到k8s的工作流程中时&#xff0c;就需要实现一个device plugin。 Kubernetes提供了一个设备插件框架&#xff0c;你可以用…

机器视觉系统选型-为什么还要选用工业光源控制器

工业光源控制器最主要的用途是给光源供电&#xff0c;实现光源的正常工作。 1.开关电源启动时&#xff0c;电压是具有波浪的不稳定电压&#xff0c;其瞬间峰值电压超过了LED灯的耐压值&#xff0c;灯珠在多次高压冲击下严重降低了使用寿命&#xff1b; 2.使用专用的光源控制器&…

【算法学习】搜索算法之深度优先搜索

深度优先搜索 DFS 1.算法介绍 深度优先搜索(DFS)算法是一种用于遍历或搜索树或图的算法。它的基本思想是尽可能深地搜索图的分支,直到到达叶节点或无法再深入为止,然后回溯到前一个节点,继续探索其他分支。这种搜索策略可以确保图中的每个节点都被访问到,除非它是一个环。…

inBuilder低代码平台新特性推荐-第十六期

各位友友们&#xff0c;大家好~今天来给大家介绍一下inBuilder低代码平台社区版中的系列特性之一 —— 构件热加载&#xff01; 01 概述 构件热加载指的是&#xff1a;构件代码修改后&#xff0c;无需重启应用&#xff0c;通过WebIDE的部署或发布工程后&#xff0c;即可正常调…

08-静态pod(了解即可,不重要)

我们都知道&#xff0c;pod是kubelet创建的&#xff0c;那么创建的流程是什么呐&#xff1f; 此时我们需要了解我们k8s中config.yaml配置文件了&#xff1b; 他的存放路径&#xff1a;【/var/lib/kubelet/config.yaml】 一、查看静态pod的路径 [rootk8s231 ~]# vim /var/lib…

代码的复用——Mixin使用例子

Mixin&#xff08;混入&#xff09;是一种在Sass和Vue.js等框架中常用的技术&#xff0c;用于分发和重用代码。以下是Sass和Vue.js中Mixin的使用举例。 在Sass中&#xff0c;Mixin允许你定义可以在整个样式表中重复使用的样式。以下是一个Sass中Mixin的使用例子&#xff1a; …

华为配置直连三层组网直接转发示例

华为配置直连三层组网直接转发示例 组网图形 图1 配置直连三层组网直接转发示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件扩展阅读 业务需求 企业用户接入WLAN网络&#xff0c;以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时&#xff…

标题:从预编译到链接:探索C/C++程序的翻译环境全貌

引言 在软件开发的世界里&#xff0c;我们通常会遇到两种不同的环境——翻译环境与运行环境。今天&#xff0c;我们将聚焦于前者&#xff0c;深入剖析C/C程序生命周期中至关重要的“翻译环境”&#xff0c;即从源代码到可执行文件这一过程中涉及的四个关键阶段&#xff1a;预编…