- 博客(112)
- 收藏
- 关注
RSS订阅原创 发布-订阅
/*发布订阅模块, 使用立即执行函数是为了让其返回的函数引用的msg容器为私有msg不是列表, 其为一个对象, 对象里面消息名对应的值为列表*/var PubSub = (function () { var msg = {} return { /* 订阅消息, 参数为消息名和回调函数 判断如果消息名存在于msg中并且没有重复的订阅, 就像该消息名的值(列表)中添加该回调函数 */ subscribe: function (type, fn) {
2022-01-22 22:10:34
521
原创 call,apply, bind
apply手写的思路: 在Function上添加方法, 这样所有函数都拥有该方法可直接调用接收需要绑定的对象和函数调用时传入的参数并判断对象是否存在创建一个唯一值, 让对象的唯一值属性=this, 也就是调用该方法的函数执行对象中的唯一值属性, 即使用对象调用函数, 完成了this绑定删除对象的唯一值属性/* apply context: 传入的要绑定this到的对象 args: 原函数执行时传入的参数, 为一个数组*/Function.prototype.myApply =
2022-01-22 22:10:16
429
原创 Promise Api和手写Promise类方法
API类方法Promise.resolve()接收一个参数, 返回一个执行该参数后的promise(promise构造中执行是立即执行的)对于一般数值类参数, 相当于new Promise并且执行了resolve(参数)注意空值的话相当于resolve()如果是一个promise, 则直接返回这个promisePromise.reject()参数只能是被拒绝的原因, 返回一个拒绝的promisePromise.all()接收的参数为多个promise组成的可迭代对象,
2022-01-22 22:09:29
826
1
原创 js的this
thisthis在函数被调用时绑定的, 它指向哪里由函数在哪里调用以及如何被调用决定。默认绑定在不能使用其他绑定规则时执行的规则，一般为函数独立调用默认绑定给全局, 浏览器为window, node为globalvar num = 1function a(){ console.log(this.num)}a() // 1隐式绑定函数调用是在某个对象身上触发的, 即调用位置存在执行上下文, 如obj.fun(), 此时this会绑定给调用者特殊情况:虽然为对象调用, 但是__pro
2022-01-22 22:09:15
728
原创 常见排序算法总结
冒泡排序冒泡排序就是比较不停的比较的过程共两层循环, 外面一层实际上是控制次数的, 每循环一次都会有一个最值被交换到了最尾部那么下次循环的时候就不需要带上了每次里层的循环都会重新从头两两进行比对每次只会对交换过的元素的后一个进行重新与下一个进行比较比如 i与 i+1交换了, 那么下次会比较i+1与i+2, 而i不管换过来的与后续被交换来的大小如何, 都会放在下一轮比较中该轮比较只会确定一个最值并一直向后移动, 不会管除最值之外的顺序, 那些会放在下一次进行比较稳定排序, 若a = b, 原
2022-01-22 22:05:36
495
原创 web安全
xssxss的原理是攻击者向web页面中注入恶意脚本代码，在用户访问页面时恶意代码就会执行，从而窃取用户隐式信息。常见的xss攻击主要有存储型和反射型存储型攻击者通过表单将恶意代码提交给服务端数据库存储，当前端渲染服务端传来的数据时，就包含了该脚本，就会被执行。常见的导致原因：前端未对用户输入内容做转义直接传递给后端后端为转义直接存入数据库后端对数据库中取出的值为进行判断转义直接返回给前端前端未对后端传来的数据进行转义直接执行反射型攻击者将脚本代码拼接到url中作为请求的参数，服务
2022-01-22 22:05:24
3237
原创 js实现多态
js的多态子类对父类方法的重写, 这个会默认执行子类的方法, 即实现多态不同子类执行父类的同名方法会有不同的结果, 即下面这种还有函数参数个数, 参数类型的多态不同子类执行父类的同名方法会有不同的结果实现方式父类中调用未来子类的方法子类的创建的时候, 写自己的方法, 继承父类, 调用父类的同名方法的时候, 父类原型上的this此时指向子类这个时候就会调用不同子类的方法 function Base() { Base.prototype.initfun = funct.
2022-01-22 22:04:41
1344
原创 总结感悟与反思
两周没在博客上发自己的总结了, 基本上这两周在闭门造车。寒假已经开始了， 可惜新生代农民工并么有假期。前序工作完成用react + hooks + ts重构的项目已经完成了，总结了一堆踩坑点，通过这个项目，对react的使用也是熟悉了很多，但是react的源码还没有去解读，这也就是接下下下来的任务吧。复习计划与执行复习计划在开始前已经制定好了，虽然之间也都零零散散的复习过，但是还未系统的过一遍，还没有构建好自己的知识体系，这次准备在年前将知识体系构建完成，现在也在进行了。算法训练与面试题前几天
2022-01-16 14:59:02
334
1
原创 迟了两周的总结
说来也有两周没写博客了。从两周前实习的开始，伴随着期末考试的复习，加上项目还剩一些，再加上软著开始申请整理资料写文档，被迫无奈直接开启多线程。有条不紊虽然事情是挺多的，在我实际去做之前也会抱怨全都赶在一起了这怎么能完成的。在开始着手之后，发现实习的东西确实很多，几乎占据了我一天的所有学习时间，关键老师讲的那些知识在短时间内很难掌握，得大量练习。接着压榨午休时间和晚上回去睡觉的时间，用来整实习。晚饭之后的时间分给项目，这个才是我真正的重点了，一个拿得出手的react+ts+hooks项目。其他剩余时
2022-01-02 10:06:49
151
原创 总结,反思,感悟
一周又很快过去了, 天逐渐凉了起来, 早上起来的时候拿着平板走几分钟手都瑟瑟发抖了，凛冬将至。没有希望还要继续吗？准备六级的时间有点短，满打满算也就上一周开始才每天挤出来一点时间做一点题，这周做的稍微多了一些，但是却没有做的多了就得心应手的感觉。就如标题所说，已经感觉到没有希望了。时间太短了，百度一下十五天如何通过六级，回复一定是做梦。好吧，本身英语基础就很差的我，到这里也算差不多了吧？当然不能，不努力一把怎么知道什么叫绝望，未经历绝望怎能浴火重生！当然要继续，不管过不过至少要对得起自己，自己心里不
2021-12-12 15:29:49
343
1
原创 react关于组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback)
在一个组件中, 其state变化会引起render的重新执行, 函数式组件中, 使用setHook更新state也会引起render的重新执行render执行会带来两个方面的影响当前组件需要重新渲染, 除了那些状态和生命周期初始化被保留的,其余正常的都会重新执行。子组件会重新渲染, 即使其是一个无状态组件针对上述问题, react给出来解决方案:pureComponent, React.memo, useMemo, useCallback下面将具体说明这几个都使用场景和解决的问题：
2021-12-08 10:32:08
3629
1
原创 渡完一小劫
小劫-office考试考试刚刚结束。前言说实话一开始我报这个的目的并不是为了拿这个证书，只是想用这个来逼迫自己学好office，顺便拿个证。事实证明这很合理，经过这段时间的训练，不能说对office了如指掌吧，也能说使用熟练了。从一开始的一道ppt的题做了两三个小时，到现在看到哪一点要求就知道这是什么，怎么做，去哪里找。感觉报这个的目的已经达到了。正文说说考试吧，选择题就随缘了。毕竟就二十分，尽力而为，不是很有把握吧这个。大题就怕抽到一些变态为难人的题，事实证明我运气还不错。但是比较悲哀的是
2021-12-05 11:19:19
234
1
原创 关于useState更新后使用最新值进行操作的解决方案
useState是异步更新，想要在设置后直接获取最新的state是拿不到的例如： 页面更新的时候，更新页码的state，接着重新请求但是重新请求的时候是拿不到最新的页码的解决： // 页码变化时的回调 const pageChange = (page: number, size: number) => { setPages({page, size}) setIsUpdatePages(true) } useEffect(() => { if (!
2021-12-03 17:34:51
3147
原创 沉浸的一周
为什么是沉浸的一周？这篇博客本来昨天该写了，沉浸在某件事中忘记了。逐渐得心应手在经历过一万多报错和电脑死机n次之后，对hooks的应用逐渐顺手。当发现问题，然后一顿输出解决问题，一天真就那么快的没了。哪里来的一万多报错？ 直接上图不写几个死循环真不敢说我用过hook。沉浸式写bug中，这大概是最后一个项目了。还是officeoffice考试下周六就开始了，练到最后逐渐麻木了，昨天去上机考试，选择题基本都还是做过的那些类型，大腿第一个word就遇见了我不想学放弃的邮件，无奈，只好又得学了。可
2021-11-28 10:25:26
160
1
原创 关于useEffect和useCallBack踩坑
副作用的操作可以放在useEffect中执行，并且其每次执行都会清除上一次的副作用，副作用一般都为修改DOM, 生成不确定的值等const Menus = () => { const [selectedKey, changeSelectedKey] = useState(['/admin/index']) const [menu, setMenu] = useState([]) const changeSelected = (value: string[]) => { ch
2021-11-23 11:41:20
1471
原创 总结反思与感悟
算了下时间，还有一个多月这学期就结束了，这时间过的就离谱。反思这周算法没怎么练习了，剑指offer刷的差不多了，任务也算完成了，该多花点时间到下个月就要来的等级考试上面了，说实话，为什么office那么难，为什么excel要那么麻烦啊，一道excl题，一道题， 我写了两个小时，真心崩溃了。word和ppt还好一些，唯独那个excel题，唉，说多了都是泪，晚上还摸黑小心翼翼的敲，因为室友说我的键盘吵，影响他睡觉了。。。。现在react也逐渐使的顺手起来了，可能是因为至今为止写的还都是不难的东西吧，接下来
2021-11-21 09:15:06
237
2
原创 总结感悟与反思
本周主要是按照自己定的计划有条不紊的进行。学习上这周把之前项目的合同已经拟订好了，就把重心更多的放在学习上了。六级计划安排慢慢当当，午休晚饭时间刷六级题。话说六级是真的难啊，那单词不是闹着玩的，于是每天计划拿出一个半小时来背单词，原计划是晚上回去寝室背的，但是office高级也需要利用夜晚练习，好吧，那就只能从白天挤时间了，有划水课就划水课背，没有就从空白时间抽出来时间段背。虽然这两个证书准备时间重叠了，但是我只能去尽力去做，不能保证每个都能OK，我觉得尽力就行。其他正常课余时间沉下心来搞项目，写
2021-11-14 08:16:31
354
原创 动态规划-把数字翻译成字符串
题目：给定一个数字，我们按照如下规则把它翻译为字符串：0 翻译成 “a” ，1 翻译成 “b”，……，11 翻译成 “l”，……，25 翻译成 “z”。一个数字可能有多个翻译。请编程实现一个函数，用来计算一个数字有多少种不同的翻译方法。分析思路：首先注意一点，不是累计计数例如58，5一种，8一种，合起来还是一种 对于8这个数，如果和前面的数组合不能满足翻译（9<x<26），那么对应的是 × 1，即值等于前一个状态的值如果是12，那么1一种
2021-11-12 17:42:39
270
原创 动态规划-股票的最大利润
问：假设把某股票的价格按照时间先后顺序存储在数组中，请问买卖该股票一次可能获得的最大利润是多少？分析：可用动态规划的思路，保存前面的最高利润并与当前进行取舍过程：遍历每天的价格得到price，price有两种可能身份1，最低买入的价格2，最高的销售利润初始化动态开始时的利润为0，最低买入价格为最大数字那么对于每一个price进行决策，如果它的价格比前面的都低，那么就作为最低的历史价格保存如果当前价格 - 历史价格比前面的利润都高，那么作为最高利润保存下来、一直遍历结束，便得到最高的利润mi
2021-11-10 20:22:18
216
原创 位运算-数组中数字出现的次数 III
数组中只有一个数字出现了一次，其余数字都出现了三次，找出这个数像前面两道那样异或肯定是不行了，因为奇数次的数异或不为0那么就沦落到用map计数了吗？ 不可能，绝对不对能，位运算整齐活首先明白一点，数组中的数的按二进制展开，并且按位相加，计算相同位置的数值的sum值例如22个数的第八位都是1，那么该位的值就是22用一个数组保存每位的和，根据题中数的大小可以定位32长度，即32位的数字这个数组用于保存nums数组中相同位置的和接下对该数组的每一位对3取模，出现3次的数，同一位也必定出现3次，那么
2021-11-09 22:20:16
591
原创 位运算-数组中两个出现一次的数字
除了目标数字，其余都出现了两次。对于它的前身，数组中只出现一次的数字，直接异或到底即可。但是出现一次的数字有两个，那么异或到底的那个数字，是该两个数字的异或值，现在要做的就是将这两个异或后的值分离既然这两个数字是不同的，那么异或的结果必然且至少有一位是1，否则权全为0的话那么这两个数字就相同了，因此我们可以根据这个，找到一个只有该位是1其余都是0的数（记为key）对数组再进行异或运算（后面会说）找到key的目的就是在于将异或的两个值分开，因为这两个数在该位上不同，key的该位是1，那么这两个数必然有
2021-11-08 22:41:42
148
原创 一周总结反思与感悟
这周过的算是五味陈杂吧，有喜有悲。不过要传播积极的正能量，报喜不报悲。学习上最让我开心的是我的即时通讯完成了，很nice，结果真的是用精力堆出来的，具体困难的并不是新接触的websocket协议，本身其实并不难理解，难的在于对于数据的清洗和不同模式之间切换的判断以及对应不同的展示。这些逻辑让我深刻意识到了算法的重要性，放一张成品图吧，祝贺完成并流畅运行算法也在继续进行，不过真的越到后面越费劲了，基本上现在的题目都是一些固定类型的题，比如dfs玩二叉树，位运算，动态规划等，不止是做题，更多的还是学
2021-11-06 20:40:41
2934
1
原创 总结，感悟，规划
这周开始喘口气可以全心做自己的事了，发现过的实在太快。学习上剑指offer的题也保持每天一道的速度持续进行，之前把简单题刷完了也总结过，到了中等题后发现根本刷不动了，刚开始很迷茫，一道题看起来好像认识，又没任何思路，或者说，有思路但不完全有。这种似懂非懂的状态困扰我好几个题，换句话说前几个中等题都是靠着题解过的，不过慢慢的好些了，现在对于这些题已经逐渐的有了不错的状态，继续肝！前端上复习了下react的基本，对项目有了初步的规划，准备1号开始写一个完整的react项目。而且之前vue项目遗留的那个
2021-10-30 22:12:13
1279
原创 位运算-快速幂
实现pow(x, n)的功能如果正常做n次乘法，有1000万次就要乘1000万次，这种解法一般不尽人意可以利用位运算的方法来将n的时间复杂度降为logn例如求3的5次方5的二进制表示为101（前面为0部位不考虑）那么从右向左，对应的权重分别为 2^0, 0, 2^2， 及 将3^5分解为 (3^1) * (3^4), 如图：那么对于n来说，将n的二进制位遍历一次，当某一位为1时，就幂上对应的权重即可需要注意的是无论为0还是1，提升该位的权重需要该数不断的×本身例如权重为0时，就是3.
2021-10-28 20:48:28
380
原创 很久没有的总结
很久没有写过总结性博客了，大多数是写的一直备忘的知识总结，总结一下最近自己的状态吧。学习上最近学习一直很没在状态，上上周开始一直在准备缓考的课程，顺带还有招新最后的准备，算法就没怎么练，知识学的也不多，好不容易把缓考过去了，以为自己轻松了，转念一想，迎来了招新的正式开始，各个班级的参观，中间时不时还会发生一些小的变故，怎么解决很多就成了我的事，参观了两三天终于结束了，迈过一座山下一座山就开始了，面试！简历一共交了两百多份，面试的是一个什么样的标准，中间还会有很多情况611临时不能用等等，又是几天过去。
2021-10-25 08:18:55
69
原创 二叉树的最近公共祖先
不同于二叉搜索树, 可以根据节点值的大小来判断要找到目标在哪个位置, 需要对每个节点进行左右子树的递归, 具体分析如下在当前节点的左右两个子树上找到了p,q, 那么就说明该节点就是两节点的最近交叉处, 先画简单点就是这样:一侧子树返回空, 另一侧子树返回了节点, 那么有以下情况返回的是满足p, q均在某一个节点两侧的节点:比如找6, 2两个节点, 以3为根节点向左递归找5, 5的左右不为空, 说明5满足, 那么5向上返回, 该返回值作为3单层次的left而右子树没有找到q,p, 返.
2021-10-05 22:14:56
85
原创 约瑟夫环问题
一个0, n-1的队列, 循环轮流报数, 报到m的退出, 再接着从0开始报数普通的方式就是一直遍历, 索引到头了就还从0开始, 一直循环n * m次, 但是这种方式会超时那么可以这样看, 每次到m的时候, 下一轮重新开始, 也就是一个新的数组, 从被删除的索引下一个开始为索引0依次向后, 并且当做一个环, 前面的会向后接上当出列到最后一个人的时候, 他的索引一定是0那么可以向上推到在还有两个人的时候, 它的索引是多少, 有两个人的推出来了, 向上再推三个人的时候索引是多少, 一直推到当有n个人
2021-10-02 22:19:43
123
原创 二叉树深度及判断平衡二叉树
二叉树深度可以使用BFS迭代的方式按层次得到， 下面说的是递归的方式获取// 定义一个函数, 用于获取二叉树深度let deep = (root) => { // 一直递归到空节点, 算该条路结束 // 如果该节点为null, 说明本身的深度是0, 也是递归出口 if (!root) return 0 // 如果该节点不为null, 说明还要左节点, 右节点继续向下搜索 // 由左节点得到的左子树深度和右节点得到的右子树深度取最大值即子树的深度 // 再加上1表
2021-10-02 10:13:05
312
原创 vue3_setup
参数setup两个参数, 第一个参数是上面经过props声明过后的父组件传递过来的数据(需要经过props声明)第二个参数context包含三个常用的属性1. attr, 该属性里保存的是父组件传递过来但props中未声明的数据2. emit, 即this.$emit, 可以触发父组件传递的函数3. solt, 和插槽有关的, 后续再议其实对于第二个参数, 更多的时候直接解构赋值, 直接就{attr, emit, …}import { defineComponent } from 'vue'
2021-09-26 20:01:25
397
原创 vue3和2响应式对比
vue2中, 数据响应式通过getter和setter来对对象的读取和写入劫持并且对于对象是递归进行绑定的, 因此可以进行深层次的绑定但是对于数组, 是通过重写数组方法对数组内数据劫持Object.defineProperty(obj, count, { get(){}, set () {} })console.log(obj.count)vue3中, 数据响应不再是通过getter和setter劫持的, 而是通过h5的proxy数据代理对象和数组都是如此, 数据不用
2021-09-26 19:59:14
56
原创 vue3_ref和reactive
vue3组件中可以没有根标签<template> <h2>{{ test }}</h2> <button @click="testfun">点击更改</button> <h2>{{ count }}</h2> <hr /> <h2>age: {{ obj.age }}</h2> <h2>other: {{ obj.other.age }}</h2
2021-09-26 19:57:25
106
原创 sort的参数
Array的sort方法默认是将调用该方法的数组里面元素全都转换为字符串, 然后比较每一项对应utf-16对应的单元值大小排序的, 比如9会排在89前面如果想要利用该方法将一个无序integer数组排序的话, 需要给它的参数中传一个回调函数, 该回调函数作为排序的依据如果都是integer类型的话, 简洁写法// 升序arr.sort((a, b) => a - b)// 降序arr.sort((a, b) => b - a)说明:如果 compareFunction(a,
2021-09-19 22:46:47
769
原创 webpack4对比webpack5
此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.下载npm i webpack@5 webpack-cli -D自动删除 Node.js Polyfills早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack
2021-09-19 12:12:07
1372
原创 webapck4配置详解
entrystring --> ‘./src/index.js’单入口打包形成一个chunk。 输出一个bundle文件。此时chunk的名称默认是 mainarray --> [’./src/index.js’, ‘./src/add.js’]多入口所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。–>在HMR功能中让html热更新生效~object多入口有几个入口文件就形成几个chunk，输出几个bundle文件此时chu
2021-09-13 11:03:28
366
原创 thread-loader多进程打包+enternals忽略打包+dll动态链接
当js代码用babel处理兼容性且本身代码就比较多的情况下可以使用thread-loader开启多线程打包thread-loader本身启动进程就需要耗费时间, 所以当js代码不多时就不要开启, 否则还可能会延长打包时间{ // 当js代码用babel处理兼容性且本身代码就比较多的情况下可以使用thread-loader开启多线程打包 // thread-loader本身启动进程就需要耗费时间, 所以当js代码不多时就不要开启, 否则还可能会延长打包时间 test: '/\.js$/',
2021-09-12 00:18:27
1937
原创 PWA渐进式web程序
npm install workbox-webpack-plugin使用pwa技术, 在有网络时缓存web程序, 当离线时也能访问缓存的内容引入workbox-webpack-plugin(在插件中使用), 该插件生成一个servicework配置文件再通过入口文件对配置文件的读取设置, 就可以达到离线访问了具体方法如下:const { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extra
2021-09-12 00:17:47
93
原创 tree shaking+code split代码分割+懒加载/预加载
树摇在production下自动生效, 会根据代码有没有使用等情况进行取舍主要需要在package.json中设置有副作用的列表, 文件引入了没使用被舍去但没用影响属于没有副作用, 但是index.js中引入了css或者其他文件, 不会在js中直接使用, 但是舍去是有副作用的, 因此需要设置有副作用的列表"sideEffects": [ "*.css", "*.less" ]通过入口文件开始打包, 全部都在一个chunk内, 使得js代码体积太过庞大, 会对加载造成影响, 合适的
2021-09-12 00:17:09
138
原创 webpack与强缓存
当服务端开始强缓存的时候, 只要文件名字不变化, 那么就不会对比文件内容, 会直接走缓存但是这种情况下, 文件内容发生变化的时候, 不能进行及时更新此时可以利用hash值让每次更改后的文件名根据hash变化来达到不走缓存的效果hash: webpack每次打包都会生成一个唯一的hash值, css, js, 图片等文件可以使用该值作为名称达到每次webpack打包后都更新为新的资源。但是缺点就是其他没有更新的资源也会被重新命名重新加载, 造成不必要的资源浪费, 不可取chunkhash: 从
2021-09-12 00:15:57
187
原创 HMR_souce-map_oneof_babel缓存优化
HMR: css的style-loader自己实现了, 只需要devServe中hot: true即可, html不需要, 因为只有一个文件, 不要热模块替换, 改了就是改了, 不牵连其他, js中需要配置:// 通过module.hot判断是否开启了HMRif (module.hot) { // 如果开启了就去检测某个引入的文件是否变化, 如果变化了就单独重新执行该模块里引入的方法或对象 module.hot.accept('./print', () => { print()
2021-09-12 00:15:12
87
原创 生产环境优化前配置
完整配置webpack.config.jsconst { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')// 该插件的作用是将打包好的css样式从js中提取出来作为一个单独的样式表const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 兼容性处理基本写法也是固定的, 生产环境和开发环境的不同配置的兼容性
2021-09-12 00:12:37
82
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人