- 博客(43)
- 收藏
- 关注
RSS订阅
原创 2020前端阅读书籍、读书笔记汇总～
2020年接触前端以来，踩过大大小小不同的坑，每次填坑都是从网上找博客、知乎看解答、有时候也会去github逛一逛。可能当下把坑填了，下次又遇到同样的问题又不知道怎么解决了，又或者填了一个坑的同时又埋下了新的坑，日常工作也成了填坑埋坑，不断往复。学到的前端知识也是零碎和没有体系的，无法串联成有用的知识结构有一次关于ECMAScript中所有函数的参数都是按值传递的这句话的理解，查阅了几篇博客，洋洋洒洒几千字讲下来看得我云里雾里，后来发现这句话就是红宝书P70的原话，看了书上的解释和例子之后豁然开朗，几个比
2020-12-09 14:49:38
1521
1
原创 《图解HTTP》读书笔记----HTTP协议
最近看了《图解HTTP》这本书，结合之前上课学的计算机网络来看，对HTTP协议有了更深的理解，但是《图解HTTP》这本书是2014年出的，当时的HTTP2.0还没成熟，只处于理论阶段，书中涉及的也不多。而现在HTTP3.0都相当成熟，显然书中的一些概念是落后的。等有时候，做一个批注和比较，这样能够更好的理解HTTP协议。这本书涉及的不多，基本上都是点到为止，但对于入门和了解足够了，以下是HTTP协议的思维导图，让我们对这个协议有一个大体的框架。详细笔记在github《图解HTTP》读书笔记可以下载。
2020-09-07 12:39:36
1198
原创 mac中Typora+PicGo图床+gitee 保姆级教程
由于之前错误在桌面执行了git clean导致桌面里的笔记全没了之后，深刻意识到备份的重要性。但是实时备份有时候会忘记，不如每次写完上传云端一劳永逸，还能做一个分享～记笔记时使用的是Typora，界面清爽，快捷键友好，但是最大的问题是图片的路径问题。在本地使用的时候，所有的图片要不就是复制的，它会自动加到typora下的文件夹，然后Typora引用该地址，或者就是我们特定插入某张图片，引用的也是这张图片本身的地址。但这有个最大的问题，就是当你不小心移动了图片或者删除了图片，在Typora中就无法正常显
2020-09-07 10:24:01
4370
7
原创 Nginx使用心得和一些整理
最近做的项目需要用到nginx，之前只是简单了解了反向代理的原理，借这个机会也好好整理一下nginx的相关细节。Nginx能做什么反向代理负载均衡动静分离反向代理正向代理：在客户端(浏览器)配置代理服务器，通过代理服务器进行互联网访问反向代理：我们需要将请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据后,在返回给客户端，此时反向代理服务器和目标服务器对外就是一个服务器，暴露的是代理服务器地址，隐藏了真实服务器IP地址。总结：正向代理隐藏客
2021-05-07 00:22:32
237
原创 垂直居中的几种方法总结
在CSS中最常用的就是居中对齐的样式，flex布局方法使得垂直水平居中变得非常容易，但是flex具有浏览器兼容问题，掌握其他CSS居中对齐的方法也是重要的。其中，水平居中较为简单，通过判断元素是行内元素还是块级元素就能轻松区分：行内或类行内元素：text-align: center;块级元素：margin: 0 auto;而垂直居中具有一定的难度，也有很多种方法；只要学好了垂直居中的几种方法，与水平居中轻松组合就能得出垂直水平居中的方案。line-height 行高适用于单行文本，不能应用于
2021-03-07 15:01:50
1244
原创 关于BFC的定义及应用总结
BFC的定义BFC（Block formatting context）块级格式化上下文，BFC里面的元素与外面元素隔离，使得里外元素的定位不会相互影响。不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），有Block formatting context（BFC）和Inline formatting context（IFC）等。BFC内部布局规则BFC作为一种 Formatting Context，是脱离文档流的，其内部具有特殊的布局规则，掌握其内
2021-03-07 14:42:30
630
原创 Javascript系列(九)：类数组和数组
在JavaScript中，类数组和数组是两个不同的概念，同时也是需要区分清楚的。数组我们都了解，是JavaScript中的一个引用类型，那类数组是什么呢？类数组和数组之间的区别类数组拥有length属性和索引，是object；类数组不具有数组所具有的方法；例如内置对象arguments、DOM方法返回的结果都是类数组；类数组和数组相互转换数组转换为类数组数组转换成类数组，即将数组类型转换成Object类型，调用数组的原生push方法，同时通过apply改变this的执行，将this改为o
2021-03-07 14:24:55
953
原创 Javascript系列(八)：关于let和const是否会变量提升？
网上很多博客和资料都写let和const不存在变量提升，只有var会产生变量提升，之前我一直对此深信不疑，直到看到大佬的文章开始对此产生了一点怀疑。在理解这个问题之前，首先看看var let const的定义和区别。var在ES5前声明变量只能用var，且只存在函数作用域:var message = "hi";message = 100; //可以改变变量类型，合法但不推荐age = 18; //不用var声明，代表全局变量var存在变量提升：//变量age自动提升到函数作用域
2021-03-07 14:07:53
3762
原创 Javascript系列(六)：手写call/apply/bind函数
简单介绍共同点：call apply bind 三个函数是Function对象中自带的方法，都是用来改变函数的this对象指向。不同点：第一个参数都是this要指向的对象，也就是想指定的上下文；call的第二个参数以逗号隔开，apply传入的是数组，bind第二个参数以逗号隔开；bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用；手写call函数Function.prototype.myCall = function(thisArg, ...args) {
2021-03-07 10:35:56
509
原创 Javascript系列(七)：new的原理及手写
new的流程：创建一个新对象将原函数的this指向这个新对象将创建新对象中的__proto__（隐式原型）指向原函数中的prototype（显示原型）判断原函数是否主动返回对象或者function，如果没有则隐式返回this所指向的对象function new(){ //定义空对象 let obj = {}; //取出参数列表的第一个参数（构造函数） let Con = [].shift.call(arguments); //手动指正o
2021-03-07 10:30:13
477
原创 Javascript系列(五)：关于this指向的总结
在javascript中有关于this的指向判断有时候真的让人头晕，而且很多时候稍微不小心就会看错，我整理了关于this的指向相关问题，做一个总结。全局作用域内全局作用域的this都指向window在函数中箭头函数由于箭头函数本身不绑定this，会捕获其所在上下文的 this 值，所以箭头函数中的this指向包裹箭头函数的第一个普通函数。普通函数f()直接调用f()：this指向window通过对象调用：this指向objnew：this指向new出来的实例call/ap
2021-03-06 23:11:32
437
原创 关于 flex:1 实际代表产生的思考
相信大家用过flex布局都会用到flex:1这样的语句来平分空间，但是关于flex：1实际等于什么却没有细细探索过。首先flex这个属性是一个缩写，实际上代表的是：flex:flex-grow || flex-shrink || flex-basisflex:1实际上是以上三种属性的缩写形式。flex-grow//定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大flex-shrink //定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小flex-basis//定义了在
2021-03-06 22:56:30
637
原创 React-router 全面总结和整理
一、SPA的理解单页Web应用（Single page web application，SPA）；整个应用只有一个完整的页面；点击页面中的链接（React路由技术）不会刷新页面，只会做页面的多局部更新；数据都需要通过ajax请求获取，并在前端异步展现；总结：单页面多组件；二、路由基本概念什么是路由？一个路由就是一个映射关系(key:value)key为路径，value可能是function或者component路由分类后端路由：value是function，用来处理客
2021-01-15 09:20:11
843
原创 React 消息订阅与发布机制
在React中，父子组件可以通过props和回调函数进行通信；但是，兄弟组件之间通信并没有提供现成的方法，如果要实现兄弟组件之间的通信，就需要在多层组件之间一层一层传递，将信息传给共同的父组件，然后父组件传递给子组件的方式；这样非常繁琐和不利于维护；引入第三方库PubSubJS，就能直接在触发事件的组件中发布消息，监听组件中订阅消息来实现兄弟组件的通信：使用方法如下：工具库: PubSubJSGitHub下载: npm install pubsub-js --save使用方法:impo
2021-01-15 09:20:01
3244
3
原创 React 生命周期总结（新旧对比）
一、生命周期（旧）//案例：点击按钮加1class Count extends React.Component{ //1.构造器 constructor(props){ super(props) //初始化状态 state = {count:0} } //2.componentWillMount //组件将要挂载 componentWillMount(){} //3.render //渲染组件 render(){ return(
2021-01-15 09:19:53
973
原创 React 组件三大属性总结
用function定义的组件没有实例，不存在this，所以除了props无法使用另外两个属性（通过hooks可以改变）；状态 state案例一：通过点击文字切换天气状态class Weather extends React.Component{ constructor(props){ super(props); //初始化状态 this.state = {isHot:true,wind:'微风'}; //解决changeWeather中this的指向问题 t
2021-01-15 09:19:46
961
1
原创 实现图片始终在浏览器窗口中央
有时候当浏览器屏幕变小的时，希望一张长图的中间始终在屏幕中间，这个时候可以使用相对定位进行图片的动态移动：移动距离=图片长度 * 0.5—div长度 * 0.5/*向左移动img的一半*/img{ position：relative; left:-960px; transform:translate(-50%);/*不写死，相对于自己图片的百分之50*/ /*向右移动父元素（div）的一半*/ margin-left:50%; }...
2021-01-15 09:19:34
762
原创 CSS margin出现传递和合并的问题
margin在使用过程中往往会出现难以预料的问题，比如在垂直方向会出现兄弟元素合并问题、父子元素传递问题。上下margin传递（左右不会传递）：margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素；margin-bottom传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素；解决办法：触发BFC，设置overflow为auto/hidden
2021-01-15 09:19:15
801
原创 Javascript实现几种排序算法
大O表示法：在算法描述中，用来粗略的度量算法的效率常见的大O表示形式 排序算法封装列表 方便测试冒泡排序：效率较低，但思路简单效率：比较次数O(N2)，交换次数O(N2)选择排序：改进了冒泡排序选定第一个索引位置和后面的元素依次比较，找到除第一个元素意外以外的剩下元素最小的那个与第一个交换，然后用同样的方法逐个比较剩下的元素（每次选择最小或最大的元素）效率：比较次数O(N2)，交换次数O(N)插入排序：插入排序是高级排序（希尔排序/快速排序）的..
2021-01-15 09:18:56
642
原创 JS实现数据结构（八）：图
图论是一个非常大的话题图论是数学的一个分支，研究事物之间的关系，顶点表示事物，边表示两个食物的关系图有一组顶点和一组边，可以是有向的，也可以是无向的图的术语顶点：图中的一个节点边：顶点和顶点的连线相邻节点：由一条边连接的节点度：是一个顶点的相邻节点的数量简单路径：要求不包含重复的顶点回路：第一个顶点和最后一个顶点相同的路径称为回路无向图：边是有方向的有向图：边是无方向的无权图：边没有携带权重带权图：边有一定的权重图的表示法：邻接矩阵：二维数组邻..
2021-01-15 09:18:36
688
原创 JS实现数据结构（七）：树
一、树结构是一种非线性结构，可以表示一对多的关系树结构的术语空树：n=0非空树：n>0树中有一个根节点（Root），用r表示其余节点可以分为m个互不相交的有限集T1……Tm，每个集合本身又是一棵树，称为原来树的子树二、二叉树树中每个节点最多只有两个子节点二叉树的5种形态二叉树的特性完美二叉树（满二叉树）除了最下一层的叶节点外，每层节点都有2个子节点完全二叉树除了最下一层的叶节点外，其他层节点数达到了最大个数，且从左往右叶节点连续
2021-01-14 16:15:48
796
原创 JS实现数据结构（六）：哈希表
一、哈希表基于数组实现提供快速的插入-删除-查找操作插入和删除的时间接近O(1)的时间级哈希表的速度比树还要快，基本可以瞬间找到想要的元素哈希表相对于树来说编码要容易二、 哈希表相对于数组的一些不足哈希表中的数据是无序的，所以不能以某种方式来遍历的元素哈希表中key是不允许重复的三、哈希表的一些概念哈希化：将大数字转化成数组范围内下标的过程哈希函数：通常我们会将单词转成大数字，大数字在进行哈希化的代码实现放在一个函数里哈希表：最终将数据插入到的这个数组，对整个结构的
2021-01-14 16:03:18
768
原创 JS实现数据结构（五）：集合
集合常见的实现方式是哈希表集合通常是一组无序的，不能重复的元素集合的特殊之处在于里面的元素没有顺序，不能重复；即不能通过下标值来访问，相同的对象在集合中只会存在一份ES6已经有Set类集合类的方法add（value）：向集合添加一个新的项remove（value）：从集合移除一个值has（value）：如果值在集合中，返回true，否则返回falseclear（）：移除集合中的所有项size（）：返回集合所包含元素的数量，与数组的length属性类似values (..
2021-01-14 15:51:59
1647
3
原创 JS实现数据结构（四）：双向链表
单向链表只能从从遍历到尾，缺点是可以轻松到达下一个节点，但是很难回到上一个节点双向链表可以从头遍历到尾，也可以从尾遍历到头，一个节点既有向前的引用，也有向后的引用双向链表结构- 双向链表方法append（element）：向列表尾部添加一个新的项insert（position，element）：向列表的特定位置插入一个新的项。get（position）：获取对应位置的元素indexOf（element）：返回元素在列表中的索引。如果列表中没有该元素则返回-1。update（position.
2021-01-14 15:48:23
2003
3
原创 JS实现数据结构（三）：链表
链表也是一种常见的存储数据的线性结构数组的缺点：数组的创建需要申请一段连续的内存空间，大小是固定的，当容量需求不满足时需要扩容在数组开头或中间位置插入数据的成本很高，需要大量元素的位移链表的优势：链表的元素在内存中不必是连续的空间，实现灵活的内存动态管理链表的元素由一个存储元素本身的节点和一个指向下一个元素的引用（指针）链表不必在创建时确定大小，可以无限延伸下去链表在插入和删除数据时，时间复杂度达到O(1)，效率较高链表的缺点链表想访问任何一个位置的元素时，都需..
2021-01-14 15:43:23
780
2
原创 JS实现数据结构（二）：队列
队列（Queue），也是一种受限的线性结构，先进先出（FIFO）受限之处在于它只允许在表的前端进行删除，在表的后端进行插入操作队列结构有两种常见的方式：基于数组实现基于链表实现队列方法enqueue（element）：向队列尾部添加一个（或多个）新的项dequeue（）：移除队列的第一（即排在队列最前面的）项，并返回被移除的元素front（）：返回队列中第一个元素-一最先被添加，也将是最先被移除的元素。队列不做任何变动（不移除元素只返回元素信息一与Stack类的peek..
2021-01-14 15:35:42
647
原创 JS实现数据结构（一）：栈
数组是一种线性结构，可以在任意位置插入和删除数据栈和队列是受限的线性结构，后进先出或先进先出栈（stack），是一种受限的线性表，后进先出（LIFO）插入新元素，称为进栈删除元素，成为出栈程序中的栈实现：递归函数调用栈：函数之间的相互调用，A调用了B，B调用了C，C又调用了D，栈会把A、B、C、D依次压入栈，然后按相反的顺序弹出栈栈结构有两种常见的方式：基于数组实现基于链表实现栈方法：push（element）：添加一个新元素到栈顶位置..
2021-01-14 15:32:54
800
原创 红黑树的规则和变换总结
红黑树的规则性质1：节点是红色或黑色性质2：根节点是黑色性质3：每个叶子节点都是黑色的空节点（NIL节点）性质4：每个红色节点的两个子节点都是黑色（从每个叶子到根的所有路径不能有两个连续的红色节点，但可以有两个黑色的）性质5：从任一节点到其每个叶子的所有路径都包含相同数目的黑色节点红黑树的相对平衡以上特性确保了从根到叶子的最长可能路径不会超过最短可能路径的两倍长结果就是这个树基本是平衡的，虽然没有绝对平衡，但是依然是高效的为什么可以做到最长路径不超过最短路径的两倍？性质4决定了
2021-01-14 15:15:09
838
原创 连接MySQL报错：Host ‘XXXXXX’ is blocked because of many connection errors的解决和一点思考
之前用的比较多的是mongodb，和前端搭配使用起来还算得心应手。周末做的项目用的数据库是MySQL，之前接触的不多，调试起来也是各处都是坑，记录下～error: Host is blocked because of many connection errors报错意思是，多次连接错误库导致MySQL直接启动防御模式，不允许连接了，也就是对IP地址进行封锁了。这样的机制也能理解且非常有必要，要防止某些脚本恶意暴力破解密码，从而泄露数据内容。解决办法解决办法有两种：一、进入MySQL配置文件删除
2021-01-14 15:04:31
3696
2
原创 Finalshell：mac中完美替代xshell+xftp来部署项目
xshell是win环境下非常好用的终端工具，可以在Win中访问远端不同系统下的服务器。之前项目上线工作都是通过搭配使用xshell+xftp来部署项目。但是，遗憾的是mac中并没有xshell，当然可以用iterm来代替，但是使用上并不便捷。后来偶然发现Finalshell，使用上基本能够满足需求，更重要的是它在xshell的基础上，又提供了可视化的界面，同时支持文件的上传和下载，能够很好的用来部署静态文件。一、下载地址下载地址如果macos系统版本比较高，会出现"已损坏无法打开"的提示，只需
2021-01-14 14:27:50
7852
5
原创 mac中VSCode快捷键 整理
工欲善其事，必先利其器。开发项目时，快捷键的使用会大大的提高效率。整理几个我经常用到的快捷键和一些冷门但是很实用的快捷键。command + F 查找command + H 替换command + B 显示/隐藏左侧目录栏control + ~ 控制台终端显示与隐藏command+回车 直接跳到下一行这个非常好用，当光标在上一行的中间时，可以直接按command+回车，切换到下一行，而不需要用鼠标重新定位光标到下一行，非常提高效率option+shift+ ↑ / ↓ .
2021-01-03 16:59:33
2338
原创 fatal:The remote end hung up unexpectedly 考虑缺失.gitignore的可能
fatal:The remote end hung up unexpectedly在本地初始化了一个仓库之后，想要执行git push -u master origin指令，将本地文件上传到远程库时，出现了如上所示的错误提醒。这个错误的意思是上传的文件太大了，查询了网上的解决方法，无非是以下两种：缓存不够，那么就增加缓存网络不行，或者是墙的原因，那么就翻墙或者使用网速快点的再push一遍但是，我试了上述两种方法，无论是增加缓存还是提高网速都一直是失败的。后来我发现在本地初始化一个仓库的时.
2020-12-22 10:23:45
954
原创 Javascript系列(四)：Event Loop 事件循环
一、Event Loop是什么?由于Javascript是单线程的，所有的任务在一个线程上完成。这会导致同一时间只能完成一个任务，如果前一个任务比较耗时，将会导致页面卡顿、假死等问题，用户体验极差，这被称之为“同步模式”和“堵塞模式”。为此，Javascript提供了一个叫做Event Loop（事件循环）的机制来解决单线程运行时阻塞的问题。相反，这叫做“异步模式”和“非堵塞模式”。Event Loop在浏览器和Node环境下会略有差异。二、Event Loop原理由于Javascript的单线程特
2020-12-10 16:32:11
688
原创 dummy节点——leetcode链表题必备
做leetcode链表题的时候，需要额外考虑链表头部的特殊情况。但是，往往考虑不够周全，导致最后通过不断试错，修改代码。代码变得臃肿，可读性差。其实，引入一个dummy节点就可以解决大部分需要考虑头节点的链表题。什么是dummy节点？dummy（假的）节点是一个虚拟创建的节点，放在链表的最前面，指向头节点let dummy = new ListNode(); //创建新节点dummy.next = head; //让dummy指向头节点//...//...return dummy.next
2020-12-08 22:01:47
3587
原创 刷题必备！vscode里配置leetcode插件
在vscode中配置leetcode插件，让刷题更方便！准备vscode 官网自行下载node.js环境 具体可以参考这个 https://www.runoob.com/nodejs/nodejs-install-setup.htmlleetcode 账号安装插件在extension中搜索leetcode，如图上第一个所示，点击安装，安装完成后，左边侧栏会有leetcode的图标，这样就安装完成了。登陆leetcode首次使用会要求你登陆leetcode的账号点击第一个用账号密码登陆，
2020-12-06 14:50:56
2404
1
原创 《PlanningVis: A Visual Analytics Approach to Production Planning in Smart Factories》短评
Abstract制造业的生产计划对于充分利用工厂资源（例如机器，原材料和工人）并降低成本至关重要。 随着工业4.0的出现，已经收集了许多记录工厂资源状况的数据，并进一步参与了生产计划，这为通过数据驱动的方法来理解，评估和调整复杂的生产计划提供了前所未有的机会。 但是，由于大量的生产数据，产品之间的复杂依赖性以及市场和工厂的意外变化，开发用于生产计划的系统分析方法具有挑战性。 以前的研究仅提供汇总的结果，而没有显示用于生产计划比较分析的细节。 此外，在意外事件的情况下也不支持对计划的快速调整。 在本文中
2020-10-21 21:48:17
592
原创 Javascript系列(三)：创建对象和继承
对象创建1.工厂模式优点：解决了创建多个相似对象的问题缺点：没有解决对象识别问题；每一个对象都有一套自己的函数，浪费资源function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); }; return
2020-10-11 13:19:42
711
原创 Javascript系列(二)：值传递
ECMAScript中所有函数的参数都是按值传递的红宝书P70的这句话不是很理解，看了网上很多资料和博客，感觉都讲的云里雾里的，干脆自己整理一篇。整理的过程中发现这个概念其实有点文字游戏，用文字去解释文字所以很晕，其实画一个图就会很清楚了。值传递和引用传递值传递是指在调用函数时将实际参数复制一份传递到函数中，这样在函数中如果对参数进行修改，将不会影响到实际参数。引用传递是指在调用函数时将实际参数的地址传递到函数中，那么在函数中对参数所进行的修改，将影响到实际参数。以上关于值传递与引用传.
2020-10-09 15:01:17
979
原创 Javascript系列(一)：布尔操作符的短路操作
布尔操作符一般具有短路原理：若第一操作数能决定结果，就不会判断第二操作数在Javascript中，由于布尔操作符可以应用于任何类型的操作数，所以返回的结果不仅仅是布尔值，这对优化代码提供了一些方法。合理使用布尔操作数能够减少if…else等语句的使用，大大减少了代码量，增强了代码的简洁性，但也在一定程度降低了可读性。所以，在实际使用中要有所取舍。各类操作数的布尔值前面提过，在Javascript中的逻辑操作数可以是任意类型的，下表列举各类操作数的布尔值：类型布尔值对象t
2020-10-08 14:57:17
796
原创 关于Grid网格布局的用法整理
CSS传统布局一般都是基于盒状模型，有例如div+CSS，利用positon, float等布局，灵活性较高，但对于一些特殊布局（垂直居中）实现起来相当麻烦。flex弹性布局较好的解决了这个问题，同时flex的兼容性也相当不错，除了IE8.9以及其他浏览器一些低版本之外，基本上兼容现在主流的浏览器，如果没有特别需要保证IE的兼容性可以放心使用。flex是一维布局，即行列同时只能操作一个的，具体用法可参照：阮一峰Flex布局教程Grid布局与flex布局有类似的部分，建议学完flex布局再学习Grid
2020-09-01 16:07:16
1468
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人