- 博客(32)
- 收藏
- 关注
RSS订阅
原创 async/await 实现原理探析
async/await 实现原理探析ES2017 提供的 Async/Await 是标准的异步编程语法，作为异步编程终极解决方案，可以使开发者使用书写同步代码的方式处理异步编程，本文尝试将 Async/Await 编译成为 ES5 的代码后，去理解其内部实现。代码const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))async function test() {
2022-04-16 17:56:45
469
原创 Redux源码解析及复现
复现redux本项目对redux进行一个简单复现，下面介绍api、实现及其作用芝士点HOC，高阶组件发布-订阅模式React Context函数柯里化state：redux保存的总数据reducer：统一更改 state 的函数，通过 type 值对应不同的更改操作listeners：储存监听函数列表，通过发布订阅模式通知组件更改数据StoregetState：返回 statedispatch：接受一个 action，将 state 和 action 传递给 reduc
2022-03-31 19:18:58
1329
原创 手写一个React的markdown组件
前言最近需要一个React的markdown组件，类似于CSDN的写博客时候的，在网上也找到了很多现成的，但是很多功能需要定制化，所以选择了看教程自己造一个轮子出来。UI设计markdown的样式，也是与网上现成的差不多，主要是仿照了CSDN的markdown编辑器。markdown左边使用的是textarea，右边展示区使用的则是div。下面是本文在我的markdown中的效果。词法解析实现md格式的解析使用的是marked库，代码部分的高亮使用的是highlight库，具体的配置如下：
2021-08-16 23:13:20
847
2
原创 完成一个转换template的webpack-loader：JetLoader
完成一个转换template的webpack-loader：JetLoader目标传递一个对象，根据 key 注入将其转换为对应的 html，并且支持实时 log 转换的 template 的文件名、可配置的首字母大写转换import tpl from "./info.tpl";const info = tpl({ name: "jet", age: 34, career: "前端实习生", hobby: "game/篮球",}); const root = documen
2022-04-17 22:32:40
799
原创 手写Promise和all、race等方法，附上原理解析
手写一个迷你版的PromiseJavaScript 中的 Promise 诞生于 ES2015（ES6），是当下前端开发中特别流行的一种异步操作解决方案，简单实现一个迷你版本帮助深入理解 Promise 的运行原理芝士点微任务static发布-订阅模式Promise 的声明const PENDING = 'PENDING'const FULFILLED = 'FULFILLED'const REJECTED = 'REJECTED'class JetPromise { st
2022-04-05 19:48:45
1158
原创 js中的this指向总结
js中的this指向总结默认绑定在普通函数中打印调用 this，默认指向 window在开启了严格模式后，结果为 undefinedfunction fn() { console.log(this);}fn(); // window'use strict'function fn() { console.log(this);}fn(); // undefined隐式绑定简单来说口诀就是，谁最后调用，this 就指向谁function getName () {
2022-04-02 22:32:30
224
原创 Js权威指南阅读--Day4
迭代器可迭代对象和其相关的迭代器是ES6后的一个特性，利用…扩展运算符和for…of可操作迭代对象的值，js中的迭代，分为三种类型可迭代对象：指的是具有可迭代方法，且返回迭代器对象的对象。迭代器对象是指具有next()方法且返回迭代器结果对象的对象。迭代器结果对象是指具有value和done属性的对象。可迭代对象的迭代器方法采用了特定的符号Symbol.iterator作为名字实现可迭代对象// 实现可迭代对象class Range { constructor(from, to) {
2022-03-27 15:18:39
1063
原创 Js权威指南阅读--Day3
函数函数声明语句会提升到包含脚本、函数或代码块的顶部，在一个JavaScript代码块中的声明的所有函数在该块的任何地方都有定义，而且会在JavaScript解释器开始执行前被定义箭头函数与function式的函数区别箭头函数从定义自己的环境继承this的值，而不是像其他方式定义得函数那样定义自己的调用上下文。箭头函数arguments指向其父级函数作用域的arguments箭头函数没有prototype属性，故而箭头函数不可以用作构造函数箭头函数是匿名函数，依赖于变量或者参数，而let和
2022-02-27 16:27:03
115
原创 Js权威指南阅读--Day2
对象new与Object.create()对于new来说，整个过程分为四步创建一个空的对象把新对象的原型绑定到构造函数的原型上构造函数被执行，将新对象绑定到函数中的this上返回对象，返回构造函数的返回值，如果不是对象，则返回创建的对象function Person (name,age) { this.name = name this.age = age}function jetNew () { // 1、创建一个空对象 const obj = {} // 2
2022-01-18 21:14:20
195
原创 Js权威指南阅读--Day1
一直想系统的去学习梳理一边js的基础，最近选择了JavaScript权威指南，俗称“犀牛书”，从今天开始从头开始阅读一边，对了js的基础进行查缺补漏，每天阅读后对于新的知识点进行一个小总结，方便复习原始类型与对象类型Js中的类型分为原始类型与对象类型，原始类型是不可修改的（immutable），对象类型是可修改的（mutable）。原始类型包括数值，布尔值，符号，null和undefined。字符串可以看成字符数组，但是他也是不可修改的，所有看起来修改了字符串的操作，其实都是返回了一个新的字符串。
2022-01-16 21:55:56
265
原创 在vscode中使用sftp自动保存更新代码到服务器上，Error: No such file报错解决
以前在写node代码部署到服务器的时候，都是直接将代码文件夹复制到服务器上部署，但是有点小更新就要手动上传，觉得很麻烦，于是找到了vscode自带的sftp插件进行代码自动部署，非常方便，下面进行介绍首先去应用商店下载，就不多介绍了安装好之后，输入Ctrl+Shift+P搜索sftp回车得到配置文件写入代码{ "name": "My Server", "host": "ip地址", "protocol": "sftp", "port": 22, "user
2021-11-23 22:49:00
1684
1
原创 redux-toolkit 报无法序列化Warning A non-serializable value was detected in an action
A non-serializable value was detected in an action, in the path: payload.config.adapter. Value: ƒ xhrAdapter(config) {return new Promise(function dispatchXhrRequest(resolve, reject) {var requestData = config.data;var requestHeaders = config.headers;va.
2021-11-21 23:17:51
6498
原创 react hook 入门
概述Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这里有关于hooks的优缺点讨论：谈谈react hooks的优缺点useState一个简单的点击按钮，数字增加的案例代码：import React, { useState } from 'react'export default () => { const [count, setcount] = useState(0) con
2021-07-04 16:20:08
103
原创 react 利用第三方包 配置相对路径
config-overrides文件配置（customize-cra）1、设置相对路径const { override, addWebpackAlias} = require('customize-cra');const path = require('path') module.exports = override( addWebpackAlias({ '@': path.resolve(__dirname, 'src'), 'app': path.resolve(__dir
2021-07-02 16:40:07
773
原创 JS 原型与原型链
prototype任何JavaScript对象(null除外)都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototyoe指向的对象，即任何对象都是由一个构造函数创建的，被创建的对象都可以获得构造函数的prototype属性，注意：对象是没有prototype属性，只有方法才有prototype属性。function Person() {}var person = new Person(); //方法才有prototype,普通对象无prototypeconsol
2021-07-02 15:00:45
99
原创 JS 闭包 防抖与节流
定义「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。直接上例子function makeFunc() { var name = "Mozilla"; return
2021-06-28 21:37:34
176
原创 对于 cookie localStorage 的理解
cookie最近在做期末项目，开发登录模块时，想到是否有某些工具可以保存用户的登录信息，于是便去网上搜索，发现了一种简单的机制，利用浏览器的cookie功能，保存登录信息。cookie （储存在用户本地终端上的数据）cookie 小甜饼。它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的在react中的实现也非常简单/
2021-06-18 10:14:10
219
原创 ES6新特性总结
let1、不能被重复定义2、let不存在变量提升，而var存在varvar在块级作用域中，会将var的声明提前至前面，源代码中，其实真实的代码应该是let报错3、let拥有块级作用域let命令声明的变量只在其块级作用域中有效，就是{}中，在块级作用域内，若存在用let命令声明的变量，则所在区块对该变量形成封闭作用域，即该变量无视外部的同名变量。打印出1还有一个网上常说的例子当我们点击第一，第二，或者第三个块时，类型错误，就是没有找到 item[i] 这个变量，这是由于使
2021-05-26 23:10:42
404
2
原创 H5C3--笔记
div盒子不给宽度就和浏览器一样宽要想盒子里的浮动元素撑开盒子，需要清除浮动，在父级元素里添加，overflow:hidden子绝父相：上一级的父级盒子使用相对定位，孩子元素在父级盒子的参照上使用绝对定位行内元素加了浮动或者定位后，可以控制大小（span）块级元素加了定位后，不再占有一行，大小与内容相等（div）浮动的元素不会压住下面标准流的文字，但是绝对定位会display隐藏元素后，不再占有位置，而visibility隐藏元素后，继续占有位置，overflow设置显示溢出的内容（scroll
2021-03-20 18:18:26
70
原创 算法日记--十三日日记
今日内容–博弈论1、巴什博奕例题：一堆石子，给定石子数量n，和每次最多能取出的石子数量m。有结论：如果满足n % (m + 1) ！= 0，则先手必胜，否则先手必败。例题： [HDU-1846] [HDU-1847]2、尼姆博弈有n堆各若干个物品，两个人轮流从某一堆取任意多的物品，规定每次至少取一个，多者不限，最后取光者得胜。以三元组为例，(a,b,c)。如果a ^ b ^ c != 0 即为必胜态。如果a ^ b ^ c == 0 即为必败态。我们将必败态时的(a, b, c)成为奇
2021-02-20 20:18:25
68
原创 算法日记--十二日日记
今日内容–数论素数筛：1、埃氏筛（时间复杂度O（nloglogn））：const int maxn = 100;bool number[maxn + 5];void isprime() { int i, j; memset(number, true, sizeof(number)); for (i = 2; i <= maxn; i++) { if (number[i] == true) { for (j = 2; j * i <= maxn; j++) num
2021-02-03 20:46:18
101
原创 算法日记--第十日日记
今日内容–最小生成树kruskal()算法需要借助并查集，首先用结构体存入边，将边进行排序成为升序排序，接着选取权值最小的边，再将边的两个端点，进行并查集的父亲判断，如果属于一个父亲，就不能添加这条边，否则会形成环，如果不属于一个父亲，就更新父亲信息，将其更新为同一个父亲，直到找到n-1条边，就生成了最小生成树。struct node{ int me,zd,q;}edge[N*N];int n,m;int f[N];int find(int x) { return x == f[x] ?
2021-01-31 23:27:24
71
原创 算法日记--第九日日记
今日内容–最短路径Floyd算法，可以求出任意两点的最短路径，但是时间复杂度为O（n^3）。for (k = 1; k <= n; k++) { for (i = 1; i <= n; i++) { for (j = 1; j <= n; j++) { dis[i][j] = min(dis[i][j], dis[i][k] + dis[k][j]); } }}Dijkstra 算法，求单源最短路径，时间复杂度为O（nlogn）。（感觉写的是
2021-01-30 22:14:40
78
原创 算法日记--第八日日记
今日内容–哈希可以通过哈希函数（通常含有素数），将目标进行运算得到一个值（大数很难重复），进而通过哈希值的比较来判断问题的成立与否。例题：UVA 11475 将字符串转换为回文串两个存放hash值的数组，分别从字符串的前后进行哈希。之后再从前向后比较两个hash数组的值，算出需要添加的字符构成回文串。...
2021-01-29 22:29:15
78
原创 算法日记--第七日日记
今日内容–动态规划dp解题的思路是分解问题，子问题和原问题形式相同或类似，只不过规模变小了。子问题都解决，原问题即解决。接下来确定边界情况，状态转移方程。例题：求出最长上升子序列的长度，比如，对于序列(1, 7, 3, 5, 9, 4, 8)，有它的一些上升子序列，如(1, 7), (3, 4, 8)等等。这些子序列中最长的长度是4，比如子序列(1, 3, 5, 8)用maxlen表示第i个点的最长上升子序列，初始状态下，都为其本身，即为数字1，遍历数组，第二层循环中，从0到i进行遍历，如果i之
2021-01-28 23:44:17
83
原创 算法日记--第六日日记
今日内容–贪心优先队列（大根堆，默认为大根堆）：priority_queue<int > qu;优先队列（小根堆）：priority_queue<int,vector<int>,greater<int> > qu;贪心，就是找到局部最优解的思想，关键在于找到切入点，今日例题e和g较难，值得参考。...
2021-01-26 22:56:34
106
原创 算法训练--第五日日记
今日内容–线段树（对于一个数，想将它乘以二就将其左移一位，再想加一就|1）对于一个数组（大小为N），我们可以通过一个线段树数组（大小约为4N），用来存储其某段区间的信息，例如最大值，区间和。通常会有build函数，用来建造线段树。void build(int L, int R, int i) { tree[i].left = L; tree[i].right = R; if (L == R) { tree[i].sum = arr[L]; return; } int mid = (
2021-01-26 22:28:43
59
原创 算法训练--第四日日记
今日内容–搜索bfs从起点开始，逐步向外扩散，扩散的过程中将点入队列。矩阵迷宫寻终点问题（[POJ-2251]，从二维到三维的过程）dfs从某点开始，按照边不断递归搜索下一个点N皇后问题二分图染色对于一张图，如果可以把点分配成两派，某一派中，点之间没有关系，只存在派与派之间的关系，因此，在搜索中，可以将某一派标志为1，另一派标志为2，在搜索的过程中，如果发现同派同色的点有关系，就代表不是二分图。例题：hdu-5285拓扑排序用于解决有向图中是否有环的问题，对于节点，我们存储其入度信息，
2021-01-24 22:49:11
68
原创 算法训练--第三日日记
今日内容–二分前提：对于一个有序序列。如果直接从头，顺序查找，时间复杂度为O(n)，引入二分查找，每次与序列的中间值进行比较，如果小于中间值，即可排除右区间，下次在左区间进行查找，同理，如果大于中间值，即可排除左区间，下次在右区间进行查找。从而，对于整数来说，即可逼近答案，而对于浮点数来说，需要预先定义好精度，当fabs(left-right)<ep时，即可结束判断。...
2021-01-22 22:31:01
67
原创 算法训练--第二日日记
今日内容–并查集用于解决将不相关的元素进行分组的情况。首先有fa[maxx]数组用于存储第i个元素的父亲是谁，初始状态都为i本身。find()函数使用路径压缩算法，一边查找父亲信息，一边更新，即有：return x == fa[x] ? x : (fa[x] = find(fa[x]));merge()函数void merge(int x, int y){ int fx=find(x),fy=find(y); fa[fx] = fy;}可用于解决吃饭分桌问题hdu-1213
2021-01-22 00:11:47
117
原创 算法集训--第一日日记
今日内容-----STLstring 动态字符串//迭代器的引入，利用auto it:type 的方法智能对对象进行迭代string 常用方法 clear() lenth() push_back()find() 方法返回查找内容的下标，若无返回值-1append() 追加内容----string类型可以用s1+s2来追加，append好处是可以追加参数（s2,3） --3为长度 也可（s2,3,3）从下标3开始截取长度为3的字符串erase() 删除指定长度的字符串vector 动态数组（内
2021-01-20 23:04:26
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人