【ES6复习笔记】ES6的模块化(18)
模块化的概念
模块化是指将一个复杂的系统分解为多个模块,每个模块完成一个特定的功能,模块之间通过接口进行通信。模块化的目的是提高代码的可读性、可维护性和可重用性。
模块化规范产品, ES6 之前的模块化规范有:
- CommonJS ====> NodeJS、Browserify
- AMD ====> requireJS
- CMD ====> seaJS
模块化的基本语法
- 导出模块:使用
export关键字导出模块中的变量、函数或类。 - 导入模块:使用
import关键字导入其他模块中的变量、函数或类。
导出模块的方式
- 默认导出:使用 export default 关键字导出一个默认的模块。
- 命名导出:使用 export 关键字导出多个命名的模块。
分别导出
export let school = '星达网络'
export function teach(){console.log('教技能')
}
统一导出
//统一暴露
let school = '星达网络';
function findjob(){console.log('找工作吧');
}
export {school,findjob}
默认导出
//默认暴露
export default {school:'ATGUIGU',change:function(){console.log('我们可以改变你')}
}
导入模块的方式
- 默认导入:使用
import defaultName from 'module';导入默认模块。 - 命名导入:使用
import { name1, name2 } from 'module';导入多个命名模块。 - 全部导入:使用
import * as name from 'module';导入模块中的所有内容。
1. 默认导入(只针对默认暴露)
import m3 from "./src/js/m3.js"
2. 命名导入( 解构赋值方式)
import {school,teach} from "./src/js/m1.js"
import {school as guigu,findJob} from "./src/js/m2.js"
import {default as m3 } from "./src/js/m3.js"
3. 全部导入
import * as m1 from "./src/js/m1.js"
import * as m2 from "./src/js/m2.js"
import * as m3 from "./src/js/m3.js"
4.HTML中引入
<script src="./src//js/app.js" type=modeule></script>
示例代码
// m1.js
export let school = '星达网络';export function teach() {console.log("我们可以教给你开发技能");
}// m2.js
let school = '星达网络';function findJob() {console.log("我们可以帮助你找工作!!");
}export { school, findJob };// m3.js
export default {school: 'ATGUIGU',change: function() {console.log("我们可以改变你!!");}
}// app.js
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';console.log(m1);
console.log(m2);
console.log(m3);m1.teach();
m2.findJob();
m3.default.change();
相关文章:
【ES6复习笔记】ES6的模块化(18)
模块化的概念 模块化是指将一个复杂的系统分解为多个模块,每个模块完成一个特定的功能,模块之间通过接口进行通信。模块化的目的是提高代码的可读性、可维护性和可重用性。 模块化规范产品, ES6 之前的模块化规范有: CommonJS …...
兰亭妙微:专注医疗 UI 设计,点亮数字化医疗新视界
医疗行业界面解决方案以医患使用者为中心,遵循行业使用习惯和表达方式,优化使用流程、设计简洁、人性化的操作界面,采用插画、三维动画、微动效的创作方法,让用户感受到愉悦易用美观的使用体验。蓝蓝设计与知名企业合作项目有&…...
c# 线程 AutoResetEvent 的Set()函数多次调用
本文部分内容摘自ChatGPT 在 C# 中,AutoResetEvent 是一种用于线程同步的机制,它的行为类似于一个信号量,主要用于在多线程环境中发出信号并控制线程的执行。AutoResetEvent 的主要特点是每当调用 Set() 方法时,信号会被设置&…...
汽车行业的MES系统方案(附案例资料合集)
针对汽车行业的MES系统方案,以下是一些关键点和实施案例: 核心功能: 实时监控:MES系统通过传感器和物联网技术实时监控生产线上的每一个环节,确保信息的及时传递。数据分析:系统对收集的数据进行深度分析&a…...
基于监督学习的神经网络控制算法详细介绍和例程
基于监督学习的神经网络控制算法通常用于对已有数据进行训练,以学习输入与输出之间的映射关系。下面我将详细介绍这种算法的原理和流程,并提供一个简单的例程: 算法原理: 输入:给定一组已知的输入信号和对应的输出控制…...
springMVC-请求响应
springmvc——一 站式web框架,核心是处理http请求响应。 前后端分离:需要序列化,服务端把数据序列化成字符串或者流给前端,前端又把json转成对象,前端的叫反序列化。前端把数据序列化转成字符串给服务器,服…...
数据交易和联邦学习的背景下的安全属性
数据交易和联邦学习的背景下的安全属性 在数据交易和联邦学习的背景下,安全属性对于保护数据隐私、确保系统可靠性和维护交易公平性至关重要。以下将分析文章中涉及的安全属性以及分析这些属性的目的。 涉及的安全属性 双向认证:文章虽未明确提及传统意义上的双向认证机制,…...
顶顶通呼叫中心中间件mod_cti模块安全增强,预防盗打风险(mod_cti基于FreeSWITCH)
文章目录 前言联系我们mod_cti版本支持安全加强说明 前言 FreeSWITCH暴露在公网最大的风险就是被不法之人盗打 出现盗打的主要原因以下几点: 分机密码太简单或者密码泄露了拨号方案配置不合理sofia配置错误 所以我们给顶顶通呼叫中心中间件添加了安全加强功能&am…...
Datawhale-AI冬令营二期
目录 一、番茄时钟(1)输入Prompt(2)创建 HTML 文件解析1:HTML结构解析2:计时器内容解析3:按钮区域解析4:脚本引用 (3)使用JavaScript实现时钟功能解析1&#…...
Python的秘密基地--[章节7] Python 并发与多线程编程
第7章:Python 并发与多线程编程 随着计算机硬件的发展,多核处理器已经成为主流。为了更好地利用多核资源,提高程序的运行效率,Python 提供了并发(Concurrency)和并行(Parallelism)编…...
每天五分钟机器学习:凸函数
一、凸函数的定义:何为“凸”? 在数学上,凸函数的概念源于几何直观——想象一个平面上的曲线,如果在这条曲线上的任意两点之间连线段总是位于曲线的下方(或恰好与曲线重合),则这条曲线所对应的函数即为凸函数。更正式地,对于定义在实数集(或某个子集)上的函数f(x),…...
Merry Christmas HTML
简单分享 Merry Christmas HTML 设计的核心代码 HTML: <body class"card"> <div class"dialog"><div class"dialog-in"><div class"dialog-msg"><div class"heading">Youve got a post card!…...
JavaScript甘特图 dhtmlx-gantt
背景 需求是在后台中,需要用甘特图去展示管理任务相关视图,并且不用依赖vue,兼容JavaScript原生开发。最终使用dhtmlx-gantt,一个半开源的库,基础功能免费,更多功能付费。 甘特图需求如图: 调…...
阿里云-将旧服务器数据与配置完全迁移至新服务器
文章目录 一:创建镜像二:将创建好的镜像复制到新服务器所在的目标地域(如果新服务器与镜像在同一地域就不用进行这一操作)三:将镜像配置到新服务器上四:导出安全组(如果新服务器与旧服务器使用同…...
以EM算法为例介绍坐标上升(Coordinate Ascent)算法:中英双语
中文版 什么是 Coordinate Ascent 算法? Coordinate Ascent(坐标上升)是一种优化算法,它通过在每次迭代时优化一个变量(或一个坐标),并保持其他变量不变,逐步逼近最优解。与坐标下…...
Spark生态圈
Spark 主要用于替代Hadoop中的 MapReduce 计算模型。存储依然可以使用 HDFS,但是中间结果可以存放在内存中;调度可以使用 Spark 内置的,也可以使用更成熟的调度系统 YARN 等。 Spark有完善的生态圈: Spark Core:实现了…...
CSDN编辑器
这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...
【信息系统项目管理师】高分论文:论信息系统项目的资源管理(智慧储电站系统)
更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 论文1、规划资源管理2、估算活动资源3、获取资源4、建设团队5、管理团队6、控制资源论文 根据国家2030年前碳达峰行动方案,提出全面推进风电、太阳能发电大规模开发和高质量发展。XX地国家电网启动了“数字李…...
Web开发:ORM框架之使用Freesql的分表分页写法
一、自动分表(高版本可用) 特性写法 //假如是按月分表:[Table(Name "log_{yyyyMM}", AsTable "createtime2022-1-1(1 month)")]注意:①需包含log_202201这张表 ②递增规律是一个月一次,确保他们…...
Unity功能模块一对话系统(1)前置准备
也许你也曾被游戏中的对话系统深深吸引,那些精心设计的对白、鲜活的角色配音、甚至是简单的文字对话,往往能让玩家产生强烈的代入感和情感共鸣。如果你正在开发一款游戏,或者计划为你的项目加入一个引人入胜的对话系统,那么 Unity…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...
React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构
React 实战项目:微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇!在前 29 篇文章中,我们从 React 的基础概念逐步深入到高级技巧,涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
文件上传漏洞防御全攻略
要全面防范文件上传漏洞,需构建多层防御体系,结合技术验证、存储隔离与权限控制: 🔒 一、基础防护层 前端校验(仅辅助) 通过JavaScript限制文件后缀名(白名单)和大小,提…...
