雪之樱的小站

啊哈，因为wordpress没找到啥好看的文章主题 & wordpress太依赖云服务器 所以整个博客都开始迁移到Hexo, 起码在服务器套餐不能续费时我不用迁移数据 主站：https://sakura-snow.com/，会使用比较花里胡哨的二次元主题，后续应该是放一些杂谈了，偶尔也会发技术内容 新博客：https://blog.sakura-snow.com/，追求简洁，会用来发技术文章(大概) 知识库(建设中)：https://base.sakura-snow.com，用来随手记，还在搭，不知道什么时候能搭好 我的github：https://github.com/sliyoxn 截图留念：

前端狗啥都要学系列 Nginx定义 & 优点Nginx (engine x) 是一个轻量级、高性能的HTTP、反向代理服务器,同时也是一个通用代理服务器(TCP/UDP/IMAP/POP3/SMTP) 它具有高性能，占用内存少，并发能力强的优点，最大可以支持50000个并发连接数 Nginx的常用命令安装 当然，在开始使用之前，你需要先下载Nginx 官网链接：http://nginx.org/en/download.html 下载完毕后，解压即可使用，目录是这样的 目录树如下 12345678910111213141516171819202122232425262728293031├── client_body_temp├── conf # Nginx所有配置文件的目录│ ├── fastcgi.conf # fastcgi相关参数的配置文件│ ├── fastcgi.conf.default # fastcgi.co ...

正则学习什么是正则 正则其实就是一种描述文本内容组成规律的表示方式。 测试地址：https://regex101.com/ 正则基本概念元字符元字符就是指那些在正则表达式中具有特殊意义的专用字符，元字符是构成正则表达式的基本元件。 常见的元字符有下面几种 特殊单字符 .匹配任意字符（换行除外） \d匹配任意数字，\D匹配任意非数字 \w匹配任意字母数字下划线，\W匹配任意非字母数字下划线 \s匹配任意空白符，\S匹配任意非空白符 空白符 \r 回车符 \n 换行符 \f 换页符 \t 制表符（就是tab键） \v 垂直制表符 空格，直接匹配空格就行 范围 | 表示或 [...] 多选一 [x-y] 匹配x到y之间的任意元素（按ASCIL表，包含x和y） [^...]取反，不能是括号中的任意单个元素 量词（和重复次数有关的） * 0到多次 + 1到多次 ? 0到1次 {m} 出现m次 {m, } 至少出现m次 {m, n} 出现m到n次 断言 \b 单词边界 $ 结束，^开始 贪婪模式和非贪婪模式在 ...

Docker学习笔记Why & What软件开发最大的麻烦事之一，就是环境配置。用户计算机的环境都不相同，你怎么知道自家的软件，能在那些机器跑起来？ 用户必须保证两件事：操作系统的设置，各种库和组件的安装。只有它们都正确，软件才能运行。举例来说，安装一个 Python 应用，计算机必须有 Python 引擎，还必须有各种依赖，可能还要配置环境变量。 如果某些老旧的模块与当前环境不兼容，那就麻烦了。开发者常常会说：”它在我的机器可以跑了”（It works on my machine），言下之意就是，其他机器很可能跑不了。 环境配置如此麻烦，换一台机器，就要重来一次，旷日费时。很多人想到，能不能从根本上解决问题，软件可以带环境安装？也就是说，安装的时候，把原始环境一模一样地复制过来。 于是，为了解决这个问题，先后出现了下面的解决方案 虚拟机 Linux容器 Docker 虚拟机很多人想到，可以使用虚拟机来解决问题 虚拟机（virtual machine）就是带环境安装的一种解决方案。它可以在一种操作系统里面运行另一种操作系统， 但虚拟机的缺点非常明显 资源占用多，虚拟 ...

类型分类聊聊TS中的类型分类吧 原始类型 JavaScript 中以下类型被视为原始类型：string、boolean、number、bigint、symbol、null 和 undefined。 12345678910// 注意// 非严格模式下 null 和 undefined 是所有类型的子类型，就是说你可以把 null 和 undefined 赋值给其他类型。// 虽然number和bigint都表示数字，但是这两个类型不兼容let str: string = "SakuraSnow";let num: number = 16;let bool: boolean = true;let u: undefined = undefined;let n: null = null;let big: bigint = 100n;let sym: symbol = Symbol("snow"); 对象类型对象1234567891011// 定义一个typetype User = { name: string, age: nu ...

WhatGit是一个开源的分布式版本控制系统 why因为大家都在用 好吧，git还是能干点事的 可以回退代码到之前的任意版本。毕竟程序员是一个相当玄学的工作，没准今天随便改两行，代码就跑不起来了，或者突然不需要某个功能了，这时候就可以回退版本 便于多人协作。打个比方，两个人分别写一个项目的两个页面，如果没有好用的版本工具，最后上线时就要手动把代码复制粘贴到一起。过于机械化 所以，拯救CV战士，从Git开始 Need to KnowGit文件的四种状态在学习具体的命令前，还是要先康康文件的状态 Untracked: 未跟踪, 此文件在文件夹中, 但并没有加入到git库, 不参与版本控制. 通过git add 状态变为Staged. Unmodify: 文件已经入库, 未修改, 即版本库中的文件快照内容与文件夹中完全一致. 这种类型的文件有两种去处, 如果它被修改, 而变为Modified. 如果使用git rm移出版本库, 则成为Untracked文件 Modified: 文件已修改, 仅仅是修改, 并没有进行其他的操作. 这个文件需要重新通过git add命令进入stage ...

前言最近看了看vue3，发现变化还是挺大的，写篇文章来记录一波 vitevite介绍和用法Vite是一个由原生ESM驱动的Web开发构建工具。在开发环境下基于浏览器原生ES imports开发，在生产环境下基于Rollup打包。 其实简单来说，vite就是一个和webpack用处差不多的代码构建工具，但是它在代码开发阶段有着非常显著的优势，它大大降低了开启本地服务器和代码热更新需要的时间，他的主要优点有下面几个 快速的冷启动 即时的模块热更新 真正的按需编译 那么怎么使用呢，我们直接运行下面的命令就可以了 1234$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm run dev 这个命令会在本地临时安装vite，然后用vite创建一个新项目，所以每次运行的时候使用的都是最新的vite 而从生成的目录树中可以看出来，vite和vue-cli生成的代码并没有太大的差别 12345678910111213├── index.html├── package.json├── ...

前言啊哈，最近在复习ts，顺手整理一点东西 正文有时我们要在工程里给一些原生类扩展属性和方法，比如下面这样 1234Array.prototype.remove = function remove(index: number) { this.splice(index, 1); return this;} 这里我们要给Array方法扩展一个remove方法，但是这个方法在原先的原型上是没有的，所以会报错，要消除这个报错，我们可以进行一个类型声明 在ts的lib文件中，我们可以看到Array用了一个interface来进行声明 我们可以利用interface的同名合并策略来进行处理 在项目工程下新建一个globalDeclare.d.ts文件 12345declare global { interface Array<T> { remove(index : number) : Array<T> }} PS：这个global是应用到全局的意思 同样的，你可以给win ...

前言在前端开发中你一定用过z-index，它用于让某些元素在视觉上更接近用户，但是有时你又会发现它没有用了，这是因为z-index只是css层叠规则中的一部分，它的起效需要其他css的作用，下面我们就来简单聊聊css层叠这部分的知识，让你不再只是会乱用z-index。 什么是层叠上下文（stacking context）这里用一下MDN的定义 翻译过来就是： 层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 当然这么直接搬文档大部分人一开始肯定是看不懂的，我们可以这么理解，层叠上下文是一个有很多层的盒子，盒子里面有很多书（HTML元素），这些书会根据他们设置的CSS样式摆放在不同的层上，所以我们可以把层叠上下文理解成是一个分层的大容器（虽然这么理解不完全正确） 如何产生层叠上下文这是MDN说明的可以产生层叠上下文的情况 然后我们翻译一下 文档的根元素（HTML元素） 设置z-index为非auto值的绝对定位和相对定位元素 设置了position为 ...

前言这是一篇笔记，因为一直对这部分的知识看了就忘，今天闲着无事翻了翻不少资料，所以有了这篇文章 怎么理解BFC首先，我们要知道BFC的全称是Block Formatting Context，翻译成中文是块级格式化上下文，这里介绍下怎么理解Formatting Context，Formatting Context实际上是一种上下文环境，在这个上下文里的元素会与外界隔离，并且按照这个上下文里的规则排序和渲染，Block Formatting Context就是一种上下文，其他上下文还有 Inline formatting context : 行内格式化上下文 flex formatting context : 设置了display为flex创建的上下文 grid formatting context : 设置了display为grid创建的上下文 怎么创建BFC常见： 根元素（html元素） 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） overflow 值不为 visible 的块元素 行内块元素（元 ...