[JS设计模式] Module Pattern

随着应用程序和代码库的增长,保持代码的可维护性和模块化变得越来越重要。模块模式允许将代码分成更小的、可重用的部分。

除了能够将代码分割成更小的可重用部分之外,模块还允许将文件中的某些值保留为私有。默认情况下,模块内的声明范围(封装)为该模块。如果我们不显式导出某个值,那么该值在该模块之外不可用。这降低了在代码库的其他部分声明的命名冲突的风险,因为这些值在全局作用域中不可用。

ES2015引入了内置的JavaScript模块。模块是一个包含JavaScript代码的文件,与普通脚本相比在行为上有一些不同。

让我们看一个名为math.js的模块示例,其中包含数学函数。

// math.js
function add(x, y) {
  return x + y;
}
function multiply(x) {
  return x * 2;
}
function subtract(x, y) {
  return x - y;
}
function square(x) {
  return x * x;
}
// index.js
console.log(add(2, 3));
console.log(multiply(2));
console.log(subtract(2, 3));
console.log(square(2));

math.js 中定义了四个函数add,multiply,subtrack,square,我们想要在index.js中调用这几个函数。直接运行的话,会报错:Uncaught ReferenceError ReferenceError: add is not defined

请添加图片描述

为了使index.js能调用到math.js中的函数,则需要先将这几个函数导出。使用关键词export将函数导出。

// math.js
export function add(x, y) {
  return x + y;
}
export function multiply(x) {
  return x * 2;
}
export function subtract(x, y) {
  return x - y;
}
export function square(x) {
  return x * x;
}

仅仅将math.js中的函数export还不够,还需要在index.js中,将需要调用的函数导入。

// index.js
import { add, multiply, subtract, square } from "./math.js";

接下来,我们在运行一下,看看效果:

请添加图片描述

直接运行报错了。在node.js环境下,按上述简单的代码构成是不够的。

解决方案

1. npm init -y
2. 在package.json中添加"type": "module",

我的代码结构如下:

请添加图片描述

再次运行,结果如下:

请添加图片描述

可以看到,math.js中的4个显示声明的函数可以导出,index.js中也能正常导入这四个函数,并正常调用。

接下来,我们尝试下,如果在math.js中的变量不声明为export,看index.js是否还可以调用。

请添加图片描述

显然和我们预想的一致,不会奏效。

通过将值保留为模块私有,可以降低意外污染全局作用域的风险。不必担心模块使用者会意外覆盖模块内部的变量的值,这些变量可能与模块的私有变量具有相同的名称:它可以防止命名冲突

如果从模块导出的命名和当前文件的本地命名有冲突,怎么解决呢?

请添加图片描述

可以通过as关键字重命名被导入的函数名。

请添加图片描述

上述代码将addmultipy重命名为addValuesmultiplyValues。消除了命名冲突问题。

除了有我们上述代码中使用的命名导出外,还有默认导出

请添加图片描述

在math.js中将add函数声明为export default,可以在index.js中直接调用。如果默认导出的函数有命名冲突的话,可以直接在index.js中重命名

请添加图片描述

请添加图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

rabbitmq使用总结

1、进入rabbitmq的sbin目录,进入CMD 2、输入./rabbitmq-plugins enable rabbitmq_management启用管理服务。 3、输入./rabbitmqctl start_app启动服务。 查看是否启动成功 1、浏览器访问http://localhost:15672/ 下载erlang 地址如下: http://erla…

【PTA】L1-32 Left-pad (C++)

题目链接:L1-032 Left-pad 题目要求: 根据新浪微博上的消息,有一位开发者不满NPM(Node Package Manager)的做法,收回了自己的开源代码,其中包括一个叫left-pad的模块,就是这个模块…

MyBatis分页机制深度解析

前言 在企业项目的数据库操作中,分页查询是一个常见需求,尤其当数据量庞大时。MyBatis 作为 我们Java 开发者的持久层框架,为分页提供了灵活的支持。 本篇文章我们将深入探讨 MyBatis 的分页机制,使我们在实际开发项目中运用自如…

<JavaEE> TCP 的通信机制(三) -- 滑动窗口

目录 TCP的通信机制的核心特性 四、滑动窗口 1)什么是滑动窗口? 2)滑动窗口的作用是什么? 3)批量传输出现丢包如何处理? 1> 接收端ACK丢包 2> 发送端数据包丢包 4)适用性 TCP的通…

账号租号平台PHP源码,支持单独租用或合租使用

源码简介 租号平台源码,采用常见的租号模式。 平台的主要功能如下: 支持单独租用或采用合租模式; 采用易支付通用接口进行支付; 添加邀请返利功能,以便站长更好地推广; 提供用户提现功能;…

关于“Python”的核心知识点整理大全47

目录 16.1.10 错误检查 highs_lows.py highs_lows.py 16.2 制作世界人口地图:JSON 格式 16.2.1 下载世界人口数据 16.2.2 提取相关的数据 population_data.json world_population.py 16.2.3 将字符串转换为数字值 world_population.py 2world_population…

UWA社区年度大盘点

弹指间,2023年已接近尾声,这一年UWA社区为游戏行业开发者和期望步入游戏圈的学子们提供了多类型的社区服务,包括技术博客、问答、开源库、学堂、训练营、技术沙龙等。让我们一同回顾这一年来UWA的脚步,希望未来的每一步也都能有大…

2024年中职“网络安全“—数字调查取证(attack817.pcapng)

目录 ​1.通过分析数据包找出恶意用户最初访问HTTP服务的包号,将该值作为Flag值提交, Flag格式为flag{xxx}; 2.继续查看数据包文件分析出恶意用户扫描了哪些端口,将全部的端口号按照一定顺序作为Flag值,提示:注意端口…

什么是迁移学习(Transfer Learning)?定义,优势,方法

迄今为止,大多数人工智能(AI)项目都是通过监督学习技术构建的。监督学习是一种从无到有构建机器学习(ML)模型的方法,它对推动AI发展起到了关键作用。然而,由于需要大量的数据集和强大的计算能力…

传感器基础:传感器使用与编程使用(三)

目录 常用传感器讲解九--雨滴传感器具体讲解电路连接代码实现 常用传感器讲解十--光传感器根据亮度安排灯具体讲解电路连接代码实现 常用传感器讲解七--light cup(KY-008)具体讲解电路连接代码实现 常用传感器讲解十二--倾斜开关传感器(KY-02…

数据探查系列:如何进行有意义的探索性数据分析(EDA)

如何进行有意义的探索性数据分析(EDA) 目录 1. 设置 1.1 导入库1.2 导入数据1.3 数据集特征1.4 数据集属性 2. 探索训练集和测试集 2.1 训练集 - 快速概览2.2 训练集 - 基本统计2.3 测试集 - 快速概览2.4 测试集 - 基本统计 3. 特征分布4. 数据不平衡检查…

LaTeX OCR本地部署的免费开源的科学公式提取工具pix2tex

pix2tex - LaTeX OCR简介 pix2tex 是一个免费开源的github项目,通过创建一个基于学习的系统,该系统可以获取数学公式的图像并返回相应的LaTeX代。Web端支持上传图片,提取公式,并转换为LaTeX格式,本地部署支持docker Web和python,本人测试docker成功,测试python 安装失败…

源码补丁神器—patch-package

一、背景 vue项目中使用 vue-pdf 第三方插件预览pdf,书写业务代码完美运行,pdf文件内容正常预览无问题。后期需求有变,业务需求增加电子签章功能。这个时候pdf文件的内容可以显示出来,但是公司的电子签章无法显示。这令人沮丧&am…

大哥你做科研 做它有啥用啊|2024元旦快乐

昨天晚上吃饭补乐夏,听到二手玫瑰说“大哥你玩摇滚,玩它有啥用”背后的故事。 emm怎么说呢,就是,我突然想到做科研也是这样,所以回办公室以后在桌面记了这句话。 听答辩,那些专家都会问 诶你做这个有什么…

Qt之自定义分页(翻页)控件

当数据量较大时,分页显示是个不错的选择。这里用百家姓来演示分页效果,包括首页、上一页、下一页、尾页和跳转。 一.效果 每页15个姓氏。 二.实现 QHPageWidget.h #ifndef QHPAGEWIDGET_H #define QHPAGEWIDGET_H#include <QWidget> #include <QStandardItemMod…

【用unity实现100个游戏之19】制作一个3D传送门游戏,实现类似鬼打墙,迷宫,镜子,任意门效果

最终效果 文章目录 最终效果素材第一人称人物移动开门效果显示原理渲染相机跟着我们视角移动门的摄像机跟着我们旋转近裁剪面设置传送配置代码实现传送效果结束完结素材 https://assetstore.unity.com/packages/3d/props/interior/door-free-pack-aferar-148411

c++输入输出流和文件操作总结

目录 一、c的输入输出流——> 指的是字节流的数据传送;具有类型安全和可扩展性。 二、流的出入路径 三、c流类库 ①概览 ②标准输出流&#xff1a; ③标准输入流&#xff1a; 四、文件操作&#xff08;ascii文件和二进制文件&#xff09; 五、字符串流&#xff08;或称…

Java在SpringCloud中自定义Gateway负载均衡策略

Java在SpringCloud中自定义Gateway负载均衡策略 一、前言 spring-cloud-starter-netflix-ribbon已经不再更新了&#xff0c;最新版本是2.2.10.RELEASE&#xff0c;最后更新时间是2021年11月18日&#xff0c;详细信息可以看maven官方仓库&#xff1a;org.springframework.clou…

uniapp 输入手机号并且正则校验

1.<input input“onInput” :value“phoneNum” type“number” maxlength“11”/> 3. method里面写 onInput(e){ this.phoneNum e.detail.value }, 4.调用接口时候校验正则 if (!/^1[3456789]\d{9}$/.test(this.phoneNum)) {uni.showToast({title: 请输入正确的手机号…

K8S网络类型

k8s的网络类型 k8s的通信模式 1 pod内部之间容器与容器之间的通信&#xff0c;在同一个pod中容器是共享资源和网络&#xff0c;使用同一个网络命名空间&#xff0c;可以直接通信 2 同一个node节点之内&#xff0c;不同pod之间的通信&#xff0c;每个pod都有一个全局的真实ip地…