置顶文章
文章列表
Nginx学习笔记
前端狗啥都要学系列 # Nginx 定义 & 优点 Nginx (engine x) 是一个轻量级、高性能的 HTTP、反向代理服务器,同时也是一个通用代理服务器 (TCP/UDP/IMAP/POP3/SMTP) 它具有高性能,占用内存少,并发能力强的优点,最大可以支持 50000 个并发连接数 # Nginx 的常用命令 安装 当然,在开始使用之前,你需要先下载 Nginx 官网链接:http://nginx.org/en/download.html 下载完毕后,解压即可使用,目录是这样的 目录树如下 ├── client_body_temp ├── conf #...
more...Docker学习笔记
# Docker 学习笔记 # Why & What 软件开发最大的麻烦事之一,就是环境配置。用户计算机的环境都不相同,你怎么知道自家的软件,能在那些机器跑起来? 用户必须保证两件事:操作系统的设置,各种库和组件的安装。只有它们都正确,软件才能运行。举例来说,安装一个 Python 应用,计算机必须有 Python 引擎,还必须有各种依赖,可能还要配置环境变量。 如果某些老旧的模块与当前环境不兼容,那就麻烦了。开发者常常会说:"它在我的机器可以跑了"(It works on my...
more...TS学习笔记
# 类型分类 聊聊 TS 中的类型分类吧 # 原始类型 JavaScript 中以下类型被视为原始类型: string 、 boolean 、 number 、 bigint 、 symbol 、 null 和 undefined 。 // 注意// 非严格模式下 null 和 undefined 是所有类型的子类型,就是说你可以把 null 和 undefined 赋值给其他类型。// 虽然 number 和 bigint 都表示数字,但是这两个类型不兼容let str: string = "SakuraSnow";let num: number = 16;let...
more...Vue3杂谈
# 前言 最近看了看 vue3,发现变化还是挺大的,写篇文章来记录一波 # vite # vite 介绍和用法 Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。 其实简单来说,vite 就是一个和 webpack 用处差不多的代码构建工具,但是它在代码开发阶段有着非常显著的优势,它大大降低了开启本地服务器和代码热更新需要的时间,他的主要优点有下面几个 快速的冷启动 即时的模块热更新 真正的按需编译 那么怎么使用呢,我们直接运行下面的命令就可以了 $ npm init vite-app...
more...TS怎么扩展原生类
# 前言 啊哈,最近在复习 ts,顺手整理一点东西 # 正文 有时我们要在工程里给一些原生类扩展属性和方法,比如下面这样 Array.prototype.remove = function remove(index: number) { this.splice(index, 1); return this;}这里我们要给 Array 方法扩展一个 remove 方法,但是这个方法在原先的原型上是没有的,所以会报错,要消除这个报错,我们可以进行一个类型声明 在 ts 的 lib 文件中,我们可以看到 Array 用了一个 interface...
more...了解BFC
# 前言 这是一篇笔记,因为一直对这部分的知识看了就忘,今天闲着无事翻了翻不少资料,所以有了这篇文章 # 怎么理解 BFC 首先,我们要知道 BFC 的全称是 Block Formatting Context,翻译成中文是块级格式化上下文,这里介绍下怎么理解 Formatting Context,Formatting Context 实际上是一种上下文环境,在这个上下文里的元素会与外界隔离,并且按照这个上下文里的规则排序和渲染,Block Formatting Context 就是一种上下文,其他上下文还有 Inline formatting context : 行内格式化上下文 flex...
more...JS原生事件流与事件执行顺序
# 序 绝了,框架用多了原生基本都不记得了,今天刷到了这个题顺手写篇博客 # 正文 # 事件流的阶段 DOM 事件流分为三个阶段: 捕获阶段 、 处于目标阶段 、 冒泡阶段 。DOM 事件流会先调用 捕获阶段 的处理函数,然后调用 目标阶段 的处理函数,最后调用 冒泡阶段 的处理函数。 在这里,1-3 是捕获阶段,4-5 是处于目标阶段,6-8 是冒泡阶段 # 绑定事件的方法 # HTML 内联绑定 <div id="box1" onclick="console.log('box1...
more...