css3 3d立体效果
css3 3d 立体效果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> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="box"> <div class="card one">1</div> <div class="card two ...
scss实现星空特效
scss实现星空特效实现效果
以前实现这种特效都是用 js 来实现的，现在随着 css 预编译的发展，scss 也可以实现这种效果。
实现难点
不同的大小
不同的移动速度
不同的数量
不同透明度
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>scss</title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="box"> ...
随记
随记今天也是学了一下uniapp来开发微信小程序，给我的感觉是挺简单的，很多东西官方团队都封装的很好,唯一吐槽点 官方文档能不能整理一下，这么优秀的团队文档简直就是一坨
搜索引擎优化
搜索建议优化方案背景
在搜索框中，用户输入关键词后，服务器会根据关键词自动补全，并展示在搜索框下方的下拉列表中，如果用户输入的很快，我们应该每个请求都发吗？请求的顺序是否能与响应的顺序一致？
目标
保证用户输入的关键词与服务器返回的关键词顺序一致。
减少请求次数。
方案
使用防抖
也就是在一段时间内只发送最后一次请求，一段时间内连续请求会取消上一次的请求。
那如果用户在请求成功发送，服务器还没响应的期间再次发送请求呢？服务器能保证响应的顺序吗？
所以防抖也没解决根源性问题。
使用节流
也就是在一段时间内只发送第一次请求，后续请求不在处理。
用户快速输入节流无法处理 。
优解方案
在每次请求放送时，取消上一次的请求。const search = document.querySelector("#app .search");//创建一个控制器let controller;search.onchange = async (e) => { //取消上一次的请求 controller && controller.ab ...
Mysql基本语法
knex
基于js的查询生成器,允许使用js代码来生成qsl语句新建数据库CREATE DATABASE `user`
设置编码DEFAULT CHARACTER SET = 'utf8mb4';
新建表
CREATE TABLE users( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT , name VARCHAR(20) NOT NULL COMMENT '姓名', age INT NOT NULL COMMENT '年龄', gender VARCHAR(10) NOT NULL COMMENT '性别', create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间')COMMENT '用户表';
id int类型(INT) 非空校验(NOT NULL ) 主键(PRIMARY KEY) 自增(AUTO_INCREMENT)
TIMES ...
LRU缓存置换
LRU 缓存置换
LRU（Least Recently Used）(最久未使用)缓存置换算法
在限定的空间已存满数据时，再要增加缓存应当先把一个最近未使用的数据置换出去，然后把新的数据插入到缓存中。
实现class LRUCache { #map; #length; constructor(len) { this.#length = len; this.#map = new Map(); } has(key) { return this.#map.has(key); } //获取缓存->获取到了就是最新的缓存访问，所以需要添加到队列头部 get(key) { if (!this.has(key)) return null; let value = this.#map.get(key); //删除当前key，添加到队列头部 this.#map.delete(key); this.#map.set(key, value); return value; ...
并发
什么是并发？
你吃饭吃到一半，电话来了，你一直到吃完了以后才去接，这就说明你不支持并发也不支持并行。
你吃饭吃到一半，电话来了，你停了下来接了电话，接完后继续吃饭，这说明你支持并发。
你吃饭吃到一半，电话来了，你一边打电话一边吃饭，这说明你支持并行。
并发的关键就是需要能同时处理多个任务的能力，这个不一定是同时进行的。并行则关键是要能同时处理多个任务二者的关键区别在于是否具备同时性。
前端并发数量关于并发前端能做的就是控制请求数量，控制请求的频率，控制请求的耗时(个人见解)
实现export async function conCurrent(urls, max = 2) { const urlList = urls.flat(); //扁平化数组 if (urlList.length === 0) return new Promise.resolve([]); return new Promise((resolve) => { const result = []; //存放结果数组 let index = 0; //指向下一个url ...
scss模块化
scss 模块化
什么是模块化?模块化是指将一个复杂的程序依据一定的规则封装成几个块,并进行组合在一起。
scss 的模块化分为运行时与编译时
运行时在以往的时候导入方式是使用 import url(‘xxx’)
而编译时的导入方式与运行时大差不差，import ‘xxx’
而这两种方式都差不多，容易混淆，让人无法一眼看出在干什么。
所以 scss 提供了新的导入方式 @use
一个成熟的模块化方式，需要解决变量污染,私有变量等问题
//支持导入别名@use "b.scss as a" @use "b.scss" // 支持命名空间 color: a.$color;//私有变量$_s: red;
深入forEach
在使用 forEach 时的一些现象
为什么次添加一个元素到数组不会陷入死循环？
const arr = [1, 2, 3];arr.forEach((item) => { arr.push("x"); console.log("arr", item); //arr 1 arr 2 arr 3});
为什么下标为 1 的元素没有删除？
const arr = [1, 2, 3];arr.forEach((item, i) => { arr.splice(i, 1); console.log("arr", item); //arr 1 arr 3});console.log(arr); //[2]
为什么存在稀疏元素时 会跳过稀疏数组？
const arr = [, , 3];arr.forEach((item) => { console.log("arr", item); // arr 3});
解 ...
2024-04-16记录
博客完成搭建英雄联盟酷酷上分准备毕设那个老头规定的前端毕设还要写开发文档，写就算了还要写数据库字段代表意义，我服了!!!