- 博客(58)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 TS：使用记录
在 TS 中，如果直接在 window 中添加全局变量，例如：window.pages = {}。：全局声明 Window 类型。
2024-02-02 15:42:26
290
原创 TS-Antd：组件使用记录（v5.11.0）
在 Input 组件上添加 ref ，获取到的是 InputRef 类型的值，而不是 HTMLInputElement 类型的值。和普通的 input 标签不同，antd 已经给 Input 组件提供了。
2024-01-31 16:07:29
707
原创 React-RTK：Selector unknown returned a different result when called with the same parameters.
有实际值之后，tabList 是 实际值，tabList 的引用发生了改变，在 reduc-toolkit 中，更新 state 时不能更新引用。当使用相同的参数调用时，未知选择器返回不同的结果。这可能会导致不必要的重新渲染。是 undefined 时，tabList 是 []；
2024-01-30 15:11:07
919
原创 TS：兼容性
在 TS 中，兼容性的概念很重要，比如，类型 A 断言能 类型B 前提就是，A 和 B 之间必须具有兼容性（A 兼容 B 或者 B 兼容 A）。
2024-01-29 15:49:52
367
原创 Rollup：打包器学习积累
如果在你的项目中引入第三方依赖，例如像下面的 import 语句，不会导致 moment 被打包到你的包中——相反，它将是运行时需要的 外部依赖项。如果你的需求是需要代码拆分，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多 CommonJS 模块的依赖，那应该选择 webpack。如果你想要包含它们（例如，让你的包在浏览器中运行），你可能需要使用。如果你的代码库是基于 ES6 模块的，而且希望你写的代码能够被其他人直接使用（依赖库），你更需要的打包工具可能是 Rollup。
2024-01-25 14:40:57
1377
原创 Rollup：打包 TypeScript - React 组件库
1.1 通过 create-react-app take-photo --template 创建前端应用。1.2 添加组件 TakePhoto (拍照组件)1.3 App 为测试组件。
2024-01-25 10:22:58
1096
原创 TS-React：useRef 使用
Cannot assign to ‘current’ because it is a read-only property.（不能给current属性复制，因为它是一个只读属性。解决方案：将 current 属性变为非只读属性，useRef 的泛型参数中增加【| null】即可把 current 属性变为非只读属性。
2024-01-22 10:57:03
941
原创 TS：.d.ts 文件 和 declare 的作用
先说一下我对 .d.ts文件 和 declare 的理解，.d.ts文件 和 declare 都是用来做的，而 .d.ts 文件做外部声明是 declare 做外部声明的简化形式。我理解 外部声明 就是，可以直接引用而不用去 import 或者 import type 相应的变量或者类型。
2024-01-12 16:53:00
1572
原创 TS：类型断言
类型断言好比其他语言中的类型转换，但是不是真正的类型转换方式，之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。
2024-01-05 11:50:10
1684
原创 TS报错：不能调用可能是未定义的对象
一个函数的【可选参数 fn】类型是一个函数类型，在函数内部调用 fn ，TS 报错：不能调用可能是“未定义”的对象。2、解决方法2.1、使用非空断言（!）2.2、调用前使用（&&）做非空校验2.3、调用前使用（if）做非空校验此种方式有时不能解决问题，比如以下代码：原因暂未找到
2024-01-05 11:34:23
1883
原创 控制台报错：Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db
在项目文件所在目录下，删除node_modules依赖目录下的caniuse-lite、browserslist文件夹。这两个依赖主要作用就是处理前端页面的一些样式和脚本在各个浏览器中的兼容性问题，终端运行该命令，重新安装这两个依赖。
2022-10-31 11:21:45
22763
1
原创 Babel学习之基础学习
Babel学习一、简介1. Babel是什么？2. 整体介绍二、presets(环境预设)常用的环境预设包三、plugins(插件)一、简介1. Babel是什么？Babel是一个编译器，可以将ES6+版本新增加的语法和API转化成ES5代码，让前端开发者可以提前使用ES6+的新特性而不用考虑兼容性问题。2. 整体介绍Babel本身没有任何编译功能，而是通过选项：环境预设和插件，对代码进行编译的。Babel转换分为两部分：语法转换可以通过配置环境预设(presets)，实现对js新语法的转
2022-01-14 17:03:08
2319
转载 转载之详解CommonsChunkPlugin的配置和用法
详解CommonsChunkPlugin的配置和用法简介CommonsChunkPlugin可配置的属性：实战应用不分离出第三方库和自定义公共模块webpack.config.js：分离出第三方库、自定义公共模块、webpack运行文件webpack.config.js：单独分离出第三方库、自定义公共模块、webpack运行文件抽离webpack运行文件**抽离第三方库和自定义公共模块**第一种方法第二种方法children和async属性浏览器缓存的实现简介CommonsChunkPlugin主要是用
2022-01-13 16:21:56
2724
1
原创 Vue@2.x之使用vant@2.x
Vue@2.x之使用vant@2.x安装依赖修改配置文件使用组件安装依赖yarn add babel-plugin-import -D修改配置文件//对于使用 babel7 的用户，可以在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant
2022-01-04 11:19:49
478
原创 Vue@2.0之隐藏组件
Vue@2.0之隐藏组件1. Scrollbar1. Scrollbar滚动条美化组件。// 滚动内容作为el-scrollbar的子节点<el-scrollbar> <div>内容</div></el-scrollbar>手动修改样式.el-scrollbar { height: 100%!important; }.el-scrollbar__wrap { overflow-x: hidden;}...
2021-11-22 11:03:06
599
原创 Vue@2.0之使用element-ui
使用element-ui1. 安装依赖2. 修改babel.config.js3. 入口文件1. 安装依赖yarn add babel-plugin-component -Dyarn add @babel/preset-env2. 修改babel.config.jsmodule.exports = { "presets": [ ["@babel/env", { "modules": false }], '@vue/cli-plugin-babel/preset' ],
2021-11-18 16:25:18
126
原创 Vue@2.0之使用less/sass
Vue@2.0之使用less使用less1. 下载依赖2. 独立的vue文件使用sass1. 下载依赖文件2. 独立的vue文件使用less1. 下载依赖npm i less-loader@5.0.0 less@3.0.0 -S2. 独立的vue文件<style lang="less"></style>使用sass1. 下载依赖文件npm i node-sass@4.14.1 sass-loader@8.0.2 -D2. 独立的vue文件<style
2021-10-22 10:08:00
116
原创 造轮子之大数相加减
大数相加减大数相加大数相减拿整数相加举例：大数相加可能是整数可能是小数将小数部分和整数部分分开处理，看成整数相加，最后整合成一个数。小数部分相加后的结果可能产生大于零的整数位(1)，整数部分相加时要处理这个整数位(1)，大数相减可能是整数也可能是小数也是将小数部分和整数部分分开处理，看成整数相减，最后整合成一个数。小数部分相减后可能造成整数个位减1，整数部分相减时要处理减1问题。拿整数相加举例：将两个字符串转换成长度相同的字符串，空位用0向前填充；从字符串末尾向前处理，同位字符转换成数字
2021-09-17 15:19:41
105
转载 JavaScript之作用域和闭包
JavaScript之作用域和闭包1. 作用域和作用域链1.1 作用域1.2 作用域链2. 闭包2.1 闭包怎么设计？2.2 eval2.3 给闭包下个定义2.4 闭包的缺点2.4.1 详细分析2.5 总结1. 作用域和作用域链1.1 作用域变量保存和访问的范围。在JavaScript中，函数，块，模块都可以形成作用域。作用域全称是词法作用域，是在代码编写时就确定了作用域的。1.2 作用域链函数之间的嵌套会形成作用域链。比如说在全局作用域中定义了一个函数f1，又在f1中定义了一个内部函数f2，
2021-08-30 14:37:41
740
转载 转载之https
HTTPS（SSL/TLS）的加密机制虽然是大家都应了解的基本知识，但网上很多相关文章总会忽略一些内容，没有阐明完整的逻辑脉络，我当年学习它的时候也废了挺大功夫。对称与非对称加密、数字签名、数字证书等，在学习过程中，除了了解“它是什么”，你是否有想过“为什么是它”？我认为理解了后者才真正理解了HTTPS的加密机制。本文以问题的形式逐步展开，一步步解开HTTPS的面纱，希望能帮助你彻底搞懂HTTPS。为什么需要加密？因为http的内容是明文传输的，明文数据会经过中间代理服务器、路由器、wifi热点、通
2021-08-26 11:01:03
110
转载 转载之http
http知识整理1. HTTP报文结构2. HTTP的请求方法2.1 HTTP有哪些请求方法2.2 get和post的区别1. HTTP报文结构请求行请求头请求体2. HTTP的请求方法2.1 HTTP有哪些请求方法对于HTTP1.1GET: 获取静态资源或者查询数据POST: 提交数据PUT: 修改数据DELETE: 删除数据OPTIONS: 预请求，跨域时发送复杂请求CONNECT: 建立连接隧道，用于代理服务器TRACE: 追踪请求-响应的传输路径2.2 get和
2021-08-20 15:22:49
273
原创 node之koa
node之koa1. 中间件1.1 @koa/cors1.2 koa-body1.3 koa-static1.4 koa-router1.5 chalk1. 中间件1.1 @koa/cors解决跨域问题的中间件。npm i @koa/cors -Shttps://www.npmjs.com/package/@koa/cors1.2 koa-body处理post请求和文件上传的请求数据。npm i koa-body -S1.3 koa-static请求静态资源中间件。请求一般分成两种
2021-08-18 09:07:12
1248
原创 node.js编写命令行
node.js编写命令行1. 创建命令文件2. 修改package.json3. 处理命令行参数4. commander处理参数4.1 option4.1.1 可变变量4.1.2 必须的option4.1.3 no-前缀参考地址：1. 创建命令文件hello.js#!/usr/bin/env nodeconsole.log(`hello world`);2. 修改package.json增加配置{ ...... "bin": { "hello": "scripts/hello
2021-08-09 11:12:52
391
原创 模板之React项目框架搭建
这里写目录标题使用react-redux下载依赖文档地址使用react-redux下载依赖npm install redux react-redux redux-saga redux-devtools js-base64 --save文档地址redux: https://www.redux.org.cn/redux-saga: https://redux-saga-in-chinese.js.org/js-base64: https://www.npmjs.com/package/js-b
2021-08-03 15:33:49
936
原创 造轮子之前端国密库使用
1. 下载依赖文件文件下载2. 引入文件<script src="sm-crypto-qbNh29hHpQvU.js"></script>3. 浏览器兼容性支持 Chrome、Firefox、Edge 的最新版本，支持 IE 10、IE 11，不支持 IE 9 及以下版本。4. 对称密钥（SM4）加解密//生成密钥SM4.generateKey()//SM4加密SM4.encrypt('密钥', '原文', { mode: '加密模式（ecb或cbc）', iv
2021-07-23 13:27:10
546
1
原创 数据结构之回溯算法
回溯算法0. 概念0. 概念一种渐进式的寻找并构建问题及解决方案的策略。从第一个动作出发并使用这个动作解决问题，如果问题不能解决，就回溯，使用下一个动作尝试解决，依次类推。
2021-07-09 16:25:02
226
原创 数据结构之贪心算法
贪心算法0. 概念1. 最少硬币找零2. 分数背包问题0. 概念贪心算法追求的是一种近似解决问题的技术。最后得到的方案可能不是最优方案。1. 最少硬币找零从尽可能使用大面额的零钱来找零。function minCoinChange(coins, amount) { const cache = []; let total = 0; for (let i = coins.length - 1; i >= 0; i--) { const coin = coins[i];
2021-07-08 16:38:59
128
原创 数据结构之动态规划
这里写目录标题1. 动态规划1.1 最少硬币找零1. 动态规划1.1 最少硬币找零采取分而治之的方式实现功能。将大问题划分成小问题，通过解决小问题，进而解决大问题。创建缓存变量对象，保存小问题的解决方案找到金额数是1时，找零的最佳方案。找到金额数是2时，找零的最佳方案。找到金额数是3时，找零的最佳方案。…function minCoinChange(coins, amount) { const cache = []; const makeChange = (value) =
2021-07-08 15:47:47
379
原创 数据结构之搜索
数据结构之搜索1. 线性搜索2. 二分搜索1. 线性搜索从头开始和要查找的元素作比较，知道找到目标元素位置。2. 二分搜索将数组排序取数组中间值，用中间值和目标值作比较。如果选中值是待搜索值，那么算法执行完毕（值找到了）如果中间值大于目标值，中间值左侧的值，执行第2步和第3步如果中间值小于目标值，中间值右侧的值，执行第2步和第3步function binarySearch(array, key, compareFn = defaultCompareFn) { array = q
2021-07-06 09:28:07
238
原创 数据结构之排序算法
排序算法0. 比较函数1. 冒泡排序2. 选择排序3. 插入排序4. 归并排序5. 快速排序6. 计数算法7. 桶排序0. 比较函数const COMPARE = { LESS_THAN: '-1', EQUALITY: '0', BIGGER_THAN: '1'}const defaultCompareFn = (a, b) => { if (a > b) { return COMPARE.BIGGER_THAN; } else if (a === b
2021-07-05 10:52:14
392
原创 数据结构之二叉搜索树
数据结构之树1. 相关术语2. 二叉搜索树2.1 节点对象2.2 比较函数2.3 树对象1. 相关术语第一个节点叫做根节点包含至少一个子节点的节点叫做内部节点没有子节点的节点叫做叶节点2. 二叉搜索树左侧的子节点小于父节点，右侧的子节点大于父节点。insert(key) 插入一个元素search(key) 查找树中是否包含key元素，是返回true, 否返回falseinOrderTraverse() 中序遍历，以从小到大的顺序遍历所有节点。preOrderTraverse()
2021-06-28 08:58:33
276
原创 数据结构之递归
递归1. 概念2. 实例2.1 数字阶乘2.2 斐波那契数2.3 记忆化斐波那契数1. 概念函数内部调用函数自身就是递归。在编写递归的函数的时候原则：找到最小单元。找到终止条件2. 实例2.1 数字阶乘// 数字阶乘, 0的阶乘是1// 1. 迭代方式function factorialInteractive(num) { if (typeof num !== 'number' || num < 0) return undefined; let total = 1;
2021-06-23 16:46:31
94
原创 数据结构之字典和散列表
字典和散列表1. 字典2. 散列表1. 字典set(key, value) 向字典中添加新元素，如果key已经存在，原来的值会被覆盖。remove(key) 删除字典中的元素。get(key) 获取字典中的元素。size() 获取元素个数。hasKey(key) 是否包含某个键。clear() 清空字典。keys() 获取所有键。values() 获取所有值。keyValues() 返回所有[key, value]。isEmpty() 字段是否为空。forEach(callbac
2021-06-23 11:29:01
328
转载 数据结构之集合
数据结构之集合1. 手写集合2. 集合的运用3. 多重集1. 手写集合集合是一种保存不重复数据的数据结构，和ES6中的Set类类似。add(element) 添加元素delete(element) 删除元素has(element) 是否包含某元素clear() 删除所有元素size() 返回元素个数values() 返回由所有元素组成的数组class SetCustom { constructor() { this.items = {}; } add(elemen
2021-06-22 15:58:48
235
原创 数据结构之链表
数据结构之链表1. 单向链表2. 双向链表1. 单向链表push(element) 向链表后端添加元素insert(element, position) 向某个位置插入元素getElementAt(index) 获取某个位置的元素remove(element) 从链表中移除元素indexOf(element) 获取元素的位置索引removeAt(index) 移除某个位置上的元素size() 获取元素个数isEmpty() 链表是否为空// 节点对象class Node { c
2021-06-22 10:25:42
275
2
原创 数据结构之队列
数据结构之队列1. 概念2. 基于{}的队列3. 双端队列1. 概念队列是一种基于先进先出原则的数据结构，从队列后端添加新元素，从队列前端删除元素。2. 基于{}的队列enqueue(element) 向队列后端添加元素dequeue() 从队列前端删除元素，返回被删除的元素peek() 返回队列中的第一个元素isEmpty() 队列是否为空。true表示为空，false表示非空size() 队列中元素的个数。clear() 清空队列。class Queue { construc
2021-06-18 10:27:17
77
原创 数据结构之栈
栈1. 概念2. 基于数组的栈3. 基于{}的栈4. 私有属性4.1 通过Symbol实现4.2 通过WeakMap实现1. 概念栈是一种遵循后进先出的有序集合。添加的新元素或者要删除的元素都位于栈顶，另一端叫栈底。新元素都靠近栈顶，旧元素都接近栈底。2. 基于数组的栈通过数组来保存栈中的元素。push(element) 向栈中添加元素。pop() 删除栈顶的元素，返回被删除的元素。peek() 返回栈顶的元素。isEmpty() 判断栈是否是空栈。true表示栈为空，false表示栈是非
2021-06-16 15:10:11
57
原创 造轮子之类数组转化成数组
类数组转化成数组1. 类数组对象2. Array.prototype.slice.call()3. Array.from()4. 扩展运算符(...)1. 类数组对象具有length属性不具有数组的所有方法常见的类数组有 arguments, NodeList2. Array.prototype.slice.call()内部实现：Array.prototype.slice = function(start, end) { start = start || 0; end = end
2021-06-16 11:19:00
71
sm-crypto-qbNh29hHpQvU.js
2021-07-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人