大前端
未读
项目中z-index的规划设计技术规范：夹层模型
整个结构分为APP层和页面组件层。APP只有一个，但页面有很多。
12345671~999：都是页面内比较正常的元素1000~1999：弹窗的灰色遮罩背景之类的组件，或者是能够遮住全屏的加载动画2000~2999：弹窗面板，比如突然弹出来一个界面提示框，登录框、警告框之类的3000~3999：页面鼠标交互层：比如在这个界面，会有一个鼠标点击一下就能让屏幕上多出来一个小桃心的上浮动画，这个小桃心就可以用绝对定位一个div来实现。但他的z-index必须很高，比弹窗组件还要高。
有了界面层，其实还应该有个全局的APP层，APP层是完全高于界面层的一种层。和界面一样，也有遮罩层、弹窗面板层和鼠标交互层。为了方便记忆，直接设定APP层为四位数上万。
1也就是10000~~19999,20000~~29999,30000~39999。
值得注意的是，该模型中不仅有向上的考虑，还有0以下的考虑
1可以设定一个页面背景层，让z-index：-1
1然后再设计一个APP通用背景层，z-index：-2。
总结
11000以内都是正常页面，上千级 ...
工具
未读
本文是基于 EChart 官方文档进行的简化
快速上手 - 使用手册 - Apache ECharts
ECharts安装1pnpm install echarts --save
导入全局导入12// 引入 ECharts 核心模块import * as echarts from 'echarts/core';
按需导入1由于不同图表类型需要导入的东西非常杂乱，以下为导入分类总结
渲染器（必）
12// 引入 Canvas 渲染器import { CanvasRenderer } from 'echarts/renderers';
图表类型
12345678// 引入柱状图图表import { BarChart } from 'echarts/charts';// 引入折线图图表import { LineChart } from 'echarts/charts';// 引入饼图图表import { PieChart ...
工具
未读
键盘乱键问题真的很崩溃，机械键盘的乱键问题居然还能连带到本机的键盘上😅
最后发现步骤其实很简单，然后我乱修了两个小时🙃
步骤机械+本机键盘出厂设置
1fn + esc 长按五秒以上
重启电脑
1还有我电脑开机是有一个键盘驱动选项的，直接给拒了
重新配置机械键盘（蓝牙啊啥的）
大前端
未读盒子格式化上下文外部显示类型（display-outside）
1规定盒子如何与统一格式上下文中的其他元素一起显示
内部显示类型（ display-inside ）
123规定盒子内部布局方式，比如display: flex (外部显示为block ) 参与BFC（块级格式化上下文）display:inline-flex (外部显示为inline) 参与IFC（内联级格式化上下文）
BFC块级格式化上下文
FC（Formatting Context）（格式化上下文）
所有的盒子都属于FC
可能属于一个BFC（block）(div/p/h1)、也可能是IFC（inline）(a/span/i/img)
会生成BFC的情况
BFC的作用帮助盒子一个挨着一个沿着垂直方向排布
margin就是由BFC来解析的
两个盒子都设置margin时候会折叠，就是BFC在起作用
1在同一个BFC里，两个盒子的margin才会折叠
1HTML可以形成标准流，因为本身就是一个独立的BFC环境
1在BFC中，每个元素的左边缘是紧挨着包含块的 ...
技术探索
未读
吐槽最初技术栈为Vue+Electron+TS，太甜美的难了。。。配置报错问题一大堆，一路报错问AI一路改，长达三个小时把文件改的乱七八糟无法收尾忍痛放弃新开项目
**最后技术栈选择为 **Vue+Electron+Vite+JS ，包管理工具选择为 pnpm
完整代码见github仓库 ......(还没推，因为dist文件太大的原因没办法传，目前还在寻找更合理的推送方案)
主步骤初始化创建
1pnpm create vite Tclick --template vue
依赖
package.json 直享版
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960{ "name": "clock", "private": true, "version": "0.0.0", " ...
技术探索
未读
WebSocket
低延迟，双向实时通信(双全工)，长期运行
简介相比HTTP协议，WebSocket是一种****实时通信协议
在实时通讯前，HTTP通过****轮询解决实时问题
轮询：客户端定期向服务器发送请求
长轮询：客户端发出请求后，保持连接打开，等待新数据响应后再关闭连接
Comet：保持长连接，返回请求后继续保持连接打开
WebSocket的连接只需要建立一次
建立连接理论须知需要HTTP向服务器发起一次常规Get请求，并在这个请求头上携带Upgrade
Upgrade作为升级请求将传递给服务器，协议从HTTP升级为WebSocket
在此之后客户端和服务器即可随时向彼此发送消息
具体代码前端
1const socket = new WebSocket("ws://localhost:8080");
123456789socket.onopen =function(event){ console.log("Websocket连接已打开")}socket.onmessage =functio ...
大前端
未读
Node.js基础模块系统require & module
CommonJS规范
模块化:把代码按功能分开(可复用性强)
举例
123function sayHello(name) { return `Hello, ${name}`}
12345678const express = require('express');//引入express模块const sayHello = require('./myModule');//引入自定义模块const app = express();app.get('/', (req, res) => { res.send(sayHello('World'));});
npm包管理
就是前端常见的 npm install 下包
异步编程回调函数Promise
可以通过 util.promisify将基于回调的API转换为返回Promise的形式
async关键字定义一个返回Prom ...
源码学习
未读
mini-vue搭建笔记原理概况1https://github.com/cuixiaorui/mini-vue
Vue3模块组织方式流程图
简单来说处理编译
compiler-sfc专门解析sfc (使用rollup-vue把App.vue单文件组件编译成JS)
compiler-dom依赖core，处理template标签，把template编译转化成一个render函数
compiler-core给dom提供依赖
处理运行时
runtime-dom依赖core
runtime-core最重点的核心代码
runtime-reactivity实现vue的响应式
更为详细的runtime-reactivity 响应式系统
提供了诸如 reactive、ref 等 API 来创建响应式对象或变量。 使用 WeakMap 数据结构来跟踪依赖关系，确保当数据变化时能够通知相关的观察者进行更新。 实现了 effect 函数机制，用于自动追踪和触发副作用函数的执行。
runtime-core 跨平台渲染
Vue3 的运行时核心模块，提供了跨平台的渲染能力。它的主要职责包括： 定义了通用的渲 ...
工具
未读本文项目主干结构12345678910111213141516171819202122232425262728293031323334353637├── public│ └── data.json # 数据文件（静态拆分数据时使用）│├── src│ ├── utils # 工具│ │ └── request.ts # axios二次封装│ ││ ├── store # Pinia仓库│ │ └── chartStore.ts # 管理图表相关的数据│ ││ ├── services # API 服务│ │ └── api.ts # 模拟后端 API 请求│ ││ ├── components # 组件│ │ ├── chart # 图表组件│ │ │ ├── category # 图表分类│ │ │ │ └── rose.vue # 玫瑰图组件│ │ │ │ ...
技术探索
未读
前端技术方向选型
数据可视化简介：将数据以图表、图形等可视化形式展示
技术平台：
技术栈
12数据可视化库，如D3.js、ECharts、AntV等JavaScript的数组操作、数据过滤
难点
1234数据处理和分析能力要求高JavaScript的数组操作、数据过滤等方法不同图表类型的特点和配置选项复杂，需要深入了解可视化效果的设计和优化难度大，如色彩搭配、布局调整等。
市场需求度：高
成熟性：比较成熟，已有许多成熟的数据可视化库，功能强大，基本能满足常见需求。
可延展性：较好，可与后端数据处理、前端交互等技术集成，拓展数据可视化的应用场景。
跨端简介：一套代码在不同的平台上运行，如Web、Android、iOS、小程序等。
技术平台：
技术栈
1234掌握跨端框架，如ReactNative、Flutter等；了解不同平台的原生开发技术，如Android的Java/Kotlin、iOS的Swift/Objective-C；熟悉前端的基础技术HTML、CSS、JavaScript；掌握相关的打包和发布工具，如Cordova、Capacitor等。
难点
123不同平台的原生开发 ...
