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

后盾人JS -- 模块化开发

news 2026/3/31 20:19:27

 开发模块管理引擎

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

League-Toolkit技术解析：从原理到实践的全方位指南

League-Toolkit技术解析&#xff1a;从原理到实践的全方位指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是一…...

编程新知 2026/3/31 20:05:35

JAVA-- 突破默认限制：在Java8 Parallel Stream中高效管理自定义线程池

1. 为什么需要自定义线程池管理Parallel Stream Java8引入的Parallel Stream确实让并行编程变得简单&#xff0c;但很多开发者在使用过程中会发现一个尴尬的事实&#xff1a;所有并行流操作默认共享同一个ForkJoinPool公共线程池。这就好比小区里所有住户共用一个电表&#xff…...

编程新知 2026/3/31 18:13:49

如何突破B站视频获取限制？这款开源工具让你轻松搞定

如何突破B站视频获取限制&#xff1f;这款开源工具让你轻松搞定 【免费下载链接】bilibili-parse bilibili Video API 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-parse 你是否遇到过想要保存B站精彩视频却无从下手的困境&#xff1f;是否因复杂的技术门槛而…...

编程新知 2026/3/31 17:27:11

Qwen3-ForcedAligner-0.6B在字幕制作中的落地应用：SRT自动导出全流程

Qwen3-ForcedAligner-0.6B在字幕制作中的落地应用&#xff1a;SRT自动导出全流程 1. 引言&#xff1a;告别手动打轴&#xff0c;让字幕制作快10倍 如果你做过视频字幕&#xff0c;一定体会过手动打轴的痛苦。一集45分钟的视频&#xff0c;台词稿早就准备好了&#xff0c;但你…...

编程新知 2026/3/31 17:21:07

阿里内部强推性能优化全栈小册，Java程序员必备！

性能优化可以说是我们程序员的必修课&#xff0c;如果你想要跳出CRUD的苦海&#xff0c;成为一个更“高级”的程序员的话&#xff0c;性能优化这一关你是无论无何都要去面对的。为了提升系统性能&#xff0c;开发人员可以从系统的各个角度和层次对系统进行优化。除了最常见的代…...

编程新知 2026/3/31 17:08:55

AI原生应用领域链式思考：构建高效应用架构

AI原生应用领域链式思考&#xff1a;构建高效应用架构 关键词&#xff1a;AI原生应用、链式思考、应用架构、大模型协同、上下文管理 摘要&#xff1a;本文从AI原生应用的核心特征出发&#xff0c;结合"链式思考"这一关键设计模式&#xff0c;系统讲解如何构建高效能…...

编程新知 2026/3/31 16:34:18

QMCDecode：让音乐自由播放的开源格式转换工具

QMCDecode&#xff1a;让音乐自由播放的开源格式转换工具 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结果存…...

编程新知 2026/3/31 15:53:32

PMOS 在电源管理中的高效应用

1. PMOS在高侧开关中的天然优势 我第一次用PMOS做高侧开关是在一个车载设备项目里。当时需要控制12V电源的通断&#xff0c;尝试了几种方案后&#xff0c;发现PMOS简直是这个场景的"天选之子"。相比NMOS&#xff0c;PMOS最大的优势就是控制逻辑简单直接——栅极拉低导…...

编程新知 2026/3/31 15:39:27

TrackingNet评估实战：从注册到结果解析

1. TrackingNet评估平台入门指南 第一次接触TrackingNet这个目标跟踪领域的权威评估平台时&#xff0c;我和大多数研究者一样有点懵。这个平台不像GitHub那样有直观的界面&#xff0c;操作流程也相对复杂。不过别担心&#xff0c;跟着我的实战经验走&#xff0c;保证你能少踩8…...

编程新知 2026/3/31 14:21:35

CVPR 2026 | 全架构通吃！MatchED 插件式模块，CNN/Transformer/扩散模型都能无缝集成

点击上方“小白学视觉”&#xff0c;选择加"星标"或“置顶” 重磅干货&#xff0c;第一时间送达边缘检测是计算机视觉领域的基石任务&#xff0c;从图像分割、深度估计到3D重建&#xff0c;几乎所有高阶视觉任务都依赖精准的边缘信息。但长期以来&#xff0c;一个核心…...

编程新知 2026/3/31 13:39:04