- 博客(130)
- 收藏
- 关注
RSS订阅
原创 【React hooks】useState (原理) 与useEffect (用法)
简单的原理如下例子，使用useState函数，可以得到初始值n=0，随后每一次调用setN都可以更新n，并渲染Appimport React from "react";import ReactDOM from "react-dom";const rootElement = document.getElementById("root");function App() { const [n, setN] = React.useState(0); return ( <div cl
2021-07-18 11:59:17
1364
1
原创 【网络】Cookie、Session与Token、JWT及CSRF攻击
由于HTTP是一种无状态的协议，所以当我打开淘宝，登录后，点击跳转结账（另一个页面），服务器端就不知道现在发请求的是不是我了，就得让我再次登录来确认身份。所以每一次请求的发生都是全新的，那么就需要一个来记录身份并且验证的东西，相对于通行证一样。这就是Cookie和Session的作用，流程客户端首次发出请求，服务器端收到后开辟一块 Session 空间（创建了Session对象），同时生成一个 sessionId ，并通过响应头的 **Set-Cookie：JSESSIONID=XXXXXXX **命
2021-06-10 13:53:53
644
原创 【网络】XSS网络安全学习及实践
XSS跨网站指令码（英语：Cross-site scripting，通常简称为：XSS）是一种网站应用程式的安全漏洞攻击，是代码注入的一种。它允许恶意使用者将程式码注入到网页上，其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言攻击方式通过修改HTML节点或者执行JS代码来攻击网站https://blog.poetries.top/FE-Interview-Questions/docs/advance.html#_1-xssXSS分类根据攻击的来源，XSS 攻击
2021-06-09 16:27:01
525
2
原创 【JS】Event loop、宏队列与微队列
JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。参考所以需要对异步代码进行特殊的处理才行macrotask（宏任务）在浏览器端，其可以理解为该任务执行完后，在下一个macrotask执行开始前，浏览器可以进行页面渲染。（对应了上一篇文章讲的script代码执行完成后，在执行下一段script代码前，页面渲染了之前的dom
2021-05-29 15:51:04
382
原创 【JS】浏览器渲染机制及渲染阻塞
渲染机制浏览器的渲染机制一般分为以下几个步骤处理 HTML 并构建 DOM 树。处理 CSS 构建 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，计算每个节点的位置。调用 GPU 绘制，合成图层，显示在屏幕上。参考1一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。CSS解析器：它的作用是为DOM中的各个元素
2021-05-29 13:26:34
1160
原创 【es6】赋值解构
返回tuple，元组（数组）的话，在后面调用的时候，比如const [x,xx,xxx] = useProjectsMoal()可以直接改名，但是是按照顺序来的，建议return的数据3个以内的用元组如果三个以上，建议返回对象，这样在调用的时候，const {projectCreate,open,close} = useProjectsMoal()就不能直接改名，但是顺序可以改变，因为读的是键名，可以通过冒号起别名，比如const {projectCreate : create ,open,clos
2022-05-14 15:38:14
457
原创 【nvm】mac系统切换node版本之后，yarn等全局安装的包都没了
切换回去就有了，看到网上的解释是node中npm下载的包只在当前版本的node下使用，切换后需要重新下载，我在win上面切换好像没有出现这种情况https://www.nuomiphp.com/t/60e01b75c5e91a05f526edc1.html
2022-05-14 10:07:26
1874
原创 react eject后antd如何定制主题
官网只介绍了没有eject的方法，用craco来配置，但是eject后，script脚本就变了craco再改脚本就不行了，官网地址：https://ant.design/docs/react/use-with-create-react-app-cn所以探索了一下如何自定义主题参考1、参考2，重点是参考2需要配置less，yarn add less less-loader -D然后在webpack.config.js里面添加如下const lessRegex = /\.(css|less)$/;
2022-05-06 20:44:55
456
原创 Failed to parse source map: ‘webpack://antd/./components/config-provider/style/index.less‘ URL is no
react脚手架搭建项目，运行出现这个问题WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/d
2022-05-04 13:17:17
3614
4
原创 ts不支持node的require写法
如题，就算我安装了node的类型声明文件后，只是require不报错了，但是比如const express = require('express')通过按住ctrl点击express，是无法点进正确路径的，根本没反应，而且express也没有正确的类型推导，显示的是一个any，导致后面的express里面的一些函数调用，类型就会报错，因为这里是any，后面ts不知道这个里面是否有函数，在我调用的时候就会报错。这个时候换成如下两种写法可以解决问题1、esModule的写法import expres
2022-04-27 16:22:44
3030
原创 【ts+node】项目问题 Module not found: Error: Can‘t resolve ‘http‘
直接在main.ts入口文件里写的，结果http无法点进去，找不到路径const http = require("http");但是axios就可以import axios from "axios";所以我在想是不是引入模块的方式有问题，尝试在tsconfig.json里面修改了module，发现是有影响，但是无法解决问题也不是没有局部安装node，这个好像不能是一个问题，node可以多版本，但是貌似不能局部安装下载了别人的一个模版进行对比，发现人家的@types/node的版本是12.0.
2022-04-20 15:03:36
4168
原创 【TS】函数类型的一个疑问（未解决）
这种方式不能限制后面的函数体吗，我前面规定了参数和无返回值void，后面函数体不写参数，返回值也有，但是不报错下面是测试代码，只有最后// void这里的void不是代表不返回值，意思是任何都行，比较宽泛，那为什么不用any，// 我想表示该函数没有返回值的时候，用void已经无法限制了，那用什么呢/* // 我想表示该函数没有返回值的时候，用void已经无法限制了，那用什么呢下面这样写只能是自己写具体函数的时候，自己去定义，万一是我写好后，给别人用，别人也不知道我不想要这个函数没有返回值
2022-04-16 21:24:03
370
原创 webpack5用file-loader图片出错
webpack5，在css文件里面进行引入图片，不用file-loader是可以显示的，但是加了file-loader反而不行/* 没有file-loader的时候也能用 */.img-bg{ background-image: url("../img/眼睛1.jpg"); width: 200px; height: 200px; background-size: contain;}参考链接配置里面这样写就行了{ test: /\.jpg$/,
2022-04-10 17:04:28
1032
原创 vscode无法更改文件夹名称
解决步骤一开始我以为的错误，思路如下如图，当我右边工作区内有某个文件夹下的一个文件的时候（路径有显示），这个时候我去更改这个 12 最上层文件夹，就会卡住，然后报错卡住然后报错，更改失败这个时候工作区没有文件，再更改，也不行但是如果重新打开vscode，然后工作区没有文件的时候，就可以修改成功结果发现，再次修改还是不行，所以不是这个问题然后我对比了教程的其他步骤，发现视频里面删掉了node_modules随后我删掉node_modules后再进行重命名，就都可以了，我猜测应该是no
2022-04-09 16:13:16
7407
7
原创 局部安装~
在文件夹里，用npm init生成package.json后，有package.json的时候就可以进行局部安装了，比如webpack，这个时候要区分是生产环境还是开发环境
2022-04-09 13:36:57
968
原创 vscode文件管理只有文件夹的时候也层级显示
如题，层级关系如下当我的左侧边栏宽度不够的时候就出现如下情况我想在最底层的js文件夹里新建文件不方便，想让这种情况也层级显示所以需要在设置里面，将如下的√去掉去掉之后就行了...
2022-04-09 13:12:48
853
原创 【vue】问题记录1 用v-bind绑定img的图片，使用网络接口图片无法显示，报错403
背景如题，学v-bind 的时候用了img的src来绑定csdn的头像图片，结果一直显示不出，我vscode右键用服务器运行和右键直接运行，出现了两种情况，有本地服务器的时候，不能显示图片，并且查看network的时候，发现403，网上的解决方案都是基于本地图片的，所以那些答案都是说的路径问题，比如引入require来解决，并不能解决我的问题，我这个查了请求头的，地址是对的，但是返回403，所以应该是csdn做了防盗链的处理，所以我尝试换了掘金的图片来看看猜想是不是正确，结果果然是可以正常显示的，所以
2022-03-09 12:16:12
1215
原创 【vue】学习记录
下载源码使用ssh形式在github上下载vue3的源码到本地此处选择旧版本tag，然后yarn install下载依赖然后就出现了第一个问题，info No lockfile found.最后查到问题是这样的首先，使用 git clone xxx 会下载最新版本的文件，然后这个时候vue3已经使用pnpm了，没有yarn.lock文件了。所以我以为下载了旧版本的代码，实际上却是最新版的代码，此时使用pnpm的命令应该是可以的，我在文件里也看到了pnpm.lock。解决办法，回滚到旧版本，使
2022-01-13 16:45:52
1853
1
原创 【ES6】赋值解构的个人新认知
我在之前那篇useState的文章里面写过简单数据结构的解构出来是全新的变量，不会相互影响然后现在去实践了复杂类型结论如下ES6的赋值解构新认知对于obj和array这种复杂类型obj在解构出来的时候，必须要名字一致，array的话，则是根据index的顺序来解构的，可以不用名字一样这两个结构出来的都是引用类型，所以修改里面的是会对原数据进行修改的对于简单数据类型比如 let a = 1, b = 2, c = 3 let nums = [a, b, c] let [d, e,
2021-07-27 12:44:27
358
2
原创 【ES6】箭头函数
箭头函数不能作为构造函数MDN文档箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。参考：链接没有单独的this，要向外找，参考1，参考2不绑定arguments箭头函数不能用作构造器，和 new一起用会抛出错误箭头函数没有prototype属性不会被call、bind、apply改变this指向，不受影响...
2021-07-22 10:13:06
135
原创 【JS】类型转换
对于经常见到的面试题来说，两个数或者对象啥的相加，判断其结果比如1 + 11 + false1 + {}[] + {}{} + []总结其规律，参考当 两个操作数都是数值 时，执行常规的数值加法计算。但有几个值的考虑如果有一个操作数是NaN, 则结果是NaN；Infinity 加 Infinity 结果是 Infinity；-Infinity 加 -Infinity 结果是 -Infinity；Infinity 加 -Infinity 结果是NaN；+0 加 +0 结果是+
2021-07-20 14:48:06
126
原创 【css布局】经典两栏、三栏（圣杯、双飞翼）等布局
两栏布局https://www.jianshu.com/p/267239f8e4b2三栏布局流体布局<body> <style> .left { float: left; width: 100px; height: 200px; background: red; } .test{ width: 200px; height: 300px; background-co
2021-07-15 22:27:59
209
1
原创 【多项目整合上线】遇到的部署问题2，首页启动慢
致命的问题，响应速度慢这打开也太慢了，六七秒才下完资源，要是面试官没耐心打开，我唯一的优势就凉了，所以要解决这个问题，因为这个就一个单页面应用，而且页面也不大，用不到什么懒加载这种（主要是太菜了，不太会，只能选自己目前能解决的方法来解决），我看这个js这么大，所以觉得可以用二级子域名，来分割各个项目，哎结果还是分割了，有点违背我想整合成单页面应用的初衷。试验了一下，分割了后台管理的另外两个项目，暂时用一个mixer的域名，可以发现响应速度明显变快7s变到了2s，所以把几个项目全部分离，就可以光速
2021-07-13 15:26:47
162
原创 【多项目整合上线】遇到的部署问题
我的思路是把多个项目，统一写到一个项目里面，用路由进行链接跳转，项目主体为一个静态页面项目，作为网站入口，页面内布置两个链接，跳向另外两个静态页面，还有一个链接，跳向一个有后端的电商后台管理系统项目，虽然有多个页面要展示，但是实际上是打算用router来做成SPA，所以我把前端代码放到后端代码的public文件夹下，后端用express框架的中间件，可以让其运行，然后使用pm2工具，保持该主体项目的持续运行，理论上是没问题的，但是过程遇到了蛮多问题的，比如，静态网页进去后，一刷新就找不到页面另
2021-07-11 13:19:36
283
1
原创 【项目集合】遇到的一些问题
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the在用
2021-07-10 11:07:17
228
原创 【voice-ui】代码用例展示并改主题配色，添加一键复制功能
用raw-loader可以让代码显示到页面上，这样就可以达到展示如何使用ui组件的效果，比如naive ui首先安装依赖，再写如下代码，可以将指定文件转过来，所以要单独将展示的代码搬到另一个文件里否则，会把其他多余代码也写到里面，而我们只展示使用相关的代码const code = require('!!raw-loader!./icon.example.tsx')然后将code作为props传入一个封装好的，专门用来展示的组件里，就可以渲染了，但是网上都没有怎么改样式，因为初始的样式实在是难
2021-07-07 12:21:02
408
1
原创 【voice-ui】项目build后，无法使用
情景描述在我项目基本做完后，打算发布npm，然后在另开一个新项目，试验做好的ui组件是否管用，结果在新项目中，导入并使用的时候，发现导出的Icon是undefined，然后去重新build看了一下，在icon.d.ts里面只有一个icon的空壳，我明明在开发环境下写了内部函数体，但是却什么都没有得到（我开始以为是这个问题）思路.历程然后就觉得应该是webpack的配置有问题，我在github上找别人的代码，看了很多，要么就是放出来的就是成品ui框架，不会把开发的代码放出来，要么就是没有用webp
2021-07-06 15:00:16
225
原创 【react】脚手架build后，静态页面空白
有两个原因：一是打包后的引用路径，是相对路径，在有服务器的情况下，是没有问题的，但是静态网页直接打开就会找不到资源二是可能使用了BrowserRouter,要改为HashRouter本人的两个问题都出现了首先在package.json里面添加 “homepage” ： " . "其次就是修改Router了然后再build就行了...
2021-07-05 17:27:08
989
原创 【算法】排序算法学习记录
前言按照重点掌握程度列个表，其他的算法就先不用管了算法程度要求时间复杂度空间复杂度快速排序重点掌握O(nlogn)O(logn)归并排序重点掌握O(nlogn)O(n)堆排序熟悉O(n2)O(1)冒泡排序了解O(n2)O(1)选择排序了解O(n2)O(1)快速排序快排是必考的，思路如下，b站一个up讲得挺清晰的三个指针，left，right和pivot，每次pivot取一个值（假设都取数组首位），left、righ
2021-07-05 11:36:04
121
原创 【voice-ui】测试持续集成
部署到ci上在circleci上注册，然后关联到github，讲项目重新推送到一个专门用于持续集成的仓库，将该仓库用ci工具联系起来，建立project如何自动发布首先要注意发布命令要部署在ci上，但是不是每次运行 yarn ci命令就发布， 发布的主动命令要掌握在自己电脑上，在本地新建deploy.sh，通过本地运行 ./deploy.sh patch等命令进行自动升版本号并发布，#!/bin/env bashnpm version $1 && \ git push
2021-07-03 17:37:56
180
原创 【npm】第一次发布npm包，登录不进去
第一次发布，要先去注册一个账号然后npm adduser然后输入刚刚注册的信息注意密码是不显示的，自己输入即可但是我这边一直登不进去后来查了很多才发现，是之前设置了taobao的代理，要改回官网 参考设置回官网就可以了：npm config set registry https://registry.npmjs.org如果后面还想用taobao代理，下载快一点的话，设置淘x,宝的是：npm config set registry https://registry.npm.taobao
2021-07-02 22:57:04
806
原创 【voice-ui】完善webpack配置，loader等
第一个组件Iconiconfont下载svg在阿里的iconfont网站下载想要的图片，目的是通过svg内置于组件，但是，就目前的配置来说，webpack并不支持svg，所以又需要下载新的loader，来处理svg了。webpack配置svg配置 loader，使用svg-sprite-loader { // 处理svg图标 test: /\.svg$/, // 这个loader会
2021-07-01 23:30:25
197
原创 【voice-ui】从零开始搭建，配置webpack
临近校招，因无实习，还非科班，想给简历加分，故只能自己做项目，但类似后台管理系统、购物商城的都已经烂大街了，所以尝试一下能不能做点难度稍微高一点的ui组件库环境配置建立仓库在github上建立fun ui仓库，注意现在github上默认的分支不是master了，我克隆到本地的后，练习上传到另一个地址时，发现不用master了，是main分支在建立的时候勾选了，为仓库创建README文件和 .gitignore文件，.gitignore文件，在里面写了的文件，不会被git工具进行更新，比如后续会
2021-06-30 23:38:27
677
3
原创 【算法】回溯算法学习记录
回溯算法实际上就是一种暴力求解为什么暴力解不用for循环而要用回溯一个极端例子，要求解length为50的数组 的所有子集，for就需要嵌套“无数层”，但是如果用回溯的话，相对于是递归自己在内部调用for循环，说实话给我的感觉有点像，传统的异步函数，因为回调地狱的情况被Promise替换掉，模板回溯法可以有模板，如下在外部先声明变量let res = []let path = []递归函数的参数不一定是这几个，具体问题具体分析const backtracking = (n , k ,
2021-06-28 22:15:33
159
原创 【手写】call、apply、bind
call// 首先明确原生call的作用//fn.call(a, ...args) //作用就是a.fn(...arg) 让a来调用fn，this指向a// 返回值就是执行目标函数后的返回值，所以要在内部执行该函数Function.prototype.myCall = function (context = window, ...args) { // 让context的默认值为window, ...args表示剩余所有参数 args是所有参数的数组 // 函数内部this指向外部调
2021-06-24 15:50:42
117
原创 Tone.js使用心得
项目里面用到了Tone.js来使用播放模块，目前项目快完结了，现在来总结一下tone.js的使用心得主要参考github上的 README 文档 ,还有官方API文档ScriptProcessorNode版本过时首先明确，这是一个调用浏览器播放模块的包，会调用ScriptProcessorNode，但是在目前的Chrome浏览器版本里，会发出警报，ScriptProcessorNode过时了. 改用 AudioWorkletNode[Deprecation] The ScriptProcessorN
2021-06-23 23:14:08
2190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人