react-schedule
react-schedule 调度任务源码分析// 立即执行var IMMEDIATE_PRIORITY_TIMEOUT = -1;var USER_BLOCKING_PRIORITY_TIMEOUT = 250;var NORMAL_PRIORITY_TIMEOUT = 5000;var LOW_PRIORITY_TIMEOUT = 10000;// 无限期等待var IDLE_PRIORITY_TIMEOUT = maxSigned31BitInt;// 任务存在最小堆上//立即执行的任务队列var taskQueue = [];//延时任务队列var timerQueue = [];/** * react-schedule调度器 * @param {number} priorityLevel 任务优先级 * @param {Function} callback 回调函数 * @param {object} options 可选配置 * @param {number} options.delay 延 ...
时隔两月再次续写
随记
自从七月初从学校出来被现实上了一颗！！！
大专在如今的环境真的备受煎熬，感觉自己学了那么多一点用处都没。
现在的我感觉已经废了，感觉啥都不会，啥都会。
感觉自己好迷茫，不知道自己要干什么，也不知道自己能干什么。
送了几天快递，感觉也干不了，还是回来搞搞自己熟悉的行业吧。
努力找找线上实习，不行专升本了，接接小单。
定制自己的脚手架
起因
最近突然了解到脚手架的概念，然后就了解了一下，发现其实脚手架就是一个工具，用于快速搭建项目，而其中的工具就是一些脚本，这些脚本可以用来初始化项目，安装依赖，运行测试等。
因为平常搞项目老是得自己建一堆文件夹然后又一堆初始化的工程，每次写都觉得心累。然后我就想，既然脚手架是一个工具，那么我也可以自己定制一个脚手架，这样就可以根据自己的需求来搭建项目了。
定制脚手架
了解一些底层逻辑,安装一些需要使用的依赖
Commander 是一个用于构建命令行工具的 npm 库
Inquirer 是一个强大的命令行交互工具，用于与用户进行交互和收集信息
Ora 是一个用于在命令行界面显示加载动画的 npm 库
Download-git-repo 是一个用于下载 Git 仓库的 npm 库
文件配置
#!/usr/bin/env node 告诉系统用 node 来解析这个文件(隐式执行)
package.json 中的 bin 字段告诉系统入口文件
npm link 把当前文件夹链接到全局(软连接)
配置 github 仓库模板，然后就可以通过不同的 ...
封装message消息提示
封装思路
暴漏一个全局对象,内含四个方法->四个方法分别对应不同的消息提示类型
方法可以接受一个字符串,或者接受一个指定类型的对象
参数归一化
使用 vue 的 createApp 创建一个临时组件进行挂载
书写样式动画
封装效果
实现过程使用
<template> <div class="container"> <div @click="success">SUCCESS</div> <div @click="warning">WARNING</div> <div @click="info">INFO</div> <div @click="error">ERROR</div> </div></template><script setup lang="ts">import Mess ...
保护单向数据流
什么是单向数据流单向数据流是指数据只能在一个方向上流动，即从父组件到子组件。在 Vue.js 中，单向数据流是指数据只能从父组件传递给子组件，而不能从子组件传递给父组件。
为什么需要单向数据流单向数据流可以确保数据的流动清晰，易于维护和调试。同时，单向数据流也可以避免子组件意外修改父组件的数据，从而导致数据的不一致。
<!-- 这样直接绑定数据是不应该的,会直接修改父组件传递的数据,而造成打破单向数据流,为以后的维护调试埋雷 --><input type="text" v-model="modelValue.keyWord" /><select> <option v-for="item in modelValue.select" :key="item" :value="item"> {{ item }} </option></select><script set ...
好玩的开灯效果
效果
实现html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="box"> <div class="btn"></div> <div class="light"> <di ...
单例模式
ts 实现
私有变量
私有构造函数 不允许在外部通过 new 创建实例
提供获取实例的方法
export class Singleton { // 私有变量 private static instance: Singleton; public options: {}; // 私有构造函数 private constructor(options) { this.options = options; } // 获取实例的方法 public static getInstance(options): Singleton { //第二次就不会进入判断 if (!Singleton.instance) { Singleton.instance = new Singleton(options); } return Singleton.instance; } //判定是否以及初始化 public isInitialized(): boolean & ...
红绿灯
红绿灯
红绿灯的实现,第一想法就是用 setTimeout 和 setInterval ,但是严格一点来说 setTimeout 一定准时吗？随着时间的推移以及浏览器的渲染流程与优化策略,误差会越来越大.
所以应该使用轮询的方式来做
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>红绿灯</title> </head> <body> <div class="box"> <div class="line-count"> <div cl ...
洋葱模型
class TaskPro { #tasks = []; #isRun = false; #currIndex = 0; /** * 添加任务 * @param {Function} task */ addTask(task) { this.#tasks.push(task); } //执行任务 async run() { //不允许连续调用,需要等待上一次实例调用结束 if (this.#isRun) return; this.#isRun = true; await this.#runTask(); } //取出一个任务执行 async #runTask() { //边界处理 if (this.#runTaskBoundary()) return; const task = this.#tasks[this.#currIndex]; //记录当前下标用于判定是否调用next const i = this.#cu ...
视频弹幕功能
效果
实现思路
页面结构->canvas 覆盖在视频上面,弹幕输入框,按钮,弹幕颜色选择器
初始化数据
初始化 canvas
整理数据参数,循环数据根据参数判定是否绘画弹幕
监听进度条进行弹幕绘制复原
点击发送收集信息 push 到源数据
实现源码html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>视频弹幕功能</title> <link rel="stylesheet" href="./Static/index.min.css" /> </head> <body> ...