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

后盾人JS -- 模块化开发

news 文章来源：https://blog.csdn.net/chestnut_orenge/article/details/145536749 2025/5/18 17:29:18

 开发模块管理引擎

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

IDEA查看项目依赖包及其版本

一.IDEA将现有项目转换为Maven项目 在IntelliJ IDEA中，将现有项目转换为Maven项目是一个常见的需求，可以通过几种不同的方法来实现。Maven是一个强大的构建工具，它可以帮助自动化项目的构建过程，管理依赖关系，以及其他许多方面。 添加Maven支持 如果你的项目还没有pom.xm…...

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

【数据结构】_栈与队列经典算法OJ：栈与队列的互相实现

目录 1. 用队列实现栈 1.1 题目链接及描述 1.2 解题思路 1.3 程序 2. 用栈实现队列 2.1 题目链接及描述 2.2 解题思路 2.3 程序 1. 用队列实现栈 1.1 题目链接及描述 1. 题目链接 &#xff1a; 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 2. 题目描…...

编程日记 2025/2/11 17:45:50

SAP-ABAP:ROLLBACK WORK使用详解

在SAP ABAP 中&#xff0c;ROLLBACK WORK 语句用于回滚当前事务&#xff08;LUW&#xff0c;Logical Unit of Work&#xff09;&#xff0c;撤销自上次提交或回滚以来的所有数据库更改。它通常与 COMMIT WORK 配合使用&#xff0c;确保数据一致性。 关键点&#xff1a; 回滚作…...

编程日记 2025/2/11 17:41:44

DeepSeek R1 Distill Llama 70B（免费版）API使用详解

DeepSeek R1 Distill Llama 70B&#xff08;免费版&#xff09;API使用详解 在人工智能领域&#xff0c;随着技术的不断进步&#xff0c;各种新的模型和应用如雨后春笋般涌现。今天&#xff0c;我们要为大家介绍的是OpenRouter平台上提供的DeepSeek R1 Distill Llama 70B&…...

编程日记 2025/2/11 17:40:41

如何避免大语言模型中涉及丢番图方程的问题

希尔伯特第十问题是一个著名的数学问题，涉及不定方程（又称为丢番图方程）的可解答性。然而在大模型中，我们希望问题都是确定的可解的，或者说要尽可能的想办法避免不确定的不可解问题。由于丢番图方程问题是不可判定问题（即不存在一个有效的算法能够解决该类问题的所有实例…...

编程日记 2025/2/11 17:39:39

flutter 获取网络图片的尺寸

获取网络图片的尺寸 import dart:async;import package:flutter/widgets.dart;/// Image Util. class ImageUtil {late ImageStreamListener _listener;late ImageStream _imageStream;/// get image width height&#xff0c;load error throw exception.&#xff08;unit px…...

编程日记 2025/2/11 17:38:38

MySQL主从同步+binlog

一、简介 MySQL内建的复制功能是构建大型&#xff0c;高性能应用程序的基础 通过将MySQL的某一台主机&#xff08;master&#xff09;的数据复制到其他主机&#xff08;slaves&#xff09;上&#xff0c;并重新执行一遍来执行 复制过程中一台服务器充当主服务器&#xff0c;而…...

编程日记 2025/2/11 17:31:24

实践深度学习：构建一个简单的图像分类器

引言 深度学习在图像识别领域取得了巨大的成功。本文将指导你如何使用深度学习框架来构建一个简单的图像分类器&#xff0c;我们将以Python和TensorFlow为例&#xff0c;展示从数据准备到模型训练的完整流程。 环境准备 在开始之前&#xff0c;请确保你的环境中安装了以下工…...

编程日记 2025/2/11 17:25:14

蔚来C++面试题及参考答案

栈了解吗？ 栈在计算机科学中是一种重要的数据结构，在 C++ 编程里有不同层面的体现，分别是数据结构层面和内存管理层面。 从数据结构角度来看，栈遵循后进先出（LIFO）的原则。就像一摞盘子，最后放上去的盘子总是最先被拿走。在 C++ 标准模板库（STL）中，提供了std::stac…...

编程日记 2025/2/11 17:19:06

C# Winform怎么设计串口,客户端和相机控件界面显示

首先我们必须把这个类创建好 INIAPI using System; using System.Text; using System.Runtime.InteropServices;namespace Ini {public class IniAPI{#region INI文件操作/** 针对INI文件的API操作方法&#xff0c;其中的节点&#xff08;Section)、键&#xff08;KEY&#x…...

编程日记 2025/2/11 17:18:03