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

后盾人JS -- 模块化开发

news 2026/2/8 20:15:02

 开发模块管理引擎

<!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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/2/7 17:44:40

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/2/3 12:56:31

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/2/6 5:04:18