React系列(五):NodeJS模块化操作

2024-08-26 20:48

本文主要是介绍React系列(五):NodeJS模块化操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import, 但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

es6中新增了两个命令export和importexport命令用于规定es6模块的对外接口,import 命令用于输入其他es6模块化提供的功能
一个es6模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个 变量, 就必须使用export关键字输出该变量。下面是一个JS文件,里面使用export命令输出变量。

编写单独的模块(a.js文件)

// ES6采用严格模式,注意单引号、空格、分号、最后的空行的使用
// 定义三个变量
let a = 20
let b = 30
let c = 'hello'
// 将变量导出,外部使用此文件中的变量时,需要使用import { a, b, c } from 'a.js'方式进行导入
export { a, b, c }

外部(main.js)使用此模块,需要先执行导入 import{变量名1[,变量名2,变量名3,…]} from ‘文件’

// 此处导入变量时,需要明确知道变量名称{ a, b, c }
import { a, b, c } from './files/a.js'
console.log(a, b, c)

export 不只是能导出普通变量,还可以导出其他的数据类型(a.js)

// 可以导出很多东西,比如函数、对象等
export const add = function (a, b) {return a + b
}
export const subtract = function (a, b) {return a - b
}
// 导出对象
export const stu = {name: 'aaa',age: 40
}

外部使用此模块中导出的函数、对象(main.js)

// 此处导入变量时,需要明确知道变量名称{ a, b, c }
import { a, b, c, add, subtract, stu } from './files/a.js'
// 调用导入的方法
let x = add(a, b)
console.log(x)
x = subtract(a, b)

// 使用导入的对象
console.log(stu)

也可以一次导入所有变量 import * as 标识符 from ‘文件’(main.js)

// 也可以导入所有变量、方法、对象,并作为对象obj的属性进行使用
import * as obj from './files/a.js'console.log(obj.a, obj.b, obj.c)
// 调用导入的方法
let x = obj.add(obj.a, obj.b)
console.log(x)
x = obj.subtract(obj.a, obj.b)

// 使用导入的对象
console.log(obj.stu)

默认导出 export default (exportDefault .js)

export default指定默认导出,这在模块只有一个变量输出时非常常用;引用该模块时,用户不需要知道要引入的变量名称是什么,而是在引用位置给变量(函数、对象、类)指定名称

// 一个模块只允许出现一个export default
// (此语句实质返回了一个名称为 'default' 的变量)
export default {data: {name: 'aaaa',age: '30',say: function () {console.log(this.name, this.age)}}
}

外部引用模块时可以为模块变量命名(main.js)

// 为默认导出的变量命名为student
import student from './files/exportDefault.js'// 使用导入的变量
student.data.say()

export default命令让加载模块变得更容易理解,如下代码:

// 有了export default命令,加载模块时就非常直观了,以一些常用的模块为例
import $ from 'jQuery' // 加载jQuery 库
import _ from 'lodash' // 加载 lodash
import Vue from 'vue'   // 加载 Vue

这篇关于React系列(五):NodeJS模块化操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109648

相关文章

Python正则表达式匹配和替换的操作指南

《Python正则表达式匹配和替换的操作指南》正则表达式是处理文本的强大工具,Python通过re模块提供了完整的正则表达式功能,本文将通过代码示例详细介绍Python中的正则匹配和替换操作,需要的朋... 目录基础语法导入re模块基本元字符常用匹配方法1. re.match() - 从字符串开头匹配2.

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

sysmain服务可以禁用吗? 电脑sysmain服务关闭后的影响与操作指南

《sysmain服务可以禁用吗?电脑sysmain服务关闭后的影响与操作指南》在Windows系统中,SysMain服务(原名Superfetch)作为一个旨在提升系统性能的关键组件,一直备受用户关... 在使用 Windows 系统时,有时候真有点像在「开盲盒」。全新安装系统后的「默认设置」,往往并不尽编

Python自动化处理PDF文档的操作完整指南

《Python自动化处理PDF文档的操作完整指南》在办公自动化中,PDF文档处理是一项常见需求,本文将介绍如何使用Python实现PDF文档的自动化处理,感兴趣的小伙伴可以跟随小编一起学习一下... 目录使用pymupdf读写PDF文件基本概念安装pymupdf提取文本内容提取图像添加水印使用pdfplum

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中,我们经常需要从 W

使用Python的requests库来发送HTTP请求的操作指南

《使用Python的requests库来发送HTTP请求的操作指南》使用Python的requests库发送HTTP请求是非常简单和直观的,requests库提供了丰富的API,可以发送各种类型的HT... 目录前言1. 安装 requests 库2. 发送 GET 请求3. 发送 POST 请求4. 发送