小小小菜鱼-CSDN博客

原创【原创】三十分钟实时数据可视化网站前后端教程 Scrapy + Django + React 保姆级教程向

这个本来是想做视频的，所以是以讲稿的形式写的。最后没做视频，但是觉得这篇文还是值得记录一下。真的要多记录，不然一些不常用的东西即使做过几个月又有点陌生了。

2024-03-16 14:54:22 1055

原创【实例】JS装饰器(STAGE3)与TS装饰器使用及对比

之前项目里用TS的装饰器比较多，但是感觉现在大多数前端开发用装饰器都是用的TS装饰器，很少见用JS装饰器，特别是stage3的。也很少见什么文章会写到它们的区别，我就简单介绍对比一下，欢迎谈论！

2024-03-14 13:45:57 1102

原创【精选】Canvas 事件处理系统 - 多图长文

Canvas 是像素级的，它的绘制是直接控制像素。不管里面花了多少图形，在 DOM 里它只有一个对象，这在带来更好的渲染性能的同时，也带来了问题，我们对 DOM 元素的事件监听没法绑定到 Canvas 内部的元素上，只能绑定在这个大画布上，在事件发生的时候也没法去知道是发生在哪个图形上。因此为了让 Canvas 内的图形也能实现交互功能，我们要自己开发一个事件系统。

2024-03-12 14:13:31 1163

原创当你忘记很久前的 DJANGO + UWSGI 项目是怎么启动的

在后端项目代码推到云服务器后，通常需要手动重启相关服务才会更新生效。

2024-09-10 12:02:14 350

不加REDIS缓存时，每次访问都要读取数据库，当访问量非常大的时候，就会有很多次的数据库查询，会造成访问速度变慢，服务器资源占用较多等问题。当使用了缓存后，访问情况变成了如下：访问一个网址时, 尝试从 cache 中找有没有，如果需要的数据在缓存中没有，则去数据库取，渲染返回页面，同时将这些数据保存在缓存中，在一定时间内，当用户再次访问页面时，就没必要去数据库取了，直接从缓存中拿到数据。缓存放在内存中，读写速度快。

2024-09-10 10:00:40 765

原创【Docker】容器简介和构建镜像

Docker守护进程可以直接和主操作系统进行通信，为各个Docker容器分配资源，而虚拟机有各自的从操作系统。虚拟机启动需要数分钟，而Docker容器可以在数毫秒内启动。由于没有臃肿的从操作系统，Docker可以节省大量的磁盘空间以及其他系统资源。Docker有着小巧、迁移部署快速、运行高效等特点，但隔离性比服务器虚拟化差：Docker上运行不同的应用实例，相互隔离，但用同一个主机操作系统内核。因为共享操作系统内核，因此相关信息会共享。

2024-09-09 10:44:59 1454

原创简单上手 PIPENV

Pipenv ，全称为Python Development Workflow for Humans，旨在为开发项目自动创建和管理虚拟环境并管理 Python 包，简言之，就是virtualenv 和pip的集合体，通过创建指定python版本的虚拟环境和安装依赖包，提供各个项目隔离的开发环境。

2024-09-07 15:09:08 1111

原创【CSS】三个DIV在同一行平分宽度的五种实现方法

- --> 来紧邻连接这些元素。此外，将 .container 的 font-size 设置为 0，然后再为 .inline-block-div 重置 font-size，也是为了去除元素间的空隙。你可以通过将父容器的 display 属性设置为 grid 并使用 grid-template-columns 来指定列的数量和宽度，来在同一行内平均分布三个 div 元素。将父容器的 display 设置为 flex，将子元素的 flex 都设为1 来平分空间。

2024-04-11 16:37:43 2226

原创 JS原生DOM操作 - 获得元素/网页大小/元素宽高

它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。

2024-04-11 16:16:12 2350

原创 JS模块化——AMD、CommonJS和ESModules

在模块化概念出现之前，JS 的脚本通常是通过 script 标签直接嵌入 HTML 中的，但是不同 js 文件里申明的变量都会存在于全局作用域中。不同的开发者维护不同的 js 文件，很难保证不和其它 js 文件冲突。全局变量污染开始成为开发者的噩梦。AMD是"Asynchronous Module Definition"，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

2024-04-07 18:34:08 1591

原创【Webpack】TreeShaking与静态分析

Tree shaking 字面意就是“摇树”，通过摇树将树上枯黄的叶子摇落。tree shaking 的作用是把项目中没必要的代码全部抖落掉，消除被引用，删除没被调用的无用模块代码，该优化最终实现的是代码体积的减少，也属于项目性能优化的一部分。原理是利用 ES6 的模块化语法，通过静态分析代码之间的引用关系，来判断哪些模块未被引用，进而删除对应代码。

2024-04-07 14:54:48 1299

原创 localForage封装代码

对于浏览器的兼容问题，它有一个优雅降级策略，若浏览器不支持 indexedDB 则使用 WebSQL ，如果不支持 WebSQL 则使用 localStorage。当前端本地存储量比较大的时候会想到 indexedDB，indexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象）。localForage 是基于 indexedDB 封装的库，通过它我们可以简化 indexedDB 的使用。

2024-04-06 22:39:22 258

原创 localStorage封装代码

JSON.parse(): 将 JSON 字符串转化为 JS 对象，键值都必须使用双引号包裹。JSON.stringfy(): 将 JS 对象转化为 JSON 字符串。

2024-04-06 17:09:12 330

原创 JS实现继承的方式ES6版

这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。子类实例的__proto__的__proto__指向父类的__proto__。作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

2024-04-03 11:41:22 601

原创 JS实现继承的方式原生版

只能考虑Child.prototype = new Father 这一步,最终需要达到目的:Child.Prototype.__ proto __ = Father.prototype(子类的原型指向父类的原型, 解决父类调用两次的缺陷)----->(也就是一个对象继承另一个对象,上面的寄生式和原型式继承方式),另外最后还是需要将子类实例的constructor指回子类。组合继承既具有原型链继承能够复用函数的特性，又有借用构造函数方式能够保证每个子类实例能够拥有自己的属性以及向超类传参的特性。

2024-04-02 20:49:12 1093

原创存档-链表设计JS/TS版

题目：https://leetcode.cn/problems/design-linked-list/description/

2024-04-02 16:15:42 179

原创算法系列之链表删除节点JS/TS版

从链表删除一个节点，相信方法大家都懂，就是把它前一个节点的next指针指向它的下一个节点，也就是跳过了这个节点，它无法再被到达，相当于它被删除了。给你一个链表的头节点 head 和一个整数 val，请你删除链表中所有满足 Node.val == val 的节点，并返回新的头节点。思路简单但是写起来很多条件要判断，特别是头节点需要额外处理，然后要判断各种空节点和单节点的问题。输入：head = [1,2,6,3,4,5,6], val = 6。输出：[1,2,3,4,5]

2024-04-01 20:54:13 387

原创算法系列之数组里的双指针

例如，函数返回的新长度为 2 ，而 nums = [2,2,3,3] 或 nums = [2,2,0,0]，也会被视作正确答案。解释：函数应该返回新的长度 5, 并且 nums 中的前五个元素为 0, 1, 3, 0, 4。给你一个按非递减顺序排序的整数数组 nums，返回每个数字的平方组成的新数组，要求也按非递减顺序排序。输入：nums = [0,1,2,2,3,0,4,2], val = 2。输出：5, nums = [0,1,3,0,4]排序后，数组变为 [0,1,9,16,100]

2024-03-29 19:49:36 929

原创算法系列之新思路搞定二分法的边界问题

二分的思想虽然从在学校的时候就反复被考，但是真的写起来，细节很复杂，边界条件，循环条件，应不应该加一之类的老是出错。下面这是个传统的二分写法。给大家简单回忆一下，然后直接看后面的新写法。

2024-03-29 15:55:28 967

原创 Git 命令总览

Git 是一个版本控制系统，用于管理项目代码。通过 Git 可以轻松地进行代码的提交、更新和合并，确保项目代码的安全性和稳定性。同时，Git 还提供了丰富的工具和功能，如分支管理、代码审查、版本回退等，帮助开发更好地组织和管理项目代码，实现快速迭代和持续交付。在 Git 中，工作区时指当前正在工作的目录。暂存区市位于工作区和仓库之间，用于存储准备提交到仓库的更改。当执行 git add 命令时，将更改从工作区添加到暂存区。仓库（也称为版本库）是Git存储项目历史记录的地方，包含项目的所有文件及其历史记录。

2024-03-28 18:38:16 1055

原创 React系列之合成事件与事件处理机制

即在react中，我们绑定的事件onClick等，并不是原生事件，而是由原生事件合成的React事件，比如 click 事件合成为 onClick 事件。react 的所有事件并没有绑定到具体的dom节点上而是绑定在了 document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。react 事件机制基本理解：react 基于浏览器的事件机制，自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等。

2024-03-28 11:52:14 1777 1

原创 React系列之React版本时间线和主要更新

参考： https://github.com/facebook/react/releases + 一些博客文章。2016.4 React15: 之前都是 v0.xx，到这时候直接变成 v15，可见对这个库的重视和发展意图。2017.9 React16.0: 主要是引入了异步渲染和 React Fiber，提高了渲染性能。2019.2 React16.8: 主要引入了 Hooks。2018.3 React16.3: 主要生命周期的改变。2020.10 React17: 过度版本。

2024-03-27 16:58:34 2478

原创 React系列之常用ReactHook

自定义 Hook 就是自己封装的函数功能和 react 中内置的 Hook 进行结合，用于组件间共享逻辑，本质是一个函数。自定义 Hook 必须以 use 开头。// 自定义 Hook：用于跟踪组件的宽度变化// 定义函数来更新组件宽度// 添加事件监听器来在窗口大小变化时更新宽度// 初始化时获取一次宽度// 在组件卸载时移除事件监听器}, []);// 依赖数组为空，表示只在组件挂载和卸载时执行一次// 使用自定义 Hook 来获取组件宽度。

2024-03-27 10:50:36 1499

原创 React系列之虚拟DOM、FIBER和DIFF算法

不建议用index作为key，比如在用index作key的情况下，当我们对原始的数据list进行了某些元素的顺序改变操作，导致了新旧集合中在进行diff比较时，相同index所对应的新旧的节点其文本不一致了，就会出现一些节点需要更新渲染文本，而如果用了其他稳定的唯一标识符作为key，则只会发生位置顺序变化，无需更新渲染文本，提升了性能。react diff算法通过新旧节点比较后，如果发现了key值相同的新旧节点，就会执行移动操作，而不会执行原策略的删除旧节点，创建新节点的操作。

2024-03-26 21:16:00 1440

原创 React系列之新旧生命周期对比

React 实例从创建到销毁的全过程就是生命周期，钩子函数是指程序运行到特定阶段执行的方法。React 的生命周期在不断演进，在16.3版本前后有较大改变。

2024-03-26 14:17:23 1215

原创 React系列之框架特点和组件类型

React 是单向数据绑定，当用户访问 View 时，通过触发 Events 进行交互，而在相应 Event Handlers 中，会触发对应的 Actions，而 Actions 通过调用 setState 方法对 View 的 State 进行更新，State 更新后会触发 View 的重新渲染。单向数据绑定：Model 的更新会触发 View 的更新，View 的更新不会触发 Model 的更新，它们的作用是单向的。有状态组件通常会带有生命周期lifecycle，用以在不同的时刻触发状态的更新。

2024-03-25 21:13:03 1161

原创前端跨域概念及解决方法

同源指：两个页面域名、协议、端口均相同。同源策略是浏览器的一个安全限制，跨域是由浏览器的同源策略造成的，是指浏览器不能执行非同源网站的脚本。同源策略限制了以下行为：1. Cookie、LocalStorage、和 IndexDB 无法读取。2. DOM 和 JS 对象无法获取。3. 请求（XHR、fetch 等）发不出去。

2024-03-22 14:42:13 655

原创【前端性能】前端性能优化方法总结

可以从网络请求方向和页面渲染方向进行优化：在网络请求方面有使用HTTP缓存、使用本地储存、HTTP请求优化、DNS预解析和使用CDN。

2024-03-22 12:09:48 1494

原创 JS 的异步加载方法: async、defer、动态加载

相同点：都不会阻塞后续元素渲染，都会立刻加载。都只适用于外部脚本。不同点：async 脚本加载完后会立刻执行，defer 的会在文档元素加载完后，DOMContentLoaded事件前执行。所以需要对DOM元素进行操作的脚本就不应该用async，因为元素可能没加载出来。

2024-03-21 21:27:13 512

原创 HTTP系列之HTTP版本 1.0 1.1 2.0 3.0 主要特性对比

无状态无连接：HTTP1.0默认浏览器和服务器保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接，服务器处理完成后立即断开TCP连接（无连接），服务器不跟踪每个客户端也不记录过去的请求（无状态）。2、TCP的队头阻塞没有彻底解决（http2.0中，多个请求是跑在一个TCP管道中的，一旦丢包，TCP就要等待重传（丢失的包等待重新传输确认），从而阻塞该TCP连接中的所有请求）每次发送请求的时候，都需要进行一次TCP的连接，而TCP的连接释放过程又是比较费事的。这是支持文件断点续传的基础。

2024-03-21 16:02:26 1092

原创 HTTP系列之HTTP缓存 —— 强缓存和协商缓存

如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified / IF-Modified-Since、Etag / IF-None-Match），由服务器根据请求中的相关header信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。这个时间代表着这个资源的失效时间，在此时间之前，即命中缓存。

2024-03-21 15:57:43 2145

空空如也

空空如也