大前端
未读
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不同平台的原生开发 ...
工具
未读
网页视频捕获工具本地解析工具基于Windows系统
MKVToolNix Downloads – Matroska tools for Linux/Unix and Windows
(当然网站里也有其他系统的工具,只是我没用用过)
**下载后解压出来 **MKVToolNix 文件夹
**启动项是 **mkvtoolnix-gui.exe
浏览器脚本media-source-extract 装到油猴里(文件放在最后了)
使用
脚本文件12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612 ...
Github
未读
gitgit 的运行机制1git分为本地仓库和远程仓库,我们一般情况都是写完代码,commit到本地仓库(生成本地仓的commit ID,代表当前提交代码的版本号),然后push到远程仓库(记录这个版本号)
git config(配置)一个系统只需要配置一次
12git config --global user.name "chen"git config --global user.email "xxx@qq.com"
文件的状态查看1git status
未跟踪1//add .前
已跟踪123staged //暂缓区中的文件状态,也就是indexUnmodified //commit命令,可以将staged中文件提交到Git仓库Modified //修改了某个文件后,会处于Modified状态;
SSH密钥
获取git仓库操作流程图
git上创建新仓库
1234567界面右上角"+"New repository仓库名字加描述Create repository
建立本地仓库
123456文件根目 ...
Github
未读
GitHub自动化部署通过 GitHub Actions 实现「提交代码 → 自动构建 → 生成 Releases」
实现步骤
**在本地仓库中创建 **.github/workflows/build.yml
1234567891011121314151617181920212223242526272829303132name: Build and Releaseon: push: tags: - 'v*' # 当打 tag 时触发jobs: build: runs-on: windows-latest steps: - uses: actions/checkout@v4 - name: Install Node.js uses: actions/setup-node@v3 with: node-version: 20 - name: Install PNPM run: npm install -g pnpm - name: Install Dependenci ...
博客
未读
博客音乐组件实现详情移步 | 安知鱼 | 大佬的博客文章
1https://blog.anheyu.com/posts/a76e.html
一图流
开放式公益API1https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r
1https://meting.qjqq.cn/?server=:server&type=:type&id=:id&auth=:auth&r=:r
大前端
未读
var/let/const区分作用域var 和 let 的作用域规则一样
1函数外,是全局执行上下文,函数里,是当前函数执行上下文。//声明的变量的作用域只能是全局或者整个函数块的。
重复声明var 允许,let/const不允许
12345function test() { var a = 3; var a = 4; console.log(a) // 4}
let是块级作用域
const只能在声明它们的块级作用域中访问
const/let在块级作用域外无法访问内部变量!
1234if(true){ const a=1;}console.log(a)
绑定全局变量在全局环境声明变量,var会在全局对象里新建一个属性,let/const不会
12345var foo = 'global'let bar = 'global'console.log(this.foo) // globalconsole.log(this.bar) // unde ...
大前端
未读
TS类型(interface)声明1234567let a: string //变量a只能存储字符串let b: number //变量a只能存储数值let c: boolean //变量a只能存储布尔值// 参数x必须是数字,参数y也必须是数字,函数返回值也必须是数字function demo(x:number,y:number):number{ return x + y}
总览12345string 、 number 、 boolean 、 null 、 undefined 、 bigint 、 symbol 、 object(Array 、Function 、Date ......)(新)void 、 never 、 unknown 、 any 、 enum 、 tuple(自定义)type 、 interface
常用类型字面量1值只能是字⾯量值 (值本身)
any123456789101112131415//显式的anylet a: anya = 100a = '你好'a = false//隐式的anylet bb = 100b ...

