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

后盾人JS -- 模块化开发

news 2026/5/30 17:02:41

 开发模块管理引擎

<!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>let module = (function(){const moduleList = {}function define(name,modules,action){modules.map((m,i)=>{modules[i] = moduleList[m]})moduleList[name] = action.apply(null,modules)}return {define}})()module.define("hd",[],function(){return{first(arr){return arr[0]},max(arr,key){return arr.sort((a,b)=>b[key]-a[key])[0]}}})module.define("lesson",["hd"],function(hd){let data = [{name:"js",price:199},{name:"mysql",price:78}]hd.max(data,"price")})module.define("a",[],function(a){return{site:"后盾人",url:"houdunren.com"}})module.define("b",["a"],function(a){a.site = "hdcms"})module.define("c",["a"],function(a){console.log(a)})</script>
</body>
</html>

模块的基本使用

模块基本使用.html

<!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 { title, url, show } from "./hd.js"   //这个路径必须写console.log(url)</script>
</body></html>

hd.js

let title = "后盾人"
let url = "houdunren.com"
function show() {console.log("我了个豆")
}
export{title,url,show}   //把url开放

模块延迟解析与严格模式

使用模块的时候默认就是严格模式

<!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><button>后盾人</button><script type="module">import {}from"./hd.js"console.log(this)</script><script>console.log(this)</script>
</body>
</html>

作用域在模块中的体现

只有导出接口才可以正常的使用私有

解析只会发生一次，可以减少解析时间，避免解析的错误

模块的具名导出与导入

模块的导入要有名字，没有名字会报错

如果有很多的接口需要导入的话，可以这样写：

<!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 api from "./hd.js"console.log(api.url)console.log(api.show())</script>
</body>
</html>

如果有的导入了但是没有使用也会被裁剪掉

别名使用

import {site as s}from "./hd.js"

这就是别名的使用（主要是简洁）

default默认导出

这是default默认导出，接收的时候使用默认导出的数据

export default function show() {console.log("我了个豆")
}

混合导入导出

<!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 api from "./hd.js"console.log(api.default.show())console.log(api.url)</script>
</body>
</html>
let title = "后盾人"
let url = "houdunren.com"
export default
{show
} 
function show() {console.log("我了个豆")
}
export{title,url}   //把url开放

最好使用具名导出，默认导出的时候最好按照原来的模块起名字

动态模块加载

<!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>import("./hd.js").then(module =>{console.log(module)})</script>
</body>
</html>

WEBPACK

WEBPACK是打包工具

把一堆js文件打包成文件夹15：

执行完这个init就产生了一个.json（配置文件）

这是安装：

点开配置文件添加一个命令：

"dev" : "webpack --mode development --watch"

 index.js是入口文件

因为添加过命令了，所以可以直接

进行编译

编译好之后就可以引入了

相关文章：

后盾人JS -- 模块化开发

开发模块管理引擎 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </he…...

编程日记 2025/2/11 19:00:42

CNN卷积神经网络多变量多步预测，光伏功率预测（Matlab完整源码和数据)

代码地址&#xff1a;CNN卷积神经网络多变量多步预测&#xff0c;光伏功率预测&#xff08;Matlab完整源码和数据) 标题&#xff1a;CNN卷积神经网络多变量多步预测&#xff0c;光伏功率预测 一、引言 1.1 研究背景及意义 随着全球能源危机的加剧和环保意识的提升&#xff…...

编程日记 2025/2/11 18:59:41

深入 JVM 虚拟机：字符串常量池演变与 intern() 方法工作原理解析

🚀 作者主页： 有来技术 🔥 开源项目： youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页： GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 📝 如有错误敬请纠正！ 前言 在 Java 开发中，字符串常量池（String Constant…...

编程日记 2025/2/11 18:57:38

单向/双向，单层/多层RNN输入输出维度问题

单向/双向&#xff0c;单层/多层RNN输入输出维度问题 RNN单层单向RNNRnn CellRnn 双层单向RNN单层双向RNN双层双向RNN RNN 单层单向RNN Rnn Cell 循环神经网络最原始的Simple RNN实现如下图所示: 下面写出单个时间步对应的Rnn Cell计算公式: 如果用矩阵运算视角来看待的话&…...

编程日记 2025/2/11 18:48:26

chromium-mojo

https://chromium.googlesource.com/chromium/src//refs/heads/main/mojo/README.md 相关类&#xff1a;https://zhuanlan.zhihu.com/p/426069459 Core:https://source.chromium.org/chromium/chromium/src//main:mojo/core/README.md;bpv1;bpt0 embedder:https://source.chr…...

编程日记 2025/2/11 18:47:20

ZooKeeper 的典型应用场景：从概念到实践

引言 在分布式系统的生态中&#xff0c;ZooKeeper 作为一个协调服务框架&#xff0c;扮演着至关重要的角色。它的设计目的是提供一个简单高效的解决方案来处理分布式系统中常见的协调问题。本文将详细探讨 ZooKeeper 的典型应用场景&#xff0c;包括但不限于配置管理、命名服务…...

编程日记 2025/2/11 18:46:19

缓存组件＜keep-alive＞

缓存组件<keep-alive> 1.组件作用 组件, 默认会缓存内部的所有组件实例&#xff0c;当组件需要缓存时首先考虑使用此组件。 2.使用场景 场景1&#xff1a;tab切换时&#xff0c;对应的组件保持原状态&#xff0c;使用keep-alive组件 使用&#xff1a;KeepAlive | Vu…...

编程日记 2025/2/11 18:44:14

YouBIP 项目

技术方案 难点 成效 项目背景 库存管理涉及大量数据&#xff0c;如何在前端实现高效的数据展示和交互是一个挑战。库存管理系统需要处理大量的入库、出库、盘点等操作&#xff0c;尤其是在大企业或多仓库场景下&#xff0c;高并发操作可能导致数据库锁争用、响应延迟等问题。…...

编程日记 2025/2/11 18:37:02

react概览webpack基础

react概览 课程介绍 webpack 构建依赖图->bundle 首屏渲染&#xff1a; 减少白屏等待时间 数据、结构、样式都返回。需要服务器的支持 性能优化 ***webpack干的事情 模块化开发 优势&#xff1a; 多人团队协作开发 可复用 单例&#xff1a;全局冲突 闭包 模块导入的顺序 req…...

编程日记 2025/2/11 18:36:01

DeepSeek 助力 Vue 开发：打造丝滑的步骤条

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…...

编程日记 2025/2/11 18:32:56

STM32的HAL库开发---高级定时器---互补输出带死区实验

一、互补输出简介 互补输出&#xff1a;OCx输出高电平&#xff0c;则互补通道OCxN输出低电平。OCx输出低电平&#xff0c;则互补通道OCxN输出高电平。 带死区控制的互补输出&#xff1a;OCx输出高电平时&#xff0c;则互补通道OCxN过一会再输出输出低电平。这个时间里输出的电…...

编程日记 2025/2/11 18:30:54

Vue07

一、Vuex 概述 目标&#xff1a;明确Vuex是什么&#xff0c;应用场景以及优势 1.是什么 Vuex 是一个 Vue 的 状态管理工具&#xff0c;状态就是数据。 大白话&#xff1a;Vuex 是一个插件&#xff0c;可以管理 Vue 通用的数据 (多组件共享的数据)。例如&#xff1a;购物车数…...

编程日记 2025/2/11 18:29:53

【CXX-Qt】2 CXX-Qt #[cxx_qt::bridge] 宏指南

#[cxx_qt::bridge] 宏是用于在 Rust 中创建一个模块&#xff0c;该模块能够桥接 Rust 和 Qt&#xff08;通过 C&#xff09;之间的交互。它允许你将 Rust 类型暴露给 Qt 作为 QObject、Q_SIGNAL、Q_PROPERTY 等&#xff0c;同时也能够将 Qt 的特性和类型绑定到 Rust 中&#xf…...

编程日记 2025/2/11 18:21:45

鸿蒙接入支付宝SDK后模拟器无法运行，报错error: install parse native so failed.

鸿蒙项目接入支付宝后&#xff0c;运行提示error: install parse native so failed. 该问题可能由于设备支持的 Abi 类型与 C 工程中的不匹配导致. 官网error: install parse native so failed.错误解决办法 根据官网提示在模块build-profile.json5中添加“x86_64”依然报错 问…...

编程日记 2025/2/11 18:15:37

局域网使用Ollama（Linux）

解决局域网无法连接Ollama服务的问题 在搭建和使用Ollama服务的过程中&#xff0c;可能会遇到局域网内无法连接的情况。经过排查发现&#xff0c;若开启了代理软件&#xff0c;尤其是Hiddify&#xff0c;会导致此问题。这一发现耗费了我数小时的排查时间&#xff0c;希望能给大…...

编程日记 2025/2/11 18:13:32

Deepseek系列从v3到R易背面经版

deepseek v3 base要点 MTP : Multi-Token Prediction 训练时&#xff1a; 1. 把前一个block中input tokens经过embedding layer和transformer block的输出&#xff0c;进入output head之前的内容记为h&#xff0c;与下一个block的input tokens经过embedding layer输出的内容都…...

编程日记 2025/2/11 18:12:29

Redis深入学习

目录 Redis是什么&#xff1f; Redis使用场景 Redis线程模型 Redis执行命令是单线程的为什么还这么快&#xff1f; Redis持久化 Redis 事务 Key 过期策略 Redis 和 mysql 如何保证数据一致&#xff1f; 缓存穿透 缓存击穿 缓存雪崩 Redis是什么&#xff1f; redis是一…...

编程日记 2025/2/11 18:11:26

《从入门到精通：蓝桥杯编程大赛知识点全攻略》（十一）-回文日期、移动距离、日期问题

前言 在这篇博客中&#xff0c;我们将通过模拟的方法来解决三道经典的算法题&#xff1a;回文日期、移动距离和日期问题。这些题目不仅考察了我们的基础编程能力&#xff0c;还挑战了我们对日期处理和数学推理的理解。通过模拟算法&#xff0c;我们能够深入探索每个问题的核心…...

编程日记 2025/2/11 17:56:05

在Uniapp中使用阿里云OSS插件实现文件上传

在开发小程序时&#xff0c;文件上传是一个常见的需求。阿里云OSS&#xff08;Object Storage Service&#xff09;是一个强大的云存储服务&#xff0c;可以帮助我们高效地存储和管理文件。本文将介绍如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。 1. 准备工作 首…...

编程日记 2025/2/11 17:55:02

9 数据流图

9 数据流图 9.1数据平衡原则 子图缺少处理后的数据操作结果返回前端应用以及后端数据库返回操作结果到数据管理中间件。 9.2解题技巧 实件名 存储名 加工名 数据流...

编程日记 2025/2/11 17:53:00

机器学习赋能6G近场通信：从信道估计到波束赋形的智能革命

1. 项目概述&#xff1a;当6G遇见近场&#xff0c;为何机器学习成为破局关键&#xff1f;如果你关注过5G到6G的技术演进路线&#xff0c;会发现一个核心趋势&#xff1a;天线阵列的规模正在从“大规模”走向“极大规模”。这不仅仅是数量的堆砌&#xff0c;更是通信物理原理的一…...

编程新知 2026/5/26 3:22:04

钱钟书《围城》第1-5章阅读笔记：一场关于人生困境的提前预演

前言 钱钟书先生的《围城》被誉为"新儒林外史"&#xff0c;是中国现代文学史上风格独特的讽刺经典。这部创作于20世纪40年代的长篇小说&#xff0c;以抗战初期为背景&#xff0c;通过主人公方鸿渐的人生轨迹&#xff0c;深刻揭示了知识分子群体的精神困境与人性弱点。…...

编程新知 2026/5/26 0:20:12

Windows文件夹共享

目标&#xff1a;同一局域网实现在一台计算机上共享文件夹&#xff0c;在另一台电脑访问一、电脑A 1.点击要共享的文件夹 -> 属性 -> 共享2.添加Everyone用户组3.控制面板中网络共享关闭密码保存&#xff0c;在访问时不用输入账号密码。二、电脑B 1.在文件资源管理器路径…...

编程新知 2026/5/25 23:39:42

2026年一键生成论文工具对比实测：5款神器从选题到格式全流程护航

写论文的焦虑&#xff0c;是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手&#xff0c;文献检索耗时费力&#xff0c;逻辑框架反复推翻&#xff0c;格式排版让人抓狂&#xff0c;查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...

编程新知 2026/5/25 23:31:29

告别DLL缺失烦恼！Visual C++运行库合集一键搞定Windows应用依赖问题

告别DLL缺失烦恼&#xff01;Visual C运行库合集一键搞定Windows应用依赖问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经在打开某个软件或游戏时…...

编程新知 2026/5/25 21:11:33

总线式智能提示灯系统设计：从恒流驱动到模块化架构

1. 项目概述&#xff1a;从传统到智能的剧场提示灯系统革新在剧场、演播室或者大型活动现场的后台&#xff0c;如果你待过&#xff0c;一定对那套“红灯停&#xff0c;绿灯行”的提示灯系统不陌生。导演或舞台监督通过对讲机喊“Standby”&#xff08;准备&#xff09;&#xf…...

编程新知 2026/5/25 20:22:05

3步快速解密中兴光猫配置：ZET工具终极实战指南

3步快速解密中兴光猫配置&#xff1a;ZET工具终极实战指南 【免费下载链接】ZET-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/ze/ZET-Optical-Network-Terminal-Decoder 中兴光猫配置解密工具是每个网络管理员必备的神器&#xff01;Z…...

编程新知 2026/5/25 20:09:55

AI算法工程师如何进行模型部署？这2个工具+3个技巧，快速上线

对于软件测试从业者来说&#xff0c;模型部署并不是一个陌生的概念——随着AI功能逐渐渗透到各类应用软件中&#xff0c;测试工程师不仅需要验证模型输出的准确性&#xff0c;更需要理解部署流程对模型稳定性、响应速度和结果一致性的影响。很多测试同学会有这样的困惑&#xf…...

编程新知 2026/5/25 17:53:03

手机也能玩转无人机仿真：用安卓QGC App连接同一WiFi下的PX4 JMAVSim模拟器

手机也能玩转无人机仿真&#xff1a;用安卓QGC App连接同一WiFi下的PX4 JMAVSim模拟器 无人机开发者和爱好者们&#xff0c;是否曾想过用手机就能完成整个无人机仿真测试流程&#xff1f;告别笨重的电脑束缚&#xff0c;只需一部安卓设备&#xff0c;就能在沙发上调试飞控算法。…...

编程新知 2026/5/25 17:26:09

Sora 2 GIF导出速度提升300%？20年多媒体架构师亲授GPU加速转码链路（CUDA 12.4 + cuVID硬编实测）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Sora 2 GIF导出方法概览 Sora 2 并非 OpenAI 官方发布的模型&#xff0c;当前&#xff08;截至2024年&#xff09;并无名为“Sora 2”的公开产品。因此&#xff0c;所谓“Sora 2 GIF导出”实为社区对视频生成工…...

编程新知 2026/5/25 17:06:25