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

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源(如淘宝)、清理缓存及切换工具解决,建议设置全局镜像(npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in

使用Java填充Word模板的操作指南

《使用Java填充Word模板的操作指南》本文介绍了Java填充Word模板的实现方法,包括文本、列表和复选框的填充,首先通过Word域功能设置模板变量,然后使用poi-tl、aspose-words... 目录前言一、设置word模板普通字段列表字段复选框二、代码1. 引入POM2. 模板放入项目3.代码

利用Python操作Word文档页码的实际应用

《利用Python操作Word文档页码的实际应用》在撰写长篇文档时,经常需要将文档分成多个节,每个节都需要单独的页码,下面:本文主要介绍利用Python操作Word文档页码的相关资料,文中通过代码... 目录需求:文档详情:要求:该程序的功能是:总结需求:一次性处理24个文档的页码。文档详情:1、每个

Python内存管理机制之垃圾回收与引用计数操作全过程

《Python内存管理机制之垃圾回收与引用计数操作全过程》SQLAlchemy是Python中最流行的ORM(对象关系映射)框架之一,它提供了高效且灵活的数据库操作方式,本文将介绍如何使用SQLAlc... 目录安装核心概念连接数据库定义数据模型创建数据库表基本CRUD操作创建数据读取数据更新数据删除数据查

Go语言中json操作的实现

《Go语言中json操作的实现》本文主要介绍了Go语言中的json操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录 一、jsOChina编程N 与 Go 类型对应关系️ 二、基本操作:编码与解码 三、结构体标签(Struc