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

相关文章

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中,常将INI文件作为配置文件,用于存储应用程序的

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log

Java操作ElasticSearch的实例详解

《Java操作ElasticSearch的实例详解》Elasticsearch是一个分布式的搜索和分析引擎,广泛用于全文搜索、日志分析等场景,本文将介绍如何在Java应用中使用Elastics... 目录简介环境准备1. 安装 Elasticsearch2. 添加依赖连接 Elasticsearch1. 创

java Stream操作转换方法

《javaStream操作转换方法》文章总结了Java8中流(Stream)API的多种常用方法,包括创建流、过滤、遍历、分组、排序、去重、查找、匹配、转换、归约、打印日志、最大最小值、统计、连接、... 目录流创建1、list 转 map2、filter()过滤3、foreach遍历4、groupingB

Java操作PDF文件实现签订电子合同详细教程

《Java操作PDF文件实现签订电子合同详细教程》:本文主要介绍如何在PDF中加入电子签章与电子签名的过程,包括编写Word文件、生成PDF、为PDF格式做表单、为表单赋值、生成文档以及上传到OB... 目录前言:先看效果:1.编写word文件1.2然后生成PDF格式进行保存1.3我这里是将文件保存到本地后

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Python使用Colorama库美化终端输出的操作示例

《Python使用Colorama库美化终端输出的操作示例》在开发命令行工具或调试程序时,我们可能会希望通过颜色来区分重要信息,比如警告、错误、提示等,而Colorama是一个简单易用的Python库... 目录python Colorama 库详解:终端输出美化的神器1. Colorama 是什么?2.