当前位置: 首页 > news >正文

ES6入门---第二单元 模块五:模块化

js不支持模块化

注意: 需要放到服务器环境

1、如何定义模块?

export  东西

例:1.js文件中

console.log('1模块加载了');//显示是否加载了
export const a =12;
export const b = 5;
export let c = 101;
const a=12;
const b=5;
const c=101;export {//可以起别名 as *** 也可以去掉a as aaa,b as banana,c as cup
}

 <script type="module">import {a, b, c} from './modules/1.js';console.log(a,b,c);</script>

起别名版import :

<script type="module">import {aaa, banana, cup} from './modules/2.js';console.log(aaa, banana, cup);</script>

补充 export default **  作用:引用时候可以不用加{ }

2、如何使用?
 在html文件里<script type="module"></script>

引入模块

import './modules/1.js';

【新增】*表示引用全部

 <script type="module">import * as modTwo from './modules/2.js';console.log(modTwo.aaa);</script>
 <script type="module">import mod,{show, sum, a, b} from './modules/4.js';
// show sum 是函数 let p1 = new mod.Person('老肖');console.log(p1.showName());show();sum();console.log(a,b);</script>

js文件可以引用另一个js文件里的东西 :格式同理

import:  特点
        a). import 可以是相对路径,也可以是绝对路径
            import 'https://code.jquery.com/jquery-3.3.1.js';
        b). import模块只会导入一次,无论你引入多少次
        c). import './modules/1.js';  如果这么用,相当于引入文件
        d). 有提升效果,import会自动提升到顶部,首先执行

             也就是说:不管放前面放后面都最先引入
        e). 导出去模块内容,如果里面有定时器更改,外面也会改动

  import()  类似node里面require, 可以动态引入, 默认import语法不能写到if、for之类里面

错误例:

 if(a==12){import {a} from './modules/1.js';}else{import {b} from './modules/2.js';}

正确例:
        返回值是个promise对象 

<script type="module">import('./modules/1.js').then(res=>{console.log(res.a+res.b);});</script>

 路径也可以动态

 <script type="module">let sign=1;function config(){switch(sign){case 1:return './modules/1.js';break;case 2:return './modules/2.js';break;}}import(config(1)).then(res=>{$(function(){$('body').css({background:'gray'})})});</script>

与promise结合版:

<script type="module">Promise.all([import('./modules/1.js'),import('./modules/2.js')]).then(([mod1,mod2])=>{console.log(mod1);console.log(mod2);})</script>

【ES2017】async  await

相关文章:

ES6入门---第二单元 模块五:模块化

js不支持模块化 注意&#xff1a; 需要放到服务器环境 1、如何定义模块&#xff1f; export 东西 例&#xff1a;1.js文件中 console.log(1模块加载了);//显示是否加载了 export const a 12; export const b 5; export let c 101; const a12; const b5; const c101;ex…...

Python 函数装饰器和闭包(变量作用域规则)

本章内容&#xff1a; Python 如何计算装饰器句法 Python 如何判断变量是不是局部的 闭包存在的原因和工作原理 nonlocal 能解决什么问题 掌握这些基础知识后&#xff0c;我们可以进一步探讨装饰器&#xff1a; 实现行为良好的装饰器 标准库中有用的装饰器 实现一个参数化装饰器…...

什么是constexpr?

什么是constexpr&#xff1f; 简单来说&#xff0c;constexpr就是告诉编译器&#xff1a;“我这个变量或函数的值可以在编译时算出来&#xff0c;请帮我提前算好&#xff0c;运行时直接用结果&#xff0c;不用再算了。” • **传统const**只表示变量不可修改&#xff0c;但不…...

如何在 PowerEdge 服务器上设置 NIC 分组

以下文章提供了有关 Windows、VMware 和 Linux 中的 NIC 分组的信息。 什么是网络适配器分组&#xff1f;设置 NIC 分组 Windows设置 NIC 分组 VMware设置 NIC 分组 Linux 什么是网络适配器分组&#xff08;绑定&#xff09;&#xff1f; 网络适配器分组是一个术语&#xff0…...

ES6入门---第三单元 模块四:Set和WeakSet

set数据结构: 类似数组&#xff0c;但是里面不能有重复值&#xff0c;如果有&#xff0c;只显示一个 set用法: let setArr new Set([a,b]); setArr.add(a); 往setArr里面添加一项 let setArr new Set().add(a).add(b).add(c); setArr.delete(b); 删除一项 setArr.ha…...

架构进阶:75页架构规划方法课件 【附全文阅读】

本文概述了一个关于架构规划方法的目录及其目的&#xff0c;重点介绍了基于联邦企业架构&#xff08;FEAF&#xff09;的架构建模方法&#xff0c;并提及了不同层面的架构建模方法以及培训的目的。以下是对该内容的简洁总结&#xff1a; **架构规划方法目录及其目的** 本文旨在…...

前端面经-VUE3篇(三)--vue Router(二)导航守卫、路由元信息、路由懒加载、动态路由

一、导航守卫 vue Router 中的 导航守卫&#xff08;Navigation Guards&#xff09; 是一个非常重要的功能&#xff0c;用于在路由切换过程中&#xff0c;拦截、控制、检查或延迟页面跳转。 你可以理解为&#xff1a; &#x1f510; “进门前的保安”&#xff0c;控制哪些页面…...

RTX-3090 Qwen3-8B Dify RAG环境搭建

RTX-3090 Qwen3-8B Dify RAG环境搭建 一、环境配置二、操作步骤1、创建容器2、下载`Qwen3-8B`和embedding模型3、安装`transformers`4、安装`vllm`5、安装`flash-attention`6、启动兼容OpenAI API的服务1、方案一:启动`vllm`服务【不支持多任务】2、方案二:Flask和PyTorch实现的…...

Circular Plot系列(三):【视频教程】复现NCS图表之高大上的单细胞UMAP环形图

高端复杂的UMAP复现&#xff1a; 这又是一个高大上且炫酷的单细胞UMAP图&#xff0c;展示的信息很多&#xff0c;有大类细胞和亚群&#xff0c;以及marker基因和cell count信息&#xff0c;还可以增加其他的分组信息等等。没错&#xff0c;看这个图就是circlize一层层画的。我们…...

MCP智能体多Agent协作系统设计(Multi-Agent Cooperation)

目录 &#x1f680; MCP智能体多Agent协作系统设计&#xff08;Multi-Agent Cooperation&#xff09; &#x1f31f; 为什么需要多Agent协作&#xff1f; &#x1f9e0; 多Agent协作系统架构设计 &#x1f6e0;️ 1. 构建基础智能体基类&#xff08;Agent Base&#xff09;…...

栈Stack

一 栈:先进后出 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 Stack<Integer> sta…...

HTML01:HTML基本结构

HTML基本结构 <html> <head><meta charset"UTF-8"><title>我的第一个网页</title> </head> <body>我的第一个网页 </body> </html><body、</body等成对的标签&#xff0c;分别叫开发标签和闭合标签单独…...

QT聊天项目DAY07

1.Win配置和使用GRPC 1.1 克隆GRPC库 克隆GRPC git clone -b v1.34.0 https://gitee.com/mirrors/grpc-framework.git 查看Git有没有安装 没有安装 1.1.1 安装Git https://git-scm.com/ 一路next 添加Git的路径到系统环境变量下 我这次没用管理员权限&#xff0c;并且也没…...

2025年PMP 学习三

4.2制定项目管理计划 4. 项目管理计划 - 内容&#xff08;输出&#xff09; 项目目标的制定原因&#xff1a; 3个基准&#xff08;范围基准、进度基准、成本基准&#xff09; 子管理计划&#xff1a;范围、需求、进度、成本、质量、资源、沟通、风险、采购等管理计划&#xf…...

软考-软件设计师中级备考 10、文件管理、设备管理

一、 文件管理 1、文件目录 文件控制块&#xff08;FCB&#xff09;&#xff1a;是操作系统为管理文件而设置的数据结构&#xff0c;包含了文件的基本信息&#xff08;如文件名、文件大小、文件类型等&#xff09;、存取控制信息&#xff08;如文件所有者的权限、其他用户的权…...

Linux环境下的进程创建-fork函数的使用, 进程退出exit和_exit的区别,以及进程等待waitpid和status数据的提取方法

目录 一、进程创建 1.fork函数 1&#xff09;进程调用fork函数是如何创建子进程的 2&#xff09;代码示范 2.写时拷贝 二、进程退出 1.退出码 1&#xff09;什么是退出码&#xff1f; 2&#xff09;为什么要有退出码&#xff1f; 3&#xff09;退出码是怎么做到的&#xff1f; …...

【数据结构与算法】常见排序算法详解(C++实现)

目录 一、排序的基本概念 二、插入排序 2.1 直接插入排序 2.2 折半插入排序 2.3 希尔排序 三、交换排序 3.1 冒泡排序 3.2 快速排序 四、选择排序 4.1 简单选择排序 4.2 堆排序 五、归并排序 六、基数排序 七、计数排序 结语 一、排序的基本概念 排序 就是重新…...

STM32GPIO输入实战-按键key模板及移植

STM32GPIO输入实战-按键key模板及移植 一&#xff0c;按键模板展示二&#xff0c;按键模板逻辑1&#xff0c;准备工作&#xff1a;头文件与全局变量2&#xff0c;读取硬件状态&#xff1a;key_read_raw()3,核心处理&#xff1a;key_process_simple() 的四行代码 三&#xff0c;…...

LeetCode 1128.等价多米诺骨牌对的数量:计数

【LetMeFly】1128.等价多米诺骨牌对的数量&#xff1a;计数 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-equivalent-domino-pairs/ 给你一组多米诺骨牌 dominoes 。 形式上&#xff0c;dominoes[i] [a, b] 与 dominoes[j] [c, d] 等价 当且仅当 (a …...

Spring MVC设计与实现

DispatcherServlet的初始化与请求处理流程 初始化阶段 Servlet 生命周期触发&#xff1a;当 Web 容器&#xff08;如 Tomcat&#xff09;启动时&#xff0c;根据注解/配置&#xff0c;DispatcherServlet 的 init() 方法被调用。 初始化 WebApplicationContext 根 WebApplicat…...

日语学习-日语知识点小记-进阶-JLPT-N1阶段(1):语法单词

日语学习-日语知识点小记-进阶-JLPT-N1阶段&#xff08;1&#xff09;&#xff1a;语法单词 1、前言&#xff08;1&#xff09;情况说明&#xff08;2&#xff09;工程师的信仰&#xff08;3&#xff09;高级语法N1语法和难点一、N1语法学习内容&#xff08;高级语法&#xff…...

stm32week14

stm32学习 十.GPIO 2.基本结构 基本结构&#xff1a; F1与其它的的最大区别是上下拉电阻的位置 施密特触发器是一种整形电路&#xff0c;可以将非标准方波&#xff0c;整形成方波 图中MOS管的输出规则&#xff1a; 3.8中工作模式 ①输入浮空&#xff1a; 上下拉电阻均不工…...

WPF中Binding

绑定ViewModel中的数据 添加数据上下文 方法一&#xff1a;在XAML中添加 <Window.DataContext><local:MainWindowViewModel /> </Window.DataContext>方法二&#xff1a;在界面层的cs文件中添加 this.DataContext new MainWindowViewModel();绑定 publ…...

Google Agent space时代,浅谈Agent2Agent (A2A) 协议和挑战!

如果说去年Google Cloud大会大家还在数“AI”这个词被提了多少次&#xff0c;那么今年&#xff0c;绝对是“Agent”的主场&#xff01;开发者主题演讲几乎被它“刷屏”&#xff0c;展区的许多 Demo 也都号称是 Agent 应用。 但我得诚实地说&#xff0c;大会现场关于 Agents 的 …...

爬虫的应用

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;文本数据的预处理是至关重要的基础环节。它如同工匠雕琢璞玉前的打磨工作&#xff0c;直接影响后续模型分析与挖掘的效果。本文将基于 Python&#xff0c;以电商平台的差评和优质评价文本数据为例&#xff0c;详细展…...

力扣面试150题--相同的树

Day 41 题目描述 做法 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right…...

Java后端开发day40--异常File

&#xff08;以下内容全部来自上述课程&#xff09; 异常 异常&#xff1a;异常就是代表程序出现的问题 1. 异常的分类 1.1 Error 代表的是系统级别的错误&#xff08;属于严重问题&#xff09; 系统一旦出现问题&#xff0c;sun公司会把这些错误封装成Error对象。 Error…...

集成算法学习

集成算法通过组合多个弱学习器提升模型性能&#xff0c;以下是核心内容详解&#xff1a; 一、核心思想 - 组合优势&#xff1a;结合多个简单模型&#xff08;如决策树&#xff09;&#xff0c;通过“少数服从多数”或“加权平均”等策略&#xff0c;降低方差、偏差或过拟合风险…...

工业认知智能:从数据分析到知识创造

工业认知智能:从数据分析到知识创造 引言 当前制造业面临的知识管理困境令人震惊:68%的工艺知识存储于老员工头脑中,30%的企业因知识传承断层导致质量事故。麦肯锡研究显示,应用认知智能技术的企业,其工艺创新速度提升3-5倍。本文将系统阐述工业认知智能的"感知-理…...

8.1 Python+Docker+企业微信集成实战:自动化报告生成与CI/CD部署全攻略

Python+Docker+企业微信集成实战:自动化报告生成与CI/CD部署全攻略 关键词:PDF报告生成, Word文档自动化, 企业微信集成, Docker容器化, CI/CD流水线 1. 多格式报告生成实战 通过扩展报告输出格式,满足不同用户的文档需求。我们使用Python生态的成熟库实现PDF/Word生成,并…...

25.5.4数据结构|哈夫曼树 学习笔记

知识点前言 一、搞清楚概念 ●权&#xff1a;___________ ●带权路径长度&#xff1a;__________ WPL所有的叶子结点的权值*路径长度之和 ●前缀编码&#xff1a;____________ 二、构造哈夫曼树 n个带权值的结点&#xff0c;构造哈夫曼树算法&#xff1a; 1、转化成n棵树组成的…...

统计学中的p值是什么?怎么使用?

李升伟 整理 在统计学中&#xff0c;p值&#xff08;p-value&#xff09;是帮助研究者判断假设检验结果是否具有统计显著性的重要指标。以下是关于p值的详细解释和使用方法&#xff1a; 1. p值的定义 p值表示在原假设&#xff08;H0&#xff09;为真的情况下&#xff0c;观察…...

22:一维码与二维码区别

一维码&#xff08;条形码&#xff09; 一维条码即指条码条和空的排列规则&#xff0c;常用的一维码的码制包括&#xff1a;EAN码、39码、交叉25码、UPC码、128码、93码&#xff0c;ISBN码&#xff0c;及Codabar&#xff08;库德巴码&#xff09;等。 条码是由一组规则排列的条…...

Java学习手册:SQL 优化技巧

一、SQL 查询优化 选择合适的索引列 &#xff1a;索引可以显著提高查询速度&#xff0c;但需要选择合适的列来创建索引。通常&#xff0c;对于频繁作为查询条件的列、连接操作的列以及排序或分组操作的列&#xff0c;应该考虑创建索引。例如&#xff0c;在一个订单表中&#xf…...

《Vue3学习手记8》

vue3中的一些API shallowRef ( ) 和shallowReactive ( ) shallowRef (浅层响应式) 1.作用:创建一个响应式数据&#xff0c;但只对顶层属性进行响应式处理。 2.用法: const originalref(...) const original2shallowRef(original) 3.特点:只跟踪引用值的变化&#xff0c;不关心…...

平衡二叉搜索树模拟实现1-------AVL树(插入,删除,查找)

本章目标 1.AVL树的概念 2.AVL树的模拟实现 1.AVL树的概念 1.AVL树是最先被发明的平衡二叉搜索树,AVL树是一颗空树或者具有以下的性质 它的左右子树都是AVL树,并且左右高度差不超过1,AVL树是一颗高度平衡二叉搜索树,通过高度差去控制平衡 2.为什么高度差是1? 当结点个数为8…...

运算放大器的主要技术指标

运放&#xff08;运算放大器&#xff09;是一种基础电子器件&#xff0c;具有输入阻抗高、开环放大倍数大、输入端电流小、同相端与反相端电压几乎相等等特点。在选型时&#xff0c;需要考虑技术指标如输入失调电压、输入失调电压漂移、输入失调电流、共模抑制比、压摆率、建立…...

51单片机入门教程——每个音符对应的重装载值

前言 本教程基于B站江协科技课程进行个人学习整理&#xff0c;专为拥有C语言基础的零基础入门51单片机新手设计。既帮助解决因时间差导致的设备迭代调试难题&#xff0c;也助力新手快速掌握51单片机核心知识&#xff0c;实现从C语言理论到单片机实践应用的高效过渡 。...

新一代智能座舱娱乐系统软件架构设计文档

一 文档概述 本文档描述了基于Android系统与多模态大模型融合的新一代智能座舱娱乐系统的软件架构设计。该系统将通过深度学习的个性化适配、多模态感知融合和持续自进化能力&#xff0c;重新定义人车交互体验。 二 整体架构设计 2.1 分层架构视图 系统采用五层垂直架构与三…...

深度优先搜索(DFS)与广度优先搜索(BFS):图与树遍历的两大利器

深度优先搜索&#xff08;DFS&#xff09;与广度优先搜索&#xff08;BFS&#xff09;&#xff1a;图与树遍历的两大利器 在数据结构与算法的世界中&#xff0c;深度优先搜索&#xff08;DFS&#xff09;和广度优先搜索&#xff08;BFS&#xff09;是两种非常经典的遍历算法。…...

比较 TensorFlow 和 PyTorch

TensorFlow和PyTorch是深度学习领域中两个非常流行的开源机器学习框架&#xff0c;下面为你详细介绍。 1. 历史与背景 TensorFlow&#xff1a;由Google开发和维护&#xff0c;于2015年开源。因其强大的生产能力和广泛的工具支持&#xff0c;在工业界得到了广泛应用。PyTorch&…...

jeecg查询指定时间

jeecg查询指定时间 ApiOperation(value"请假表-分页列表查询", notes"请假表-分页列表查询")GetMapping(value "/list")public Result<IPage<MlLeaveRequest>> queryPageList(MlLeaveRequest mlLeaveRequest,RequestParam(name&qu…...

无人机视觉:连接像素与现实世界 —— 像素与GPS坐标双向转换指南

在无人机航拍应用中&#xff0c;一个核心的需求是将图像上的某个点与现实世界中的地理位置精确对应起来。无论是目标跟踪、地图测绘还是农情监测&#xff0c;理解图像像素与其对应的经纬度&#xff08;GPS坐标&#xff09;之间的关系至关重要。本文将详细介绍如何实现单个像素坐…...

php study 网站出现404 - Page Not Found 未找到

最近在用php study搭建本地网站时&#xff0c;出现了404 - Page Not Found 未找到的情况&#xff0c;解决方式如下&#xff1a; 第一种&#xff1a;在wp 后台固定链接设置中修改链接形式 第二种:没有安装伪静态! 小皮面板中 设置--配置文件--编辑你所搭建的网站 在红色框框处…...

互联网大厂Java求职面试:核心技术点深度解析

互联网大厂Java求职面试&#xff1a;核心技术点深度解析 在互联网大厂的Java岗位面试中&#xff0c;技术总监级别的面试官通常会从实际业务场景出发&#xff0c;层层深入地考察候选人的技术能力。本文通过一个严肃专业的技术总监与搞笑但有技术潜力的程序员郑薪苦之间的互动对…...

【Java idea配置】

IntelliJ IDEA创建类时自动生成注释 /** * program: ${PROJECT_NAME} * * since: jdk1.8 * * description: ${description} * * author: ${USER} * * create: ${YEAR}-${MONTH}-${DAY} ${HOUR}:${MINUTE} **/自动导入和自动移除无用导入 idea彩色日志不生效 调试日志输出 在…...

[GESP202503 四级] 二阶矩阵c++

题目描述 小 A 有一个 n 行 m 列的矩阵 A。 小 A 认为一个 22 的矩阵 D 是好的&#xff0c;当且仅当 。其中 表示矩阵 D 的第 i 行第 j 列的元素。 小 A 想知道 A 中有多少个好的子矩阵。 输入 第一行&#xff0c;两个正整数 n,m。 接下来 n 行&#xff0c;每行 m 个整数…...

PyQt5基本介绍

PyQt5是基于Digia公司强大图形框架Qt5的python接口&#xff0c;由一组python模块构成。是一个用于创建桌面应用程序的Python库&#xff0c;它是Qt图形用户界面工具包的Python绑定。 Qt是一个跨平台的C库&#xff0c;提供了一套丰富的工具和功能&#xff0c;用于开发图形用户界…...

Spring AI 实战:第十章、Spring AI RAG之博学多才

引言:从“博闻强记”到“博学多才” 在人工智能的发展历程中,大语言模型(LLM)已经展现了惊人的“博闻强记”能力——它们能写诗、编码、解答常识问题,甚至模拟人类对话。然而,当面对专业领域知识或实时更新的信息时,这些模型往往会暴露其局限性:要么“一本正经地胡说八…...

Runnable 组件生命周期监听器与使用场景

Runnable 生命周期监听器 1.1 监听机制演进 在 LangChain 框架中&#xff0c;Runnable 组件提供两种监控方案&#xff1a; ​​传统模式​​&#xff1a;通过 config callbacks 参数传递回调配置​​增强模式​​&#xff1a;使用 with_listeners() 方法实现生命周期订阅 …...