谷粒商城实战笔记-35-前端基础-ES6-模块化

文章目录

  • 一,什么是模块化
  • 二,export
      • 1. `export`语法
      • 2. 批量导出
      • 3. 默认导出
  • 三,import
    • 1,import语法
    • 2,批量导入

一,什么是模块化

模块化编程是一种软件设计技术,它将程序分解为独立的、可复用的部分,每个部分负责执行特定的功能。

这种设计方法在多种编程语言中都有应用,包括JavaScript(JS)。模块化的概念最早源自于结构化编程,其核心思想是通过将复杂问题分解为更小、更易于管理的单元来简化开发过程,同时也提高了代码的可读性和可维护性。

在Java中,模块化的实现通常是通过“包”(package)来完成的。包是一个命名空间,可以包含类、接口和其他包。要使用一个包中的类或接口,需要在源文件的顶部使用import语句来导入所需的包,这确保了代码的清晰性和封装性。

相比之下,JavaScript在ES6(ECMAScript 2015)之前并没有内置的模块系统,而是通过一些模式如CommonJS或AMD来模拟模块化行为。然而,随着ES6的发布,JavaScript正式引入了原生的模块支持,使用exportimport关键字来定义和使用模块。

export命令允许你从一个模块中暴露函数、对象或变量,使其可供其他模块使用。例如:

// module1.js
export function sayHello() {console.log('Hello!');
}

import命令则用于从其他模块中导入这些暴露的元素。例如:

// main.js
import { sayHello } from './module1.js';
sayHello(); // 输出: Hello!

通过这种方式,你可以创建一系列相互独立但又可以协同工作的模块,每个模块专注于单一职责。这种分离关注点的方法不仅有助于代码的重用,也使得大型项目更加易于管理和扩展。此外,模块化还有助于避免全局命名空间的污染,因为模块内部的变量和函数默认是私有的,除非它们被明确地导出。

模块化是现代编程实践中不可或缺的一部分,它帮助开发者构建更加健壮、灵活和可维护的应用程序。

无论是Java中的包还是JavaScript中的模块,都是为了达到这一目标而设计的工具。

二,export

模块化编程在JavaScript中引入了一种全新的组织代码的方式,使得代码更加结构化、可维护和可重用。export语句在其中扮演着关键角色,它允许我们从一个模块中公开某些属性或者方法,以供其他模块使用。下面我们将进一步探讨export的不同用法及其在实际编程中的应用。

1. export语法

当我们想要从一个模块中导出一个对象时,可以像下面这样使用export语句:

// hello.js
const util = {sum(a, b) {return a + b;}
};
export { util };

但是,如果这个对象是模块中唯一的导出项,我们可以直接使用export default来简化代码:

// hello.js
export default {sum(a, b) {return a + b;}
};

这样,其他模块在导入时就不需要指定具体的名字,而是可以自由选择。

2. 批量导出

在实际开发中,一个模块可能需要导出多个变量、函数或对象。在这种情况下,可以使用export关键字批量导出多个标识符:

// user.js
let name = 'Jack';
let age = 21;export { name, age };

这样,其他模块就可以分别导入这些变量,而不需要导入整个模块:

// main.js
import { name, age } from './user.js';console.log(name); // 输出: Jack
console.log(age);  // 输出: 21

3. 默认导出

export default是一个非常有用的特性,它可以让我们在一个模块中导出一个默认的导出项,这个导出项可以是任何有效的JavaScript表达式。当有多个导出项时,通常会有一个最重要的导出项,这时使用export default就显得尤为合适。

例如,如果我们想从一个模块中导出一个函数,可以这样写:

// calculator.js
export default function sum(a, b) {return a + b;
}

然后,在另一个模块中,我们可以使用import语句并给这个函数起一个新的名字:

// main.js
import mySum from './calculator.js';console.log(mySum(5, 10)); // 输出: 15

使用export default的一个好处是,导入模块时不需要大括号,使得代码更加简洁。然而,每个模块只能有一个export default语句,这意味着如果模块中有多个需要导出的项,就需要结合使用exportexport default

以下是一个示例,展示如何在一个模块中同时使用export defaultexport

// mathUtils.js
function add(a, b) {return a + b;
}function subtract(a, b) {return a - b;
}// 默认导出一个乘法函数
export default function multiply(a, b) {return a * b;
}// 命名导出加法和减法函数
export { add, subtract };

在这个例子中,multiply函数被作为默认导出,而addsubtract函数则是命名导出。这意味着其他模块可以以不同的方式导入这些函数:

// main.js
import multiply, { add, subtract } from './mathUtils.js';console.log(multiply(5, 10)); // 输出: 50
console.log(add(5, 10));     // 输出: 15
console.log(subtract(10, 5)); // 输出: 5

或者,如果你只想导入默认导出的multiply函数,可以这样写:

// main.js
import multiply from './mathUtils.js';console.log(multiply(5, 10)); // 输出: 50

如果你想要导入所有的命名导出,可以使用* as语法来导入一个对象,该对象包含了所有命名导出:

// main.js
import multiply, * as math from './mathUtils.js';console.log(math.add(5, 10));     // 输出: 15
console.log(math.subtract(10, 5)); // 输出: 5

通过这种方式,你可以创建一个模块,其中包含一个核心功能(通过export default提供),以及一些辅助功能(通过export提供),从而提高代码的灵活性和可扩展性。在大型项目中,这种模块化策略尤其有用,因为它允许你精细地控制模块的接口和依赖。

三,import

1,import语法

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。
例如要使用上面导出的 util:

// 导入 util
import util from 'hello.js'
// 调用 util 中的属性
util.sum(1,2)

2,批量导入

要批量导入前面导出的 name 和 age:

import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")

但是上面的代码暂时无法测试,因为浏览器目前还不支持 ES6 的导入和导出功能。

除非借助于工具,把 ES6 的语法进行编译降级到 ES5,比如Babel-cli工具。

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

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

相关文章

克隆的TrinityCore服务器网速慢卡顿问题的解决(未解决)

一台TrinityCore服务器,采用的是备份克隆安装的方式,在FreeBSD bhyve 中安装Ubuntu,安装细节见如下两篇文档:尝试在FreeBSD 的jail、bhyve里安装TrinityCore-CSDN博客 备份和镜像TrinityCore_魔兽世界 updating auth database...…

Spring Boot项目中使用MyBatis Generator (MBG) 自动生成Mapper文件

Spring Boot项目中使用MyBatis Generator (MBG) 自动生成Mapper文件可以很大程度上减少编码。本文着重介绍如何在实战中使用MGB自动生成Mapper文件 1. 添加MyBatis Generator依赖 在pom.xml中添加必要的依赖 <dependency><groupId>org.mybatis.spring.boot</…

uniapp中给data中的变量赋值报错

排查了一上午&#xff0c;原本以为是赋值的这个变量有一个键名是空字符串的问题&#xff0c;后来发现是因为在data中定义变量是写的是{}&#xff0c;如果写成null就不会报错了&#xff0c;具体原因不清楚为什么

逻辑回归(Logistic Regression,LR)

分类和回归是机器学习的两个主要问题。 分类处理的是离散数据回归处理的是连续数据 线性回归&#xff1a;回归 拟合一条线预测函数&#xff1a; 逻辑回归&#xff1a;分类——找到一条线可以将不同类别区分开 虽然称为逻辑回归&#xff0c;但是实际是一种分…

2024 HNCTF PWN(hide_flag Rand_file_dockerfile Appetizers TTOCrv_)

文章目录 参考hide_flag思路exp Rand_file_dockerfile libc 2.31思路exp Appetizers glibc 2.35绕过关闭标准输出实例客户端 关闭标准输出服务端结果exp TTOCrv_&#x1f3b2; glibc 2.35逆向DT_DEBUG获得各个库地址随机数思路exp 参考 https://docs.qq.com/doc/p/641e8742c39…

从零开始学量化~Ptrade使用教程(七)——期权相关操作

期权交易 可点击证券代码右侧的选&#xff0c;进入期权选择菜单。通过选择标的商品&#xff0c;认购期权和认沽期权中间的选项&#xff08;包括代码、成交价、幅度%、隐波%、内在价值、时间价值等&#xff09;&#xff0c;以及认购期权或认沽期权&#xff0c;选择所需的期权标的…

计算机网络入门 -- 常用网络协议

计算机网络入门 – 常用网络协议 1.分类 1.1 模型回顾 计算机网络细分可以划为七层模型&#xff0c;分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。而上三层可以划为应用层中。 1.2 分类 1.2.1 应用层 为用户的应用进程提供网络通信服务&#xff0…

深入浅出WebRTC—DelayBasedBwe

WebRTC 中的带宽估计是其拥塞控制机制的核心组成部分&#xff0c;基于延迟的带宽估计是其中的一种策略&#xff0c;它主要基于延迟变化推断出可用的网络带宽。 1. 总体架构 1.1. 静态结构 1&#xff09;DelayBasedBwe 受 GoogCcNetworkController 控制&#xff0c;接收其输入…

【后端开发】身份和访问管理IAM(MFA,OTP,JWT,OAuth,SSO)

【后端开发】身份和访问管理IAM&#xff08;OTP&#xff0c;OAuth&#xff0c;JWT&#xff0c;SSO&#xff0c;MFA&#xff09; 文章目录 1、身份和访问管理&#xff08;IAM&#xff09;2、验证&#xff1a;多因素身份验证&#xff08;MFA&#xff09;3、验证&#xff1a;一次性…

Perl与数据库交互:深入理解DBI模块

Perl是一种非常强大的语言&#xff0c;特别是在处理文本和数据方面。在现代软件开发中&#xff0c;数据库的使用几乎是不可或缺的。Perl通过DBI&#xff08;Database Interface&#xff09;模块提供了一种标准的方式来与数据库进行交互。DBI是Perl中用于数据库交互的接口&#…

buu--web做题(4)

目录 [BJDCTF2020]ZJCTF&#xff0c;不过如此 [BUUCTF 2018]Online Tool [BJDCTF2020]ZJCTF&#xff0c;不过如此 <?phperror_reporting(0); $text $_GET["text"]; $file $_GET["file"]; if(isset($text)&&(file_get_contents($text,r)&q…

【iOS】——消息传递底层实现

消息传递是什么 Objective-C是一种动态类型语言&#xff0c;这意味着在编译时并不确定对象的具体类型&#xff0c;而是在运行时决定。消息传递机制允许程序在运行时向对象发送消息&#xff0c;对象再决定如何响应这些消息。 当你通过对象调用方法时&#xff0c;例如像这样[ob…

PhantomJs将html生成img|pdf

PhantomJS PhantomJS是一个可编程的无头浏览器&#xff0c;‌它基于WebKit内核&#xff0c;‌通过JavaScript API进行脚本化操作&#xff0c;它对各种web标准有快速和原生化的支持&#xff0c;包括DOM处理、CSS选择器、JSON、Canvas和SVG。‌无头浏览器指的是一个完整的浏览器内…

Linux——多路复用之poll

目录 前言 一、poll的认识 二、poll的接口 三、poll的使用 前言 前面我们学习了多路复用的select&#xff0c;知道多路复用的原理与select的使用方法&#xff0c;但是select也有许多缺点&#xff0c;导致他的效率不算高。今天我们来学习poll的使用&#xff0c;看看poll较于…

Linux先行一步

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ☁️运维工程师的职责&#xff1a;监…

初识模板【C++】

P. S.&#xff1a;以下代码均在VS2022环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …

AV1技术学习:Intra Prediction

对于帧内预测模式编码块&#xff0c;亮度分量的预测模式和色度分量的预测模式在比特流中分别发出信号。亮度预测模式是基于相邻左侧和上侧两个编码块预测上下文的概率模型进行熵编码的。色度预测模式的熵编码取决于色度预测模式的状态。帧内预测以变换块为单位&#xff0c;并使…

Linux下文件I/O操作

读取 time.txt 文件&#xff0c;写入到time_2.txt 一、函数 1.1、open() 函数 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode);…

RDMA 高性能架构基本原理与设计方案

在进行本文的学习学习之前&#xff0c;我们先对RDMA是什么做一个简单的科普与认识&#xff1a;一文带你了解什么是RDMA-CSDN博客 目录&#xff1a; 目录&#xff1a; 一、RDMA和传统网络方案的比较 1.1 传统网络方案&#xff1a; 1.1.1 缺点一&#xff1a;以太网卡&#xff0…

debian 更新源

前言 实现一键替换在线源 一键更新源 Debian 全球镜像站以下支持现有debian 11 12 echo "Delete the default source" rm -rf /etc/apt/sources.listecho "Build a new source" cat <<EOF>>/etc/apt/sources.list.d/debian.sources Types:…