前端开发记录
前端开发记录
加密
前端占位符/图片
前端在写页面的时候，必然会遇到有图片的页面，如果暂时需要一张图片占位，又不想将图片放在项目中，那么就可以考虑下面推荐的在线占位图
使用
https://via.placeholder.com/200x500.png/4D638D
200x500==> 对应尺寸 可以修改
4D638D==> 对应的是图片颜色
类库& 组件
类库（library）和组件（component）在前端开发中面对的问题不同，因此两者也有一些区别。
通常而言，类库更侧重于提供一些独立的功能、方法或工具函数等，例如 jQuery、Lodash 等。这些类库通常不涉及到页面结构和样式等方面，而是提供比较底层的 API，供开发者自由组合使用，实现自己的需求。
而组件则更倾向于把一些相对独立的页面元素封装起来，以组件的形式提供给开发者使用。例如按钮组件、表单组件、轮播图组件等。组件包含了对应的 HTML、CSS 样式和 JavaScript 交互逻辑等，可以帮助开发者快速搭建页面，并且保证了页面元素的一致性和可复用性。
因此，虽然类库和组件在某些方面可能有一些重叠，但两者的定位和作用还是有所不同的。
脚本deploy.sh使用
VuePress 项目的自动化部署，包括构建静态文件、初始化 Git 仓库、将静态文件推送到远程仓库的 gh-pages 分支
数据差值过大处理是，使用图表展示不好看
目前使用场景：echats 3D饼图，由于数据差值过大，导致展示高的超出容器，底的几乎看不到。通过 数据归一化或数据映射 方案解决
数据归一化或数据映射是一个非常实用的技术，不仅适用于ECharts的数据展示优化，在很多涉及数据分析、机器学习、图形学等领域都有广泛应用。以下是拓展后的思路和方法，帮助你在遇到类似问题时能够快速应用。
数据归一化/映射的通用步骤
- 确定目标范围
- 首先明确你希望将数据映射到的目标范围。这个范围可以根据你的具体需求来设定，比如为了视觉效果更好的图表展示，或者为了满足某些算法对输入数据的要求。
- 计算原始数据的极值
- 获取原始数据集中的最小值（
min_original）和最大值（max_original）。这一步对于线性映射是必要的，但如果是其他类型的映射（如对数转换），则需要根据具体情况调整。
- 获取原始数据集中的最小值（
- 进行数据映射
- 根据选择的方法（最常见的是线性映射）对数据进行转换。这里提供几种不同的映射方式：
线性映射
这是最常见的方法，公式如下：
\text{new_value} = (\text{original_value} - \text{min_original}) \times \frac{\text{max_target} - \text{min_target}}{\text{max_original} - \text{min_original}} + \text{min_target}
对数映射
当数据分布极其不均匀时，可以考虑使用对数变换来压缩数值范围： new_value=log(original_value)/log(base)new_value=log(original_value)/log(base) 其中，base可以根据实际情况调整。
Min-Max标准化
常用于机器学习中，将数据缩放到[0, 1]区间：
\text{new_value} = \frac{\text{original_value} - \text{min_original}}{\text{max_original} - \text{min_original}}
Z-Score标准化
同样常用于机器学习领域，将数据转换为均值为0，标准差为1的标准正态分布形式：
\text{new_value} = \frac{\text{original_value} - \mu}{\sigma}
其中：
- μ 是原始数据的平均值（mean）
- σ 是原始数据的标准差（standard deviation）
实际应用中的注意事项
- 保留原始数据：在进行任何类型的数据转换之前，建议保留一份原始数据的副本，以便后续分析或验证。
- 透明度与解释性：确保转换过程透明，并且用户了解数据是如何被处理的。这对于保持数据分析结果的可信度非常重要。
- 灵活性：根据不同场景灵活选择适合的数据处理方法。例如，在数据可视化中可能更倾向于使用线性映射以保持直观性；而在算法模型训练时，则可能需要Z-Score标准化等方法来提高模型性能。
通过记录这些方法和注意事项，你可以在未来面对类似的问题时迅速找到合适的解决方案。这种方法不仅能提升工作效率，还能增强数据分析的质量和可靠性。
HBuilder真机调试检测不到荣耀Magic UI系列（包括手机和电脑）解决办法
打开开发者模式，选择USB配置 为
音频来源如果没有这个选项，则再设置中搜索选择USB配置
跨域问题
开发html程序网页程序在chrome中预览时都会遇到跨域问题,目前谷歌浏览器支持通过chrome的参数来禁用跨域
下面以Chrome为例： 目前安装位置
C:\Program Files\Google\Chrome\Application>
- 临时 ：【
C:\Program Files\Google\Chrome\Application>chrome.exe --disable-web-security --user-data-dir=C:\tmp\chrome-test】- 进入谷歌安装位置
C:\Users\ThinkPad\AppData\Local\Google\Chrome\Application\ - cmd 下执行
chrome.exe --disable-web-security --user-data-dir=C:\tmp\chrome-test
- 进入谷歌安装位置
- 长期：复制一个新的chrome浏览器快捷方式, 右键打开属性，在目标地址后面加上如下参数:
--args --disable-web-security --user-data-dir=C:/tmp- tip：C:/tmp 可以指定自己的目录位置 用于存放临时的用户数据
执行完毕, 当看到浏览器顶部有提示则说明取消跨域成功
其他
1. console 浏览器控制台中的打印
1.1 console.group 能将其下面的输出都折叠起来
console.group('🔍 [自动刷新] 数据对比详情')
console.log('📋 旧数据快照 (oldSnapshot):')
console.log(oldSnapshot)
console.groupEnd()