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

前端基础（ES6 模块化）

news 2026/3/27 20:52:01

目录

前言

复习

ES6 模块化导出导入

解构赋值

导入js文件

export default

全局注册

局部注册

前言

前面学习了js，引入方式使用的是<script s"XXX.js">，今天来学习引入文件的其他方式，使用ES6 模块化编程，学习组件化编程中的全局注册和局部注册的方法。

复习

回顾前面学习内容，用<script s"XXX.js">引入js文件

在html文件中引入js文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head><body><script src="learn.js"></script><script>console.log(this.content)learn()</script></body>

js文件

const content = "模块化";
const learner = "MRJJ_9";
function learn()
{console.log(`${learner}在学习${content}`);
}

ES6 模块化导出导入

先导出js文件

export const content = "模块化";
export const learner = "MRJJ_9";
export function learn()
{console.log(`${learner}在学习${content}`);
}

简单写法，也可以写成下面这样的

解构赋值

import * as mrjj from './learn.js' 

重命名为mrjj

导入js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="module">import * as mrjj from './learn.js'import {content} from './learn.js'console.log(content);console.log(mrjj.learner);mrjj.learn()
</script>
</body>
</html>

 

export default

导出一个完整的对象 export default

只能有一个export

export default{content : "模块化",learner : "MRJJ_9",learn(){console.log(`${this.learner}在学习${this.content}`);}
}

import mrjj_lr from './learnDefault.js'

需要取别名才能导入 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<script type="module">import mrjj_lr from './learnDefault.js'mrjj_lr.learn()</script>
</body>
</html>

但在浏览器中不能使用

全局注册

<body><div id="aside"></div><script type="module">import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'import Asider from './Asider.js'import Counter from './Counter.js'const asideApp=createApp(Asider);// 全局注册const asideVM=asideApp.component('Counter',Counter).mount("#aside");</script>
</body>

局部注册

const asideVM=asideApp.mount("#aside");

先在需要导入其他组件的文件里导入组件

import Counter from './Counter.js';

在export default添加components

export default{

    components:{Counter}}

相关文章：

前端基础（ES6 模块化）

目录 前言 复习 ES6 模块化导出导入 解构赋值 导入js文件 export default 全局注册 局部注册 前言 前面学习了js&#xff0c;引入方式使用的是<script s"XXX.js">&#xff0c;今天来学习引入文件的其他方式&#xff0c;使用ES6 模块化编程&#xff0c;…...

编程日记 2023/8/23 6:51:23

第七章，文章界面

7.1添加个人专栏 <template><div class="blog-container"><div class="blog-pages"><!-- 用于渲染『文章列表』和『文章内容』 --><router-view/><div class="col-md-3 main-col pull-left"><div cla…...

编程日记 2023/8/23 6:50:21

HJ102 字符统计

描述 输入一个只包含小写英文字母和数字的字符串&#xff0c;按照不同字符统计个数由多到少输出统计结果&#xff0c;如果统计的个数相同&#xff0c;则按照ASCII码由小到大排序输出。 数据范围&#xff1a;字符串长度满足 1≤len(str)≤1000 1≤len(str)≤1000 输入描述&a…...

编程日记 2023/8/23 6:49:20

Maven聚合项目（微服务项目）创建流程，以及pom详解

1、首先创建springboot项目作为父项目 只留下pom.xml 文件&#xff0c;删除src目录及其他无用文件 2、创建子项目 子项目可以是maven项目&#xff0c;也可以是springboot项目 3、父子项目关联 4、父项目中依赖管理 <?xml version"1.0" encoding"UTF-8&qu…...

编程日记 2023/8/23 6:48:19

Android OkHttp 源码浅析一

演进之路:原生Android框架不好用 ---- HttpUrlConnect 和 Apache HTTPClient 第一版 底层使用HTTPURLConnect 第二版 Square构建 从Android4.4开始 基本使用: val okhttp OkHttpClient()val request Request.Builder().url("http://www.baidu.com").buil…...

编程日记 2023/8/23 6:47:18

【Redis】——Redis基础的数据结构以及应用场景

什么是redis数据库 Redis 是一种基于内存的数据库&#xff0c;对数据的读写操作都是在内存中完成&#xff0c;因此读写速度非常快&#xff0c;常用于缓存&#xff0c;消息队列、分布式锁等场景。&#xff0c;Redis 还支持 事务 、持久化、Lua 脚本、多种集群方案&#xff08;主…...

编程日记 2023/8/23 6:46:17

SpringBoot+WebSocket搭建多人在线聊天环境

一、WebSocket是什么&#xff1f; WebSocket是在单个TCP连接上进行全双工通信的协议&#xff0c;可以在服务器和客户端之间建立双向通信通道。 WebSocket 首先与服务器建立常规 HTTP 连接&#xff0c;然后通过发送Upgrade标头将其升级为双向 WebSocket 连接。 WebSocket使得…...

编程日记 2023/8/23 6:45:16

推荐适用于不同规模企业的会计软件：选择最适合您企业的解决方案

高效的会计软件不仅可以协助企业进行财务管理&#xff0c;做出科学的财务决策&#xff0c;还可以对企业数字化转型提供助力。不同规模的企业需要根据其特定需求选择适合的会计软件。那么有什么适合不同规模企业的会计软件推荐吗&#xff1f; 小型企业的选择 对于小型企业而言&…...

编程日记 2023/8/23 6:44:15

Apache Zookeeper架构和选举机制

ZooKeeper是一个开源的分布式协调服务，旨在解决分布式系统中的一致性、配置管理、领导者选举等问题。它由Apache软件基金会维护，是Hadoop生态系统的一部分，被广泛用于构建高可用、可靠和具有一致性的分布式应用程序和服务。 ZooKeeper提供了一个层次化的命名空间，类似于文…...

编程日记 2023/8/23 6:43:13

车联网TCU USB的配置和使用

1 usb_composition命令 # cat /sbin/usb/target # cd /sys/class/android_usb/android0 # cat functions console shows that QCOM’s default configuration Usage: usb_composition [Pid] [HSIC] [PERSISTENT] [IMMEDIATE] [FROM_ADBD] usb_composition 9025 n y y Then this…...

编程日记 2023/8/23 6:42:09

Linux系统USB摄像头测试程序（三）_视频预览

这是在linux上usb摄像头视频预览程序&#xff0c;此程序用到了ffmpeg、sdl2、gtk3组件&#xff0c;程序编译之前应先安装他们。 #include <sys/ioctl.h> #include <sys/stat.h> #include <sys/types.h> #include <fcntl.h> #include <zconf.h> …...

编程日记 2023/8/23 6:41:07

目标检测任务数据集的数据增强中，图像水平翻转和xml标注文件坐标调整

需求&#xff1a; 数据集的数据增强中&#xff0c;有时需要用到图像水平翻转的操作&#xff0c;图像水平翻转后&#xff0c;对应的xml标注文件也需要做坐标的调整。 解决方法&#xff1a; 使用pythonopencvimport xml.etree.ElementTree对图像水平翻转和xml标注…...

编程日记 2023/8/23 6:40:07

系统架构的演变

随着互联网的发展&#xff0c;网站应用的规模不断扩大&#xff0c;常规的应用架构已无法应对&#xff0c;分布式服务架构以及微服务架构势在必行&#xff0c;必需一个治理系统确保架构有条不紊的演进。 单体应用架构 Web应用程序发展的早期&#xff0c;大部分web工程(包含前端…...

编程日记 2023/8/23 6:39:04

IDC发布《亚太决策支持型分析数据平台评估》报告，亚马逊云科技位列“领导者”类别

日前&#xff0c;领先的IT市场研究和咨询公司IDC发布《2023年亚太地区&#xff08;不含日本&#xff09;决策支持型分析数据平台供应商评估》1报告&#xff0c;亚马逊云科技位列“领导者”类别。IDC认为&#xff0c;亚马逊云科技在解决方案的协同性、敏捷性、完整性、及时性、经…...

编程日记 2023/8/23 6:38:03

C#之OpenFileDialog创建和管理文件选择对话框

OpenFileDialog 是用于图形用户界面&#xff08;GUI&#xff09;编程的一个类&#xff0c;它用于显示一个对话框&#xff0c;允许用户选择要打开的文件。在需要用户加载或打开文件的应用程序中&#xff08;如文本编辑器、图像查看器或文档处理器&#xff09;&#xff0c;这是一…...

编程日记 2023/8/23 6:37:02

Java中使用MongoTemplate 简单操作MongoDB

Autowired private MongoTemplate mongoTemplate; User&#xff1a;封装的对象 插入&#xff1a;mongoTemplate.insert(user); 根据id查询&#xff1a;mongoTemplate.findById(id, User.class); 查询所有&#xff1a;mongoTemplate.findAll(User.class); 条件查询&#…...

编程日记 2023/8/23 6:36:00

[Mac软件]Pixelmator Pro 3.3.12 专业图像编辑中文版

Pixelmator Pro是专为Mac设计的功能强大&#xff0c;美观且易于使用的图像编辑器。借助广泛的专业级无损图像编辑工具&#xff0c;Pixelmator Pro可使您发挥出最佳的照片效果&#xff0c;创建华丽的构图和设计&#xff0c;绘制&#xff0c;绘画&#xff0c;应用令人惊叹的效果&…...

编程日记 2023/8/23 6:34:59

吴恩达 GPT Prompting 课程

Prompting Guidelines 目录 Guidelines for PromptingPrompting Principles Principle 1: Write clear and specific instructions1.1: Use delimiters to clearly indicate distinct parts of the input1.2: Ask for a structured output1.3: Ask the model to check whether …...

编程日记 2023/8/23 6:33:57

gpt3.5写MATLAB代码剪辑视频，使之保留画面ROI区域

% 输入和输出文件名 inputVideoFile input_video.mp4; outputVideoFile output_video.mp4;% 创建 VideoReader 和 VideoWriter 对象 videoReader VideoReader(inputVideoFile); outputVideo VideoWriter(outputVideoFile, MPEG-4); outputVideo.FrameRate videoReader.Fra…...

编程日记 2023/8/23 6:32:56

设计模式二十一：状态模式（State Pattern）

一个对象的内部状态发生变化时&#xff0c;允许对象改变其行为。这种模式使得一个对象看起来好像在运行时改变了它的类&#xff0c;主要目的是将状态的行为从主要对象中分离出来&#xff0c;使得主要对象不必包含所有状态的逻辑&#xff0c;而是将每个状态的行为封装在独立的类…...

编程日记 2023/8/23 6:31:55

实战构建开放数据可视化平台，从采集到展示的全流程开发指南

今天想和大家分享一个完整的开放数据可视化项目实战经验。这个项目从数据采集到最终展示&#xff0c;涵盖了全流程开发的关键环节&#xff0c;特别适合想积累真实项目经验的朋友参考。 项目背景与目标 开放数据正在成为数字化转型的重要资源&#xff0c;但很多开发者面对海量…...

编程新知 2026/3/27 19:10:50

OpenClaw任务编排：GLM-4.7-Flash多步骤自动化设计

OpenClaw任务编排&#xff1a;GLM-4.7-Flash多步骤自动化设计 1. 为什么需要任务编排 上周我需要整理一批技术文档&#xff0c;这个任务包含多个步骤&#xff1a;从不同文件夹收集Markdown文件、统一格式、生成摘要、最后打包发送给团队成员。手动操作不仅耗时&#xff0c;还…...

编程新知 2026/3/27 18:28:32

基于spring和vue的企业原材料库存盘点食品厂管理系统

目录技术选型与架构设计核心功能模块划分数据库设计要点关键技术实现前端交互优化系统安全措施测试与部署方案扩展性设计项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与架构设计 后端采用Spring Boot框架&#xff0…...

编程新知 2026/3/27 15:28:58

8255A工作方式0实战：手把手教你用汇编语言驱动八路抢答器LED与数码管

8255A工作方式0实战&#xff1a;从零构建八路抢答器驱动框架 记得第一次在实验室见到8255A芯片时&#xff0c;那块黑色的DIP封装器件看起来平平无奇&#xff0c;直到它让八颗LED随着我的汇编指令跳起"灯光芭蕾"。本文将带你深入这个经典可编程并行接口芯片的实战应用…...

编程新知 2026/3/27 15:08:51

bully使用教程

bully是一款用于破解Wi-Fi Protected Setup&#xff08;WPS&#xff09;的工具&#xff0c;主要通过暴力破解WPS PIN码来获取无线网络的访问权限。WPS是一种简化Wi-Fi设备连接的协议&#xff0c;由于其设计缺陷&#xff0c;使得通过暴力破解PIN码来获取网络密钥成为可能。bully…...

编程新知 2026/3/27 14:32:29

从YOLOv5到YOLOv8：停车位检测模型演进与实战性能对比

1. YOLO系列模型的技术演进路径 YOLO&#xff08;You Only Look Once&#xff09;系列模型作为目标检测领域的标杆算法&#xff0c;从2015年诞生至今已经经历了多次重大迭代。每次版本更新都带来了显著的性能提升和架构创新&#xff0c;这使得YOLO系列在实时目标检测任务中始终…...

编程新知 2026/3/27 14:22:24

如何通过离线语音输入提升Android设备的文字录入效率

如何通过离线语音输入提升Android设备的文字录入效率 【免费下载链接】Sayboard An open-source on-device voice IME (keyboard) for Android using the Vosk library. 项目地址: https://gitcode.com/gh_mirrors/sa/Sayboard 在智能手机普及的今天&#xff0c;文字输…...

编程新知 2026/3/27 14:11:37

Cadence原理图网表导入Allegro PCB的5个关键步骤与避坑指南（2024最新版）

Cadence原理图网表导入Allegro PCB的5个关键步骤与避坑指南&#xff08;2024最新版&#xff09; 在电子设计自动化&#xff08;EDA&#xff09;领域&#xff0c;Cadence和Allegro的协同工作流程是硬件工程师日常开发的核心环节。网表作为连接原理图设计与PCB布局的桥梁&#xf…...

编程新知 2026/3/27 12:52:50

DeepSeek LintCode 3866.有效子数组的数量 public int validSubarrays(int[] nums)

这是关于LintCode 3866 “有效子数组的数量”的问题。这是一个典型的单调栈应用问题&#xff0c;需要计算数组中所有满足特定条件的子数组数量。 问题理解 有效子数组的定义&#xff1a; 对于数组 nums 中的某个子数组 nums[i..j]&#xff08;i ≤ j&#xff09;&#xff0c;如…...

编程新知 2026/3/27 12:18:27

MacBook Pro本地部署OpenClaw：百川2-13B量化模型7×24小时运行方案

MacBook Pro本地部署OpenClaw&#xff1a;百川2-13B量化模型724小时运行方案 1. 为什么选择MacBook Pro部署OpenClaw&#xff1f; 去年冬天&#xff0c;当我第一次尝试在MacBook Pro上部署量化版百川2-13B模型时&#xff0c;身边的朋友都觉得我疯了。"M1芯片能跑得动13B…...

编程新知 2026/3/27 10:59:51