总结帖
关注
分享
扫一扫
文章平均质量分 69
学习过程中的一些总结
VoiceU
这个作者很懒，什么都没留下…
展开
-
【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 · 493 阅读 · 0 评论 -
局部安装~
在文件夹里，用npm init生成package.json后，有package.json的时候就可以进行局部安装了，比如webpack，这个时候要区分是生产环境还是开发环境原创 2022-04-09 13:36:57 · 1001 阅读 · 0 评论 -
【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 · 394 阅读 · 2 评论 -
【ES6】箭头函数
箭头函数不能作为构造函数MDN文档箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。参考：链接没有单独的this，要向外找，参考1，参考2不绑定arguments箭头函数不能用作构造器，和 new一起用会抛出错误箭头函数没有prototype属性不会被call、bind、apply改变this指向，不受影响...原创 2021-07-22 10:13:06 · 162 阅读 · 0 评论 -
【JS】类型转换
对于经常见到的面试题来说，两个数或者对象啥的相加，判断其结果比如1 + 11 + false1 + {}[] + {}{} + []总结其规律，参考当 两个操作数都是数值 时，执行常规的数值加法计算。但有几个值的考虑如果有一个操作数是NaN, 则结果是NaN；Infinity 加 Infinity 结果是 Infinity；-Infinity 加 -Infinity 结果是 -Infinity；Infinity 加 -Infinity 结果是NaN；+0 加 +0 结果是+原创 2021-07-20 14:48:06 · 160 阅读 · 0 评论 -
【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 · 1514 阅读 · 1 评论 -
【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 · 240 阅读 · 1 评论 -
【多项目整合上线】遇到的部署问题2，首页启动慢
致命的问题，响应速度慢这打开也太慢了，六七秒才下完资源，要是面试官没耐心打开，我唯一的优势就凉了，所以要解决这个问题，因为这个就一个单页面应用，而且页面也不大，用不到什么懒加载这种（主要是太菜了，不太会，只能选自己目前能解决的方法来解决），我看这个js这么大，所以觉得可以用二级子域名，来分割各个项目，哎结果还是分割了，有点违背我想整合成单页面应用的初衷。试验了一下，分割了后台管理的另外两个项目，暂时用一个mixer的域名，可以发现响应速度明显变快7s变到了2s，所以把几个项目全部分离，就可以光速原创 2021-07-13 15:26:47 · 192 阅读 · 0 评论 -
【多项目整合上线】遇到的部署问题
我的思路是把多个项目，统一写到一个项目里面，用路由进行链接跳转，项目主体为一个静态页面项目，作为网站入口，页面内布置两个链接，跳向另外两个静态页面，还有一个链接，跳向一个有后端的电商后台管理系统项目，虽然有多个页面要展示，但是实际上是打算用router来做成SPA，所以我把前端代码放到后端代码的public文件夹下，后端用express框架的中间件，可以让其运行，然后使用pm2工具，保持该主体项目的持续运行，理论上是没问题的，但是过程遇到了蛮多问题的，比如，静态网页进去后，一刷新就找不到页面另原创 2021-07-11 13:19:36 · 322 阅读 · 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 · 257 阅读 · 0 评论 -
【voice-ui】代码用例展示并改主题配色，添加一键复制功能
用raw-loader可以让代码显示到页面上，这样就可以达到展示如何使用ui组件的效果，比如naive ui首先安装依赖，再写如下代码，可以将指定文件转过来，所以要单独将展示的代码搬到另一个文件里否则，会把其他多余代码也写到里面，而我们只展示使用相关的代码const code = require('!!raw-loader!./icon.example.tsx')然后将code作为props传入一个封装好的，专门用来展示的组件里，就可以渲染了，但是网上都没有怎么改样式，因为初始的样式实在是难原创 2021-07-07 12:21:02 · 481 阅读 · 1 评论 -
【react】脚手架build后，静态页面空白
有两个原因：一是打包后的引用路径，是相对路径，在有服务器的情况下，是没有问题的，但是静态网页直接打开就会找不到资源二是可能使用了BrowserRouter,要改为HashRouter本人的两个问题都出现了首先在package.json里面添加 “homepage” ： " . "其次就是修改Router了然后再build就行了...原创 2021-07-05 17:27:08 · 1127 阅读 · 0 评论 -
【算法】排序算法学习记录
前言按照重点掌握程度列个表，其他的算法就先不用管了算法程度要求时间复杂度空间复杂度快速排序重点掌握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 · 142 阅读 · 0 评论 -
【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 · 885 阅读 · 0 评论 -
【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 · 223 阅读 · 0 评论 -
【voice-ui】从零开始搭建，配置webpack
临近校招，因无实习，还非科班，想给简历加分，故只能自己做项目，但类似后台管理系统、购物商城的都已经烂大街了，所以尝试一下能不能做点难度稍微高一点的ui组件库环境配置建立仓库在github上建立fun ui仓库，注意现在github上默认的分支不是master了，我克隆到本地的后，练习上传到另一个地址时，发现不用master了，是main分支在建立的时候勾选了，为仓库创建README文件和 .gitignore文件，.gitignore文件，在里面写了的文件，不会被git工具进行更新，比如后续会原创 2021-06-30 23:38:27 · 777 阅读 · 3 评论 -
【算法】回溯算法学习记录
回溯算法实际上就是一种暴力求解为什么暴力解不用for循环而要用回溯一个极端例子，要求解length为50的数组 的所有子集，for就需要嵌套“无数层”，但是如果用回溯的话，相对于是递归自己在内部调用for循环，说实话给我的感觉有点像，传统的异步函数，因为回调地狱的情况被Promise替换掉，模板回溯法可以有模板，如下在外部先声明变量let res = []let path = []递归函数的参数不一定是这几个，具体问题具体分析const backtracking = (n , k ,原创 2021-06-28 22:15:33 · 200 阅读 · 0 评论 -
【手写】new
首先一般写构造函数的时候，里面没有用到return，但是也可以有return因为构造函数也是一个函数, 自然也可以有return语句, 不过和一般函数不太一样的是, 在构造函数中如果return的是一个对象, 则会直接返回这个对象, 如果return 的不是一个对象, 那在new时会忽略这个retrun, 转而返回this对象.比如下列代码： function person (name){ let a = 1 let obj = {}原创 2021-06-23 14:15:36 · 100 阅读 · 0 评论 -
【手写】Promise
根据尚硅谷promise讲解视频写的 链接es5 function构造函数版，使用setTimeout模拟异步，但实际上promise应该是微任务/* 疑难点 1.为什么要进行保存this 首先理清整个运行的逻辑，首先let p = new Promise(excutor)这个时候， 会自动执行Promise函数里面的内容，当走到this.PromiseState = 'pending'，没有问题，this是实例对象p 但是当走到excutor(原创 2021-06-21 10:45:58 · 176 阅读 · 0 评论 -
let的变量提升
let 会进行变量提升吗？参考1 参考2 参考3看了这些技术文章后，个人总结来说，大体上可以认为let没有进行变量提升，因为在效果上可以看出，let确实没有像var一样进行变量提升，如果在let声明变量之前就使用变量的话会报错，但是有例子代码可以证明，let是进行了变量提升的，但是由于暂时性死区（ temporal dead zone，简称TDZ ）的存在，无法在TDZ中对变量进行访问操作，所以会报错，下面对let操作进行分解以下分解过程参考文章 https://www.jianshu.com原创 2021-06-19 13:44:09 · 2084 阅读 · 0 评论 -
前端面试中的代码输出题整理
复习的时候经过整理，发现这些题大致分为如下几类种（持续更新）判断this指向异步，宏任务微任务的顺序闭包原型链因此分类别整理如下异步，判断顺序最简单的一种 setTimeout(function () { console.log(1) }, 0) new Promise(function (resolve) { console.log(2) for (var i =原创 2021-06-18 09:54:33 · 716 阅读 · 1 评论 -
this指向的又一点坑
function person(name){ // this.name = name let obj = {} obj.name = name obj.getname = ()=>{ console.log(this); } // 有return的时候就不能算是一个构造函数，虽然后面是new，但是只是执行一遍pe...原创 2021-06-17 11:20:19 · 148 阅读 · 1 评论 -
事件触发机制
DOM 事件HTML DOM 会对JavaScript 做出响应。(点击 ，键盘被按，输入框输入内容以及页面加载完毕等)事件流一个 DOM 事件可以分为捕获过程、触发过程、冒泡过程如图当目标为红框a标签时，通过给a绑定事件监听，可以得到相应的响应（触发过程），但如果同时给红绿虚线中的其他标签绑定监听，也会在捕获过程以及冒泡过程触发该标签的监听响应，比如 <table id="tableNode"> tableNode <tr id="td原创 2021-06-14 10:52:55 · 2828 阅读 · 3 评论 -
HTTP状态码
HTTP状态码大全如下：“100” : Continue“101” : witching Protocols“200” : OK“201” : Created“202” : Accepted“203” : Non-Authoritative Information“204” : No Content“205” : Reset Content“206” : Partial Content“300” : Multiple Choices“301” : Moved Permanently“原创 2021-06-14 08:52:03 · 103 阅读 · 0 评论 -
webpack模块化
模块化webpackwebpack的loader和plugin模块化参考链接webpack模块化原创 2021-06-13 16:43:32 · 686 阅读 · 0 评论 -
git提交出现OpenSSL SSL_connect: Connection was aborted in connection to github.com:443
出现该错误，查了半天没解决办法，改变思路，看提示应该是链接上的问题，所以我记得我是用http的链接推送项目的，打开.git文件夹下的config文件，发现果然是，所以打算改为ssh登录首先要生成一个ssh的key参考1 参考2ssh-keygen -t rsa -C "xxx.com"然后连按三个空格，不输密码再输入cat id_rsa.pub复制刚生成的key去github上新建一个ssh，用刚复制的，名字随便取一个，就行了完事后去config文件里把http方式改成ssh，先去gi原创 2021-06-13 13:16:10 · 3085 阅读 · 0 评论 -
CSS中适配移动端完美视口像素记录
拿iPhone6为例，ip6的物理像素是750px（均指宽度），查询得知完美适口的比例为2，即750px（物理像素）：375px（CSS像素） = 2：1那么在电脑端制作一张宽为375px（CSS像素）的图片，加载到移动端，就可以充满屏幕，前提是meta设置为 meta name=“viewport” content="width=device-width<meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-11-24 20:50:29 · 457 阅读 · 1 评论 -
【网络】Cookie、Session与Token、JWT及CSRF攻击
由于HTTP是一种无状态的协议，所以当我打开淘宝，登录后，点击跳转结账（另一个页面），服务器端就不知道现在发请求的是不是我了，就得让我再次登录来确认身份。所以每一次请求的发生都是全新的，那么就需要一个来记录身份并且验证的东西，相对于通行证一样。这就是Cookie和Session的作用，流程客户端首次发出请求，服务器端收到后开辟一块 Session 空间（创建了Session对象），同时生成一个 sessionId ，并通过响应头的 **Set-Cookie：JSESSIONID=XXXXXXX **命原创 2021-06-10 13:53:53 · 759 阅读 · 0 评论 -
总结html中href、src的区别以及url
在前端html中经常可以看见如下几种标签一种用到href，一种用到src两种方式中，写的地址都算是url地址，但是两种方式的作用不一样 <!-- href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。 --> <!-- 链接，指向 --> <a href="">??</a> <!-- 链接，当前文档与引用资源之间确定关系，会并行下载CSS资源 --> <link rel原创 2021-06-10 13:19:59 · 3027 阅读 · 0 评论 -
【网络】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 · 572 阅读 · 2 评论 -
阿里云服务器搭建个人网站
截至2021.6.6前两天搭了个个人网站，但是没有后端，只做了react框架的前端部分，之前不懂这些如何搭建，找了各种资料，现在搭建成功了，作此记录网址链接步骤：服务器–>域名–>配置服务器–>上传项目–>成功运行在自己做项目的时候，就可以在本地把项目跑起来，用的是localhost：xxxx的端口，那么服务器同理，就是一台专门用来跑项目的电脑，为什么不拿自己电脑来做服务器呢？因为1、电脑配置不够，网站可能会有很多人同时访问的情况，自己的PC这样就卡死了；2、云服务器可以24原创 2021-06-06 09:31:12 · 436 阅读 · 2 评论 -
防抖节流与闭包
防抖考虑一个场景，有一个按钮点击会触发网络请求，但是我们并不希望每次点击都发起网络请求，而是当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。// func是用户传入需要防抖的函数// wait是等待时间const debounce = (func, wait = 50) => { // 缓存一个定时器id let timer = 0 // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器原创 2021-06-05 15:47:10 · 1768 阅读 · 1 评论 -
跨域及其解决方法
跨域：因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。明确几个点：浏览器才会有跨域的限制，服务器之间跨域不会限制不同协议会跨域，不同域名互相请求会跨域，同域名下不同端口会跨域解决办法JSONPJSONP 的原理很简单，就是利用 < script > 标签没有跨域限制的漏洞。通过 < script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时 ，注意：这里必须使用scipt标签，否原创 2021-06-05 10:57:23 · 322 阅读 · 0 评论 -
【JS】原型链、es5继承和es6继承
原型链及es5继承可参考链接原创 2021-06-02 13:32:25 · 413 阅读 · 0 评论 -
Object.prototype.toString.call(xx)可以得到目标对象xx的类型
复习的时候看到了Object.prototype.toString.call(xx)可以得到目标对象xx的类型，输出[object type]的形式但是印象中toString不是输出字符串吗，所以去查证了一番知乎上的文章如下好像是一般咱们弄出来的对象都是系统默认重写过tostring了，如果想得到type这种形式，就要用原型链最上面那个没有重写过的tostring所以先Object.prototype.toString得到这个未重写的函数，再让目标对象来调用这个函数,所以用到call就能得到目原创 2021-06-01 16:22:12 · 202 阅读 · 0 评论 -
【JS】ES6类Class复习笔记以及与ES5类构造函数的对比
es6中class会自动开启严格模式，所以没有指定this的时候，this会是undefined到目前为止，本人遇到过的，在class内部的属性有四种写法，以下展示： class Fun { constructor() { //构造器中的this固定是类的实例对象，所以以下写法会给实例对象上添加属性 this.d = d this.e = () => {原创 2021-05-31 10:30:39 · 411 阅读 · 0 评论 -
【JS】Event loop、宏队列与微队列
JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。参考所以需要对异步代码进行特殊的处理才行macrotask（宏任务）在浏览器端，其可以理解为该任务执行完后，在下一个macrotask执行开始前，浏览器可以进行页面渲染。（对应了上一篇文章讲的script代码执行完成后，在执行下一段script代码前，页面渲染了之前的dom原创 2021-05-29 15:51:04 · 421 阅读 · 0 评论 -
【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 · 1249 阅读 · 0 评论 -
React-dnd模块中getDropResult（）无法得到目标值
在用React-dnd模块做项目的时候，在endDrop（）函数里面用getDropResult（）无法得到想要的目标值，看了官方文档，以及示例代码，均是无法找到问题所在，跟示例的思路及写法几乎一样，根据相关文档，如下具体情景如下：我有三个组件ABC, A是B的父组件，C与AB独立，C作为被拖动组件，AB作为接受的组件，在C的drag的spec配置中的endDrag()里面写到，console.log(‘getDropResult’, monitor.getDropResult());在原创 2021-05-28 15:40:17 · 822 阅读 · 0 评论 -
为什么{ } + [ ] = 0
{ } + [ ] = 0，打开浏览器控制台，直接输入{ } + [ ]，会显示0，如下因为➕号从右解析到左解析，［］.valueOf().toString()=‘‘ ’’=false=0，而｛｝会被视为空的代码块，不执行，所以结果为0，如果是 [ ] + { } 则会是"[object Object]"但是在vscode里输入console.log( { } + [ ] )就不是0，因为{ }这里没有当成空代码块四则运算符：当只有加法运算的时候，其中一方是字符串类型，就会把另一个也转为字符原创 2021-05-28 13:02:23 · 930 阅读 · 0 评论