- 博客(51)
- 收藏
- 关注
RSS订阅
原创 学习TypeScript 之 Pick与泛型约束
何为Pick?type Pick<T, K extends keyof T> = { [key in k]: T[key]}就是从一个复合类型中，取出几个想要的类型的组合，例如：// 原始类型interface TState { name: string; age: number; like: string[];}// 如果我只想要name和age怎么办，最粗暴的就是直接再定义一个（我之前就是这么搞得）interface TSingleState { name: st
2020-06-21 00:16:33
22739
4
原创 动手写一个redux，react-redux以及对中间件的扩展(异步thunk，打印logger)
手撸的乞丐版如下，仅实现了最基础的功能，订阅，派遣，获取三个功能，不过已经可以简单使用了，做个计数器是没啥问题，而且可以更简单粗暴的看到redux的核心功能const REDUX_INIT_TYPE = "@@REDUX_INIT_TYPE"export function createStore(reducer) { let currentState = undefined; const currentListenerList = []; function getState() { ret
2020-05-13 18:17:05
339
原创 react之context学习笔记（contextTypes/childContextTypes，createContext，useContext）使用方法，及部分源码翻译
在react16.0之前，如果想要使用context，需要使用childContextTypes以及contextTypes// 父组件class TestContext extends Component { state = { childContext: "123" } constructor(props) { super(props...
2020-05-08 00:13:25
2648
原创 【菊花一紧】vscode崩溃后，暂存区的代码全无，如何拯救
电脑比较垃圾，启动的东西太多了，导致电脑卡死，强制重启后，代码全没了，之前用vscode提交到暂存区了，结果暂存区的东西全被还原了，git也找不到记录，没有commit。6.输入git cat-file -p [name] (这个name 分为两部分 1.当前文件夹名，2.文件名)4.打开objects按时间排序，找到对应到当前时间的文件夹，ad,09,98,76类似这样的文件。7.查看对应文件后导出文件，命令后面加自己的文件夹，以及文件名和类型。一定要常保存，提交。8.腌臜之事，希望大家别遇到文件丢失。
2024-01-31 10:25:40
1100
原创 umi/max如何给请求增加公共header
大功告成，理了将近5个小时，还是自己太菜了，应该直接去看plugin-request包的，结果先去看了umi中对app.ts的使用，期间又发现对@babel的parse，traverse，types包一脸懵逼，又去稍微了解了一下，花了三个小时，，因为是在app.ts中添加的配置，但是并不知道该配置是在何时何地如何被使用的，所以去翻阅了一下umijs/plugin-request源码。通过上面的代码，我们可以了解.umi/plugin-request/request.ts中的config是如何生成的。
2023-09-06 22:31:30
1594
原创 eggjs TypeError: Cannot set property router of #＜Object＞ which has only a getter解决方法
按照egg官网快速搭建的sequelize环境，结构如下home中const Controller = require("egg").Controller;class HomeController extends Controller { async index() { this.ctx.body = "Hello world"; }}module.exports = HomeController;npm run dev启动服务正常，访问127.0.0.1/则报错：TypeErro
2023-09-05 11:15:03
2442
原创 箭头函数和普通函数的区别
};// 在实例化时，每个箭头函数都会生成一个新的方法，导致方法不能共享一个内存。// instance1.arrowMethod === instance2.arrowMethod // false // 只要是继承了父构造函数，他们的普通函数都会被继承，且指向同一个内存地址，可以减少内存开支。
2023-08-04 10:47:03
245
原创 react面试之context的value变化时，内部所有子组件是否变化
为了解决父组件state更新，而导致子组件更新，我们需要给ABC三个组件的export default加上memo方法，第二个参数为PropsAreEqual，直接让他返回true。是因为他们共同使用了一个context，而他的value是一个对象，每次都会重新生成一个新的对象，所以导致B组件以为context更新了，所以他就会触发渲染了。此时更新a的值，并不会影响BD组件，只有A组件会更新。同时，更新b的值，也不会触发A组件的更新，只有BD更新。答案是不会，ABD都更新了，C没有更新。
2023-08-03 00:32:10
1565
3
原创 Next.js框架入门笔记
‘pages/_document.js’ 文件，自定义documentDOC： https://www.nextjs.cn/docs/advanced-features/custom-document<Head>是一个内置在 Next.js 中的 React 组件。它允许您修改页面的<head>。Docs: https://www.nextjs.cn/docs/api-reference/next/head<Link>组件切换路由，不会刷新浏览器。而<a>标签切换链接时浏览器会进行完全刷新。N
2023-07-14 18:42:22
813
原创 Promise分享
JS异步的实现靠的就是浏览器的多线程，当他遇到异步API时，就将这个任务交给对应的线程，当这个异步API满足回调条件时，对应的线程又通过事件触发线程将这个事件放入任务队列，然后主线程从任务队列取出事件继续执行。以浏览器为例，有以下几个常见的进程和线程：在异步模式下，创建异步任务主要分为两种。ES6 规范中，宏任务（Macrotask） 称为 Task， 微任务（Microtask） 称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。宏任务与微任务的几种创建方式 👇。
2023-07-14 16:59:08
246
原创 Cookie中expires为Session是干啥用的
该值与Session的作用是一样的，都是在关闭浏览器时生效，也就是当浏览器关闭的时候，这个cookie就会被浏览器清除。这个session是干啥的，根据查阅资料得出。
2023-04-18 22:41:21
2172
转载 【转】CKEditor5——Conversion理解
不出所料，这个方法的确返回一个函数，而这个函数的执行逻辑就是绑定当某个模型插入的时候，我们应该进行的模型转化视图的逻辑，同时还附加一些其他操作，这里的其他操作我们以后分析。有了上面的知识，我们对conversion的理解有近了一步，那么这里有个问题，conversion是editor的一个属性，那么这个属性是怎么初始化的呢？大家知道，在CKEditor5中，Conversion（转化器）是最重要的一个组件之一，为了深入的理解转化器，我们先从大的层面来掌握一下，以后再分别从细节入手。旨在保存笔记，方便查找。
2023-04-04 18:00:38
615
原创 error in xxx setup command: use_2to3 is invalid.
setup command: use_2to3 is invalid.
2023-02-07 15:02:02
2951
原创 Variables cannot be declared with ‘cpdef‘. Use ‘cdef‘ instead.
Variables cannot be declared with 'cpdef'. Use 'cdef' instead.
2022-12-14 17:33:23
1617
3
原创 Cannot read properties of null (reading ‘pickAlgorithm‘)
mac解决。npm install提示的Cannot read properties of null (reading 'pickAlgorithm')
2022-12-02 17:39:47
1925
原创 Failed to read the ‘localStorage‘ property from ‘Window‘
"Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.",首先梳理一下Storage的使用规则localStorage需要在相同协议+相同主机名+相同端口，也可以说是在同一域名下使用。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下
2022-05-16 00:43:00
1236
原创 【https】踩坑DeviceMotionEvent（设备加速度感应）实现摇一摇功能
网上相关文档很多，但都是复制粘贴的。先贴出我的参考DeviceMotionEvent官方文档DeviceOrientation Event Specification有关摇一摇的代码var SHAKE_THRESHOLD = 3000;var last_update = 0;var x = (y = z = last_x = last_y = last_z = 0);if (window.DeviceMotionEvent) { window.addEventListener("devic
2022-04-27 19:59:28
907
原创 $$的使用，与由来
今天同事给了一段神奇的代码，如下[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})大家可以猜猜是干啥的。321答案揭晓：页面中所有的元素都被加上了外框，颜色是随机的，可以清晰的看到所有的布局情况～这个代码等同于$$("*").forEach(function(a){ a.style.outline="1px
2021-11-30 16:03:47
2232
原创 scrollHeight/clientHeight/offsetHeight的区别
scrollHeight: 内容真实的宽度,包括被卷起来的高度（228px）clientHeight: 展示的高度，不包括滚动条，也就是183pxoffsetHeight: 在标准流中所占的高度，也就是我们自己设置的200px高度如果box不是overflow:scroll，那么clientHeight等于offsetHeight如果盒子的高度大于内容的高度，也就是不出现滚动条的时候，这三个是相等的。...
2020-09-22 16:33:43
355
原创 git clone 只有.git文件夹 git status后发现文件夹全都被删除了
近期在拉代码的时候，发现了个问题，拉下来的代码一致都报错，然后只有一个.git文件夹，使用git status发现，所有的文件都被删除了，根据系统提示的 **git restore --source=HEAD : /**才将内容恢复回来。但是，问题来了，恢复后的文件，被git认为成我自己修改的文件，当我git add .的时候，这些都变成了我的提交记录，然而我也只是做了次git clone的操作而已，就要提交修改了1000+文件。崩溃error: invalid path 'xxxx/img/100*
2020-09-22 16:16:39
6359
原创 关于link的rel值
link在之前的认知中，也就是一个加载css的标签，如因为很久没有改过html文件了，今天突然看到了create-react-app默认生成的index.html中有这么个使用方法这就打破了我最初的认知，我竟然对link的rel一点都不了解，所以我百度了一下，决定看看他到底有多少个可选值。我的天，这么多。。属性值描述alternate提供指向文档备用版本的链接（即打印页面，已翻译或镜像）。例如: <link rel=“alternate"type=“application/at
2020-08-24 17:25:21
509
原创 正则中的不匹配
同事提出了一个需求，匹配1|1，但是有不能匹配-1|1，也就是1|1之前不能有-代码如下const reg = /[^-]1\|1/reg.test("1|1") // truereg.test("-1|1") // falsereg.test("-1111|1") // true由此我和我的小伙伴们又去找了些其他奇奇怪怪的需求~比如// 相邻两个数字不重复const siblingNum = /(\d)\1/ // 这个是找到相邻数字重复的情况，siblingNum.test("112
2020-08-04 14:44:07
6063
原创 commonjs amd cmd的学习笔记
目下最流行的三种模块引入规则： commonjs, AMD(RequireJs)，CMD(SeaJs)，其实后两者可以归为一类，为什么呢？因为使用起来很相似，不过细细一看，他们好像都差不多，上代码看看// commonJs// a.jsmodule.exports.a = 1;module.export.b = 2;// b.jsconst module_a = require("./a.js")console.log(module_a.a) // 1console.log(module_a
2020-07-28 23:19:32
109
原创 try catch throw的血泪教训
最终版本如下function getJson(str) { try { let json = JSON.parse(str); json.a = 1; console.log("json", json); return json; } catch (error) { console.error(error.message); return {}; }}console.log("aa"
2020-05-29 18:22:29
630
原创 Css实现自适应屏幕宽度的正方形
思路，正方形，长宽都一样，需要找到一个标准值然后再去设置盒子模型，可以用padding，margin, width/height,正题开始1. 使用padding，原因，百分比是基于父元素的宽度，所以如果是根据父盒子的百分比来算，则可以使用这个方法具体代码如下<div class="square"></div>.square { display: inline-block; padding: 0 20% 20% 0; background: red
2020-05-29 16:16:10
2313
1
原创 React useReducer遇到的小问题及解决方案
在useReducer的reducer中，对state进行操作，就会导致错误function getAnalyzeItem(){ return { a: 1, b: 2 }}// 错误写法 function analyzeReducer(state: TFilterItemVal[], action: TReducerAction<TFilterItemVal>) { const { index, data, type } =
2020-05-29 12:49:41
1999
2
原创 理解一下js的防抖
先来个基础版开开胃，设置定时器，再次触发时如果有就清除，通俗易懂function debounce(callback, timeout = 1000) { let shakeTimer = null; return (...arg) => { if (shakeTimer) { clearTimeout(shakeTimer); } shakeTimer = setTimeout(() => { callback.call(this, ...arg) }, ti
2020-05-19 11:04:31
148
原创 给自己讲一遍redux以及为什么要用redux-thunk
什么是redux？我认为他就是一个公共状态管理工具，通过js的闭包，独立开辟一个环境，用于保存公共状态state，而这个state我们默认他为只读的，不能直接修改，这就保证了在使用时不会有人乱改里面的值而导致整个状态被污染的情况。如果想要更改它，就需要用到redux暴露出来的dispatch方法，接受一个action，也就是给redux派发一个动作，让他根据动作去修改state，每个动作都对应着一个操作流程，做着很单一的工作，比如add就是对某个值进行加法，只要通过action我们就能知道他要干什么。而这个
2020-05-15 00:17:45
943
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人