百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

体验ES6模块化(es6的module模块)

ccwgpt 2024-10-21 04:07 40 浏览 0 评论

一、ES6模块化的概念

ES6模块化规范是浏览器与服务端通用的模块化开发规范。它的出现极大降低了前端开发者的模块化学习成本,开发者不需要额外学习AMD、CommonJS等模块化规范。

ES6模块化规范中定义:

1. 每个js文件都是一个独立的模块

2. 导入其他模块成员使用import关键字

3. 向外共享模块成员使用export关键字

二、在node.js中体验ES6模块化

1. 首先安装node.js,去官网下载,按照提示步骤安装即可。安装完成在cmd输入node -v出现版本号即安装成功。

nodejs下载:https://nodejs.org/zh-cn/


2. 包资源管理器NPM。

(1)什么是NPM
npm全称Node Package Manager,他是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven
(2)NPM本地安装
install命令用于安装某个模块,如果我们想安装express模块(node的web框架),输出命令如下:
npm install express
安装完成后,在该目录下已经出现了一个node_modules文件夹 和package-lock.json。node_modules文件夹用于存放下载的js库(相当于maven的本地仓库),package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。
(3)NPM全局安装
如果你不知道你的全局目录在哪里,执行命令
npm root ‐g
比如我们全局安装jquery, 输入以下命令
npm install jquery ‐g
(4)批量下载
我们从网上下载某些代码,发现只有package.json,没有node_modules文件夹,这时我们需要通过命令重新下载这些js库。
进入目录(package.json所在的目录)输入命令:
npm install
此时,npm会自动下载package.json中依赖的js库。
(5)淘宝NPM镜像
有时我们使用npm下载资源会很慢,所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
输入命令,进行全局安装淘宝镜像。
npm install ‐g cnpm ‐‐registry=https://registry.npm.taobao.org
安装后,我们可以使用以下命令来查看cnpm的版本
cnpm ‐v
使用cnpm
cnpm install 需要下载的js库

3. node.js中使用ES6模块化

node.js 中默认仅支持Common]S模块化规范,若想基于node.,js体验与学习ES6的模块化语法,可以按照如下两个步骤进行配置:

① 确保安装了v14.15.1或更高版本的node.js

② 在package.json的根节点中添加"type": "module"节点

4.操作步骤:

① 打开文件夹,在终端中输入: npm init -y 初始化package.json

② 修改package.json,加入"type":"module"

{
  "type":"module",
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

三、ES6模块化的基本语法

ES6的模块化主要包含如下3种用法:

① 默认导出与默认导入

② 按需导出与按需导入

③ 直接导入并执行模块中的代码



1、默认导出:export default 默认导出的成员对象

let n1 = 10
let n2 = 20

function show() {

}
// 想要共享哪个成员,就挂载在下面
export default {
    n1,
    show
}

2、默认导入:import 接收名称 from '模块标识符'

import m1 from './默认导出.js'

console.log(m1);

3、终端执行node .\默认导入.js




4、按需导出:export 按需导出的成员对象

export let s1 = 'aaa'

export let s2 = 'ccc'

export function say() { }

5、按需导入:import {按需导出的成员对象名} from '模块标识符'

import { s1, s2, say } from './按需导出.js'
console.log(s1);
console.log(s2);
console.log(say);

6、终端执行node .\按需导入.js



7、按需导入和按需导出的注意事项

① 每个模块中可以使用多次按需导出

② 按需导入的成员名称必须和按需导出的名称保持一致

③ 按需导入时,可以使用as关键字进行重命名

④ 按需导入可以和默认导入一起使用

8、直接导入并执行模块中的代码


for (let i = 0; i < 3; i++) {
    console.log(i);
}

import './直接导入.js'


相关推荐

十分钟让你学会LNMP架构负载均衡(impala负载均衡)

业务架构、应用架构、数据架构和技术架构一、几个基本概念1、pv值pv值(pageviews):页面的浏览量概念:一个网站的所有页面,在一天内,被浏览的总次数。(大型网站通常是上千万的级别)2、u...

AGV仓储机器人调度系统架构(agv物流机器人)

系统架构层次划分采用分层模块化设计,分为以下五层:1.1用户接口层功能:提供人机交互界面(Web/桌面端),支持任务下发、实时监控、数据可视化和报警管理。模块:任务管理面板:接收订单(如拣货、...

远程热部署在美团的落地实践(远程热点是什么意思)

Sonic是美团内部研发设计的一款用于热部署的IDEA插件,本文其实现原理及落地的一些技术细节。在阅读本文之前,建议大家先熟悉一下Spring源码、SpringMVC源码、SpringBoot...

springboot搭建xxl-job(分布式任务调度系统)

一、部署xxl-job服务端下载xxl-job源码:https://gitee.com/xuxueli0323/xxl-job二、导入项目、创建xxl_job数据库、修改配置文件为自己的数据库三、启动...

大模型:使用vLLM和Ray分布式部署推理应用

一、vLLM:面向大模型的高效推理框架1.核心特点专为推理优化:专注于大模型(如GPT-3、LLaMA)的高吞吐量、低延迟推理。关键技术:PagedAttention:类似操作系统内存分页管理,将K...

国产开源之光【分布式工作流调度系统】:DolphinScheduler

DolphinScheduler是一个开源的分布式工作流调度系统,旨在帮助用户以可靠、高效和可扩展的方式管理和调度大规模的数据处理工作流。它支持以图形化方式定义和管理工作流,提供了丰富的调度功能和监控...

简单可靠高效的分布式任务队列系统

#记录我的2024#大家好,又见面了,我是GitHub精选君!背景介绍在系统访问量逐渐增大,高并发、分布式系统成为了企业技术架构升级的必由之路。在这样的背景下,异步任务队列扮演着至关重要的角色,...

虚拟服务器之间如何分布式运行?(虚拟服务器部署)

  在云计算和虚拟化技术快速发展的今天,传统“单机单任务”的服务器架构早已难以满足现代业务对高并发、高可用、弹性伸缩和容错容灾的严苛要求。分布式系统应运而生,并成为支撑各类互联网平台、企业信息系统和A...

一文掌握 XXL-Job 的 6 大核心组件

XXL-Job是一个分布式任务调度平台,其核心组件主要包括以下部分,各组件相互协作实现高效的任务调度与管理:1.调度注册中心(RegistryCenter)作用:负责管理调度器(Schedule...

京东大佬问我,SpringBoot中如何做延迟队列?单机与分布式如何做?

京东大佬问我,SpringBoot中如何做延迟队列?单机如何做?分布式如何做呢?并给出案例与代码分析。嗯,用户问的是在SpringBoot中如何实现延迟队列,单机和分布式环境下分别怎么做。这个问题其实...

企业级项目组件选型(一)分布式任务调度平台

官网地址:https://www.xuxueli.com/xxl-job/能力介绍架构图安全性为提升系统安全性,调度中心和执行器进行安全性校验,双方AccessToken匹配才允许通讯;调度中心和执...

python多进程的分布式任务调度应用场景及示例

多进程的分布式任务调度可以应用于以下场景:分布式爬虫:importmultiprocessingimportrequestsdefcrawl(url):response=re...

SpringBoot整合ElasticJob实现分布式任务调度

介绍ElasticJob是面向互联网生态和海量任务的分布式调度解决方案,由两个相互独立的子项目ElasticJob-Lite和ElasticJob-Cloud组成。它通过弹性调度、资源管控、...

分布式可视化 DAG 任务调度系统 Taier 的整体流程分析

Taier作为袋鼠云的开源项目之一,是一个分布式可视化的DAG任务调度系统。旨在降低ETL开发成本,提高大数据平台稳定性,让大数据开发人员可以在Taier直接进行业务逻辑的开发,而不用关...

SpringBoot任务调度:@Scheduled与TaskExecutor全面解析

一、任务调度基础概念1.1什么是任务调度任务调度是指按照预定的时间计划或特定条件自动执行任务的过程。在现代应用开发中,任务调度扮演着至关重要的角色,它使得开发者能够自动化处理周期性任务、定时任务和异...

取消回复欢迎 发表评论: