置顶文章

280 1 分钟

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

文章列表

12k 11 分钟

# 前言 最近看了看 vue3,发现变化还是挺大的,写篇文章来记录一波 # vite # vite 介绍和用法 Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。 其实简单来说,vite 就是一个和 webpack 用处差不多的代码构建工具,但是它在代码开发阶段有着非常显著的优势,它大大降低了开启本地服务器和代码热更新需要的时间,他的主要优点有下面几个 快速的冷启动 即时的模块热更新 真正的按需编译 那么怎么使用呢,我们直接运行下面的命令就可以了 $ npm init vite-app...
669 1 分钟

# 前言 啊哈,最近在复习 ts,顺手整理一点东西 # 正文 有时我们要在工程里给一些原生类扩展属性和方法,比如下面这样 Array.prototype.remove = function remove(index: number) { this.splice(index, 1); return this;}这里我们要给 Array 方法扩展一个 remove 方法,但是这个方法在原先的原型上是没有的,所以会报错,要消除这个报错,我们可以进行一个类型声明 在 ts 的 lib 文件中,我们可以看到 Array 用了一个 interface...
5.5k 5 分钟

# 前言 在前端开发中你一定用过 z-index,它用于让某些元素在视觉上更接近用户,但是有时你又会发现它没有用了,这是因为 z-index 只是 css 层叠规则中的一部分,它的起效需要其他 css 的作用,下面我们就来简单聊聊 css 层叠这部分的知识,让你不再只是会乱用 z-index。 # 什么是层叠上下文(stacking context) 这里用一下 MDN 的定义 翻译过来就是: 层叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML...
2.6k 2 分钟

# 前言 这是一篇笔记,因为一直对这部分的知识看了就忘,今天闲着无事翻了翻不少资料,所以有了这篇文章 # 怎么理解 BFC 首先,我们要知道 BFC 的全称是 Block Formatting Context,翻译成中文是块级格式化上下文,这里介绍下怎么理解 Formatting Context,Formatting Context 实际上是一种上下文环境,在这个上下文里的元素会与外界隔离,并且按照这个上下文里的规则排序和渲染,Block Formatting Context 就是一种上下文,其他上下文还有 Inline formatting context : 行内格式化上下文 flex...
5.3k 5 分钟

# 序 绝了,框架用多了原生基本都不记得了,今天刷到了这个题顺手写篇博客 # 正文 # 事件流的阶段 DOM 事件流分为三个阶段: 捕获阶段 、 处于目标阶段 、 冒泡阶段 。DOM 事件流会先调用 捕获阶段 的处理函数,然后调用 目标阶段 的处理函数,最后调用 冒泡阶段 的处理函数。 在这里,1-3 是捕获阶段,4-5 是处于目标阶段,6-8 是冒泡阶段 # 绑定事件的方法 # HTML 内联绑定 <div id="box1" onclick="console.log('box1...
3k 3 分钟

# 序 用惯了 vue 用 react 的生命周期总有一丝怪异啊,不过这并不妨碍我记点笔记 生命周期仅存在于类组件中,函数组件每次调用都是重新运行函数,旧的组件会被立刻销毁 # 旧版生命周期 # 总览 旧版生命周期对应 React 的版本小于 16.3 # constructor(props, context, updater) React 借用 class 类的 constructor 充当初始化钩子。 React 规定 constructor 有三个参数,分别是 props、context 和 updater。 props 是属性,它是不可变的。 context...
759 1 分钟

# 水平居中 # 行内元素 - 使用 text-aligin .parent { text-align: center;}# 块级元素 - 使用 margin # 子元素没有设置 float .son { margin: 0 auto;}# 子元素设置了 float .parent{ width: fit-content; margin: 0 auto;}.son { float: left;}# 块级元素 - 使用定位 .son {...
1.5k 1 分钟

# HTML # CSS # 前端常见的数值单位 px:绝对单位,页面按精确像素展示。 em:相对单位,按自身的 font-size 计算 rem:相对单位,相对根节点的字体大小来计算 vw:viewpoint width,视窗宽度,1vw 等于视窗宽度的 1%。 vh:viewpoint height,视窗高度,1vh 等于视窗高度的 1%。 vmin:vw 和 vh 中较小的那个。 vmax:vw 和 vh 中较大的那个。 %: 百分比 # display: none, visibility: hidden, opacity: 0 的区别 在 DOM...
5.3k 5 分钟

# 序 这是一个非常基础的 redux 教程,在我学 redux 时,发现无论是官方文档还是其他的博客,均会先讲一堆 redux 的设计思想,然后抛出一堆新概念看着脑壳疼,所以我打算写一篇非常基础的教程,没有花里花哨的,只是讲讲最简单的使用,至于思想啥的,掘金一搜一大把啦。所以这篇文章只是追求用最简单的例子来介绍 API,不会讲的太深,就酱。 # redux redux 和 react 没有太大的关系,它只是一个单独的库,你可以随便在哪个地方使用它,它的主要用途我觉得有两点 便于多组件跨级间共享数据 便于提供规范统一的数据源管理 先用一张图介绍 redux...
1.5k 1 分钟

# 序 一般来说,在使用 http 协议进行数据交换时,数据都是明文传输的,这就给数据的安全性带来了很大隐患,中间很容易被截获,中间人很容易查看到里面的内容和篡改内容,所以,https 出现了,它会对传输的内容进行加密,让数据传输变得更安全,减少遭受中间人攻击的可能。 # 人物介绍 王尼玛:单身汪,打算今天和他的女神王尼美表白(客户端) 王尼美:王尼玛喜欢的人(服务器) 隔壁老王:喜欢搞事的人(中间人) #...