- 博客(106)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端监控建设之《用户行为录制》
当我们收到系统异常通知的时候，普通的监控系统只能告诉你系统出现了错误，但是不能给出错误的复现路径。所以建设一套用户行为录制和回放的系统很有必要。
2024-07-05 10:55:58
1153
原创 实现前端项目自动构建和部署(Gitee Go)
教大家使用Gitee GO + Nginx从零到一实现项目上线，并且后续构建和部署的环节完全自动化。我们真正的做到了只需要开发。
2024-07-04 16:34:17
1396
原创 彻底掌握页面白屏检测
在日常的前端开发中，我们可能会遇到一些页面白屏的问题。这些问题可能会给用户带来不好的体验，甚至导致用户流失。本文带你彻底了解前端白屏，从此不再畏惧。
2024-07-03 17:01:33
1520
原创 bable和AST概述
Babel 是我们知道的将 ES6、ES7等代码转译为 ES5 代码且能安全稳定运行最好的工具同时它允许开发者开发插件，能够在编译时期转换 JavaScript 的结构。我们需要知道 3 个 Babel 处理流程中的重要工具；解析Babylon是一个解析器，它可以将javascript字符串，转化为更加友好的表现形式，称之为抽象语法树；在解析过程中有两个阶段：词法分析和语法分析词法分析阶段：字符串形式的代码转换为令牌（tokens）流,令牌类似于AST中的节点；
2023-03-07 11:30:25
619
原创 typescript高级类型 Partial, Readonly, Pick, Record
typescript高级类型 Partial, Readonly, Pick, Record
2022-09-26 10:17:43
514
原创 一文搞懂什么是 PostCSS
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
2022-09-08 18:58:50
3316
原创 Typescript对象的类型 -- 接口
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。
2022-09-08 16:47:06
211
原创 socketio确认函数
中文文档地址原文地址有时，您可能希望在客户端确认消息接收时收到回调。为此，只需将函数作为.send或.emit的最后一个参数传递。 更重要的是，当你使用.emit时，确认是由你完成的，这意味着你也可以传递数据。也就是说，我们emit的最后一个参数如果是函数，就会在接收端调用之后触发这个确认函数，相当于ack，确保接收方接受到了消息，当然这个这个确认函数是可以传递参数的！！学习过程中遇到了小记一下...
2022-04-13 18:14:26
653
原创 npm nvm nrm npx n五个管理工具讲解
npm nvm nrm npx n五个管理工具讲解npmnpm 的全称是 Node Package Manager 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。常用命令npm install 安装模块npm uninstall 卸载模块npm update 更新模块npm outdated 检查模块是否已经过时npm ls 查看安装的模块npm init 在项目中引导创建一个packag
2022-02-18 11:06:11
850
原创 koa 中间件浅析
KOAkoa中间件调用类似于redux中间价调用的洋葱模型，调用顺序和书写顺序一致，也可以看成是函数调用const one = (ctx, next) => { console.log('>> one'); next(); console.log('<< one');}const two = (ctx, next) => { console.log('>> two'); next(); console.log('<&l
2021-11-29 17:50:05
322
原创 redux概览
redux概览一：为什么需要redux二：三大原则三：设计思想四：最基本使用五：Redux中间件六：React-redux七：redux-action八：关键函数讲解一：为什么需要redux随着JavaScript单页应用开发日趋复杂，管理不断变化的state变得十分困难。状态的变更也变的十分难以追踪，这时候一种新的管理方式需要被使用，所以redux产生了。二：三大原则【一】单一数据流 整个应用的 state被储存在一棵object tree中，并且这个object tree只存在于唯一的s
2021-11-24 16:23:20
933
原创 常用git操作个人整理
git系统学习在git中，有一个指针指向当前的版本，这个指针就是head,我们只要改变这个head的位置就可以任意的去往任何的版本。上一个版本就是HEAD^，上上一个版本就是HEAD^^，当然往上100个版本写100个^比较容易数不过来，所以写成HEAD~100git reset --hard commit_idgit reflog可以查看历史命令如果git status告诉你有文件被修改过，用git diff可以查看修改的内容。git中几个重要的概念工作区：工作区就是电
2021-11-22 15:11:37
513
1
原创 前端websocket实现简易聊天室
分为客户端和服务端，客户端就是一个简单的html页面，服务端使用node进行编写。具体代码如下index.html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>websoket</title></head><body> <h1>chat room</h1> <in.
2021-11-17 19:47:43
2860
原创 dp+哈希表
想法：dp+哈希表，双重遍历的dp会TLE，所以我们使用map存储我们遍历过的数字，后面遍历的时候就只用O(n)的时间复杂度就行了/** * @param {number[]} arr * @param {number} difference * @return {number} */var longestSubsequence = function(arr, difference) { let map = {}; let max = 1; for(let item o.
2021-11-11 15:05:05
647
原创 前端如何实现token的无感刷新
前端如何实现token的无感刷新方法一方法二方法三问题一：如何防止多次刷新token问题二：同时发起两个或者两个以上的请求时，怎么刷新token通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录。不过，频繁的登录会造成体验不好的问题，因此，需要体验好的话，就需要定时去刷新token，并替换之前的token。要做到token的无感刷新，主要有3
2021-11-05 17:33:21
492
原创 关闭vscode保存后自动格式化代码
方案一： 将设置-文本编辑器-正在格式化-format on save取消勾选方案二：安装了 JS-CS-HTML Formatter这个插件的原因，那么解决办法就是禁用或者卸载这个插件，
2021-09-05 23:16:08
2267
原创 双指针在树中的应用
1. 比较两棵树是否相同双指针，一个指向树p，一个指向树q，每次比较两颗树是否相同，相同则遍历左子树和右子树/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : val) * this.left = (left===undefined ? null : left) * this.right
2021-08-07 21:01:36
244
原创 leetcode95 不同的二叉搜索树的个数
思路：二叉搜索树的特点很明显，如果有左边节点，那么左边节点都小于根节点，如果有右边节点，那么右边节点都大于根节点，我们可以循环遍历n中的每一个数i [1-n]，以i作为跟，左子树为[1, i-1]所能构成的数，[i+1, right]为右边能构成的树，递归即可/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : .
2021-08-05 17:54:44
214
原创 日常刷题总结
最短无序连续子数组考点： 1. 假设数组有三分n1, n2, n3，n1,n3有序，那么n1所有元素比n2最小的元素都要小，n3所有元素比n2最大的都要大。方法1： 直接排序后比较方法2：遍历一遍，找到左边界和右边界，例如找右边界，从左往右遍历，每次遍历更新最大值，如果遇到比最大值小的，那么这个值右边的要更新，直到末尾。...
2021-08-03 10:18:11
111
原创 leetcode 743 网络延迟时间
单源最短路径算法Dijkstra，算法思想 - 贪心从给定点出发，每次以该点更新所以暂时还没有找到最短路径的点，最后当所有的点都更新完毕或者有点不能达到就返回相应的值。JavaScript代码/** * @param {number[][]} times * @param {number} n * @param {number} k * @return {number} */var networkDelayTime = function(times, n, k) { const
2021-08-02 10:24:23
128
原创 whistle使用指南
whistle使用指南一、whistle 简介二、安装、启动、配置2.1 安装 Node.js2.2 安装 whistle2.3 启动 whistle2.4 配置代理 （推荐）2.5 抓取 HTTPS 请求（可选）2.5.2 信任 whistle 证书2.5.3 验证抓取 HTTPS 请求三、修改请求实例演示3.1 修改请求3.1.1 修改请求方法3.1.2 修改请求头3.1.3 修改请求体3.2 修改响应3.2.1 修改响应状态码3.2.2 修改响应头部3.2.3 修改响应体四、总结一、whistle
2021-07-29 19:47:51
13098
8
原创 JS中Map和普通对象
Map对象Map 对象保存键值对。任何值(对象，数组，字符串，数值，布尔，null，undefined) 都可以作为一个键或一个值。一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of 循环在每次迭代后会返回一个形式为[key，value]的数组。Map.prototype.size – 返回Map对象的键/值对的数量。Map.prototype.clear() – 移除Map对象的所有键/值对 。Map.prototype.delete(key) –
2021-07-25 21:05:51
876
原创 单调栈的使用
单调栈的使用/** * @param {number[]} heights * @return {number[]} */var canSeePersonsCount = function(heights) { var arr = []; // 维护一个单调的栈，栈中的元素是单调递减的 var res = []; const n = heights.length; for (let i = n - 1; i >= 0; i -= 1) { l
2021-07-25 15:33:52
130
原创 Redux中间件解析
Redux中间件解析1. Redux的工作原理redux对于我们进行全局的状态管理是非常有用的，我们可以省去很多力气去管理组件间的状态传递等等redux中的核心api和作用redux解决的真正问题是React组件间的状态共享和状态管理问题，通过以上的6个核心api我们便能管理复杂的状态，并能监听和追溯状态的改动，redux的工作机制如下当我们要去改变状态的时候，我们会dispatch一个action(一个普通的js对象)，我们最终的状态改变是在reducer中进行的，reducer会根
2021-07-22 19:43:00
524
2
原创 JS中Map和Set数据结构
JS中Map和Set数据结构Set1. 介绍ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。浏览器打印Set看一看，发现确实是一个构造函数，我们可以调用这个构造函数生成Set实例，同时，这个构造函数的prototype上有很多属性和方法，我们的实例可以通过原型来访问这些属性和方法。2. Set 实例的属性和方法Set 结构的实例有以下属性。Set.prototype.constructor：构造函
2021-07-16 10:05:42
454
原创 call, apply, bind 讲解 （含自己实现）
call, apply, bind 讲解 （含自己实现）this指向基本知识例 1var name = '伞兵一号', age = 18;var obj = { name: '伞兵二号', objAge: this.age, myFun: function() { console.log( this.name + '年龄' + this.age) }}obj.objAge; // 19obj.myFun() // 伞兵二号年龄 undefined (obj中
2021-07-15 21:09:30
143
原创 函数柯里化
函数柯里化函数柯里化什么是函数柯里化（curry）函数柯里化的作用参数复用提前返回延迟执行函数柯里化什么是函数柯里化（curry）函数柯里化（curry）是函数式编程里面的概念。curry的概念很简单：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。简单点来说就是：每次调用函数时，它只接受一部分参数，并返回一个函数，直到传递所有参数为止。维基百科中定义的总结：输入是一个函数，并且这个函数拥有n个参数输出也是一个函数，并且可以使用fn()()()这种方式调用参数被柯里化过程
2021-07-15 20:01:42
112
原创 十大排序算法(JS版)
十大排序算法十大排序算法概述：冒泡排序选择排序插入排序归并排序（重要）快速排序（重要）未完待续... ...十大排序算法概述：排序算法可以分为内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。常见的内部排序算法有：插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。用一张图概括：关于时间复杂度平方阶 (O(n2)) 排序 各类简单排序：直接插入、直接选择和冒泡排序。线
2021-07-13 21:08:07
252
2
原创 leetcode740删除并获得点数
题目描述：给你一个整数数组 nums ，你可以对它进行一些操作。每次操作中，选择任意一个 nums[i] ，删除它并获得 nums[i] 的点数。之后，你必须删除 所有 等于 nums[i] - 1 和 nums[i] + 1 的元素。开始你拥有 0 个点数。返回你能通过这些操作获得的最大点数。示例 1：输入：nums = [3,4,2]输出：6解释：删除 4 获得 4 个点数，因此 3 也被删除。之后，删除 2 获得 2 个点数。总共获得 6 个点数。示例 2：输入：num
2021-07-13 11:32:06
138
原创 经典动态规划问题——leetcode72(编辑距离)
经典动态规划问题——leetcode72(编辑距离)题目：给你两个单词 word1 和 word2，请你计算出将 word1 转换成 word2 所使用的最少操作数 。你可以对一个单词进行如下三种操作：插入一个字符删除一个字符替换一个字符示例 1：输入：word1 = “horse”, word2 = “ros”输出：3解释：horse -> rorse (将 ‘h’ 替换为 ‘r’)rorse -> rose (删除 ‘r’)rose -> ros (删除 ‘
2021-07-12 12:04:09
693
2
原创 彻底掌握Vuex
彻底掌握Vuex彻底掌握Vuex一：什么是Vuex二：为什么要有Vuex三：Vuex的工作原理四：使用Vuex五：store六：主要概念1. state在 Vue 组件中获得 Vuex 状态mapState 辅助函数对象展开运算符组件仍然保有局部状态2. getters通过属性访问通过方法访问mapGetters 辅助函数3. mutations提交载荷（Payload）对象风格的提交方式Mutation 需遵守 Vue 的响应规则使用常量替代 Mutation 事件类型Mutation 必须是同步函数在组
2021-07-11 18:11:45
948
3
warofplanes.rar
2020-04-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人