- 博客(124)
- 收藏
- 关注
RSS订阅
原创 中国象棋（react hooks版）
文章目录前言功能展示新增模块功能搭建项目框架配置React Router配置React Store配置i18n配置主题色React动画React ColorPicker打谱记录单元测试核心功能优化落子音效dom解耦小结结语前言它终于来了。终于来了，在第一版的基础上，历时近两个月终于完成react版本的中国象棋，这个版本使用的技术栈包括react hooks+ts+sass+antd（本来还准备使用redux，但是嫌麻烦，就没用使用）。这次主要是时间消耗是在hooks以及ts的使用上，毕竟从某种意义上来说
2021-09-30 22:52:37
1738
11
原创 基于原生js且非canvas实现的中国象棋（第一版）
文章目录前言棋盘与棋子棋盘棋子棋盘与棋子的交互主要的类文件棋子类棋盘前言本人从小就非常喜欢下中国象棋，学习编程后就一直想自己做一个中国象棋的前端游戏，现在终于有“机会”了。这是第一版的中国象棋，由h5+css3+原生js所实现（非canvas）。这个版本主要实现的功能包括：棋子的鼠标交互功能，每种棋子的落子规则，将军提示和游戏结束判断，悔棋功能，各种音效等等注：由于总代码量比较大，所以完整代码我放在github上，大家可以自己去阅读，这里我只挑选核心功能的代码进行讲解。源代码地址：完整代码游戏的
2021-04-09 21:21:45
1672
5
原创 前端开发工具DevTools的详细知识点总结（一）
文章目录打开DevTools元素面板Style面板Computed面板devtools取色器打开DevToolsdevtools,即Chrome 开发者工具，Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。打开devtools的三种方式：在Chrome菜单中选择 更多工具 再选择并点击开发者工具（右图即是Chrome菜单符号，位于屏幕的右上角） 在页面元素上右键点击，选择 “检查”（这个操作会直接跳转到指定元素的元素面板
2020-05-17 16:51:17
43760
1
原创 几种前端内联绑定事件的方式
文章目录前言问题描述问题分析扩展结语前言又是好久没写博客了，这期写一个很基础但是也是很细节的一个前端小知识：前端内联绑定事件。问题描述先来看以下这段代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
2022-04-21 20:11:11
2129
2
原创 多层异步之最优解
文章目录前言问题描述问题分析有序性耗时更少小节结语前言好久没写博客了，转眼间这是2022年的第一篇博客，相信作为前端开发者的大家肯定对promise一定不会陌生，那么这期我再分享一个promise相关的进阶问题。问题描述首先，我们需要进行一组异步请求，然后当每个请求回来后会对当前的结果再进行一组异步操作，当上一次异步操作的结果返回后最后再进行一次异步操作得到最终的结果。这也就是多层异步嵌套。是不是感觉有点绕，那接下来，我就用结合代码示例来进行具体问题描述。function main() {
2022-02-07 11:10:49
1476
原创 前端页面阻尼效果实现
文章目录前言阻尼效果实现思路尝试方案一优化思路三层双滑动窗口模型结语前言不知道大家是否知道阻尼效果，这个效果只能在移动端才能实现，因为它的本质是touch事件以及scroll事件的某些行为。相信大家应该都用过知乎吧，在知乎里两个页面之间就有一个阻尼层。（大家可以打开手机知乎体验一下）阻尼效果那么究竟阻尼效果是什么呢？简单来说，就是界面滑动到了最底部或最顶部仍可以比实际的内容多滑动一段距离然后回弹的弹性效果，并且在页面的其它地方操作时依旧是非常流畅的滚动效果。实现思路既然知道了目标效果，那接下
2021-12-26 16:41:07
1801
3
原创 双流瀑布图
文章目录前言思路flex布局flex布局进阶版绝对定位/font>结语前言随着前端的发展，相信瀑布图大家应该都不陌生，也许你不一定了解但是你一定见过。用一张蘑菇街的官网照片：这些都是经典的瀑布图布局，只不过这些他们使用的是多流瀑布图，而这篇博客我带着大家一起来看看稍微简单一点的双流瀑布图的实现，不管是多流还是双流，其底层原理都是一致的。思路我们先来看一个已经实现好的一个双流瀑布图的样例：首先，一种简单且比较直接的想法是直接使用css布局：flex布局。flex布局观察双流瀑布图，
2021-11-28 21:25:52
461
原创 动画组件之BigText
文章目录前言实现CSSTransition组件前言好久没更新博客了，这段时间算是给自己放了一个小假吧，这期来讲解如果用原生CSS+JS实现一个bigtext的动画特效。（看过我上期react版本的中国象棋的伙伴应该会记得那里面就有一个使用react CSSTransition组件实现的一个bigtext的动画效果，这不过这次我们使用原生CSS和JS进行实现。）中国象棋实现CSSTransition组件第一步我们首先得使用原生JS实现一个CSSTransition组件，那么应该怎么实现呢？大家不妨
2021-11-08 20:58:57
587
原创 前端多线程之Worker
文章目录前言Worker的使用流程简单的demodemo的使用场景结语前言首先，我们都知道前端js所在的运行环境是一个单线程环境，即同一时刻只能执行一段代码，无法实现并行处理的操作，比如异步编程。但是这并不绝对，Worker 可以使得我们创建另外一个后台线程为我们服务，相信大多数朋友可能对于Worker接口都比较陌生，大家可以先去MDN官网查看文档：Worker文档Worker的使用流程主线程创建Worker对象给Worker对象绑定message监听事件，监听新线程传递的信息给新线程的sel
2021-09-30 16:26:32
3962
原创 浅谈前端路由的原理
文章目录前言实现原理hashhistory如何性能优化路由与Tabs小结结语前言前端路由相信大家都不陌生，对于现在主流是SPA（单页面应用）框架，前端路由显得格外重要，比如react的react-router以及vue的vue router等等。它们出现的主要目的是为了提高性能以及用户体验。实现原理hash使用案例：1 http://10.0.0.1/2 http://10.0.0.1/#/about3 http://10.0.0.1/#/concat在HTML5之前，前端路由就是使用h
2021-09-13 12:02:17
565
原创 手撕Promise之静态API
文章目录前言Promise.all()API功能思路分析代码Promise.any()Promise.allSelect()Promise.race()结语前言Promise有六个常用的API，包括Promise.resolve()、Promise.reject()、Promise.all()、Promise.any()、Promise.allSelect()以及Promise.race()。前两个API很简单，这里我就过滤掉了，这篇博客主要是实现后面四个API，至于为什么会突然想到去实现这玩意，问就是
2021-09-04 20:54:20
556
原创 深度优先搜索之记忆化dfs
文章目录前言朴素dfs的求解思路记忆化dfs的求解思路将整数按权重排序题目描述解题思路朴素dfs记忆化dfs小结矩阵中的最长递增路径题目描述解题思路朴素dfs记忆化dfs小结统计所有可行路径题目描述解题思路朴素dfs记忆化dfs小结学生出勤记录 II题目描述朴素dfs记忆化dfs小结“马”在棋盘上的概率题目描述记忆化dfs骑士拨号器题目描述记忆化dfs记忆化dfs与棋结语前言前不久，我写一篇bfs的进阶版双向bfs：广度优先搜索之双向bfs这篇文章主要是讲述对于一些特定的bfs问题，可以使用两头齐搜的
2021-08-22 18:28:45
2859
3
原创 一道透解promise与宏/微任务的面试题
又到了一年一度的七夕节，如果大家没有去撒狗粮，那不妨让我可以带着你们一起去遨游消息队列与宏/微任务的世界。首先，下面这道题是今年某大厂原题的升级版，目的是为了尽可能把所涉及的知识点全部都覆盖到，从而就能够一网打尽！
2021-08-14 23:06:42
849
6
原创 2021前端面经（一）
文章目录前言面试题答案结语前言有近一个月没更新博客了，最近一段时间都在忙于面试和复习。第一次体验社招面试，感觉确实要比想象中难得多（估计和近些年越来越卷有一定的关系）。这次面试目的不全是为了跳槽，一方面可以借此了解一下今年面试的行情，另一方面也能看看自己在市场上究竟是什么“价位”。在这近一个月的社招面试中，小厂、中厂、大厂我都体验过，而之所以说比想象中要难得多，其主要原因有二，一方面由于不同公司的方向不一样所以其询问的侧重点也不太一样，而对于求职者的自己来说最大的感受就是总体上被询问的知识面很广。毫不
2021-08-09 16:26:35
598
原创 广度优先搜索之双向bfs（实操篇）
文章目录前言朴素bfs的求解思路双向bfs的求解思路单词接龙题目描述朴素bfs双向bfs小结打开转盘锁题目描述双向bfs滑动谜题题目描述双向bfs公交路线题目描述双向bfs结语前言对于bfs（广度优先搜索）相信大家都有所耳闻，在很多场合下都会用到它，比如最经典的树的层次遍历以及图的广度搜索。但是对于双向bfs也许就大家就会感到一些陌生了，双向bfs，顾名思义就是从两边同时进行bfs遍历，但是为何会需要使用双向bfs呢？（以下的图片以及描述来自力扣三叶姐）使用朴素 bfs 进行求解时，队列中最多会存在“
2021-06-28 22:14:00
4137
1
原创 统计字典序元音字符串的数目（一题三解）
文章目录前言题目描述回溯算法动态规划数学（盒子放球模型）结语前言突然间发现自己好久没写有关算法题的博客了，今儿来一道很有意思的算法题，它可以使用三种完全不同的思路来处理，话不多说，直接上题。题目描述给你一个整数 n，请返回长度为 n 、仅由元音 (a, e, i, o, u) 组成且按 字典序排列 的字符串数量。字符串 s 按 字典序排列 需要满足：对于所有有效的 i，s[i] 在字母表中的位置总是与 s[i+1] 相同或在 s[i+1] 之前。例如：输入：n=2输出：15解释：仅由元音组
2021-06-23 22:19:29
857
1
原创 使用原生js实现element-ui的message组件
文章目录前言搭建效果环境创建html文件创建css文件绑定按钮事件创建messaage组件construct()setOption(options)完整的js代码小结结语前言使用vue的朋友应该或多或少都知道element-ui组件吧，这篇博客我将使用原生js实现一个“低配”版本的message组件。开始前先给出element-ui message组件的网址链接，不论是否有使用过，大家都可以参照的对比。目标message组件搭建效果环境为了演示实现效果，所以我们必须得需要一个完整的运行环境，以如
2021-06-07 21:34:38
5205
3
原创 自定义合并table行/列
文章目录前言处理思路数据预处理创建目标表格结语前言我们有如下的一组原始数据： const data = [ ['阶段', '年份', '投入费用', '投入费用', '合计'], ['构建期', 2012, 1212, 1300, 29], ['构建期', 2013, 154, 154, 29], ['运营期', 2014, 154, 154, 484] ];用原生table将其绘制出来
2021-05-08 23:06:11
1645
原创 forEach使用之Illegal continue/break statement
文章目录问题描述再现forEach扩展（return和异常）结语问题描述不知道大家在平时写代码的过程中是否遇到以下的报错信息SyntaxError: Illegal break statementSyntaxError: Illegal continue statement: no surrounding iteration statement以上的报错原因就是非法使用break/continue关键字，具体点说就是这两个关键字应该在循环体里面使用。乍一看，感觉没毛病很正常，哪个憨憨会把这两个关键
2021-05-06 23:01:19
1411
1
原创 浏览器工作原理之从URL到页面显示
文章目录前言从URL到HTML从HTML到DOM树从DOM树到CSSOM树从CSSOM树到布局树从布局树到渲染显示结语前言这篇博客，我使用node.js环境在代码逻辑层面描述浏览器从接收一个URL到渲染出一个网页这里面究竟都发生了什么。我们知道在浏览器中把一个URL渲染出一个网页可以简化为五个步骤：从URL到HTML从HTML到DOM树从DOM树到CSSOM树从CSSOM树到布局树从布局树到渲染显示从URL到HTML这一步我们是建立在HTTP请求的基础上，即服务器发送一个HTTP的U
2021-05-05 22:24:15
449
3
原创 一道工作中遇到的异步获取数据问题
文章目录问题描述解决问题问题升级结语问题描述先看下面一段代码：function main(n) { for (let i = 1; i <= n; i++) { request(`第${i}个请求`, getRandomTime(500, 2000)); }}function getRandomTime(min, max) { min = Math.ceil(min); max = Math.floor(max); return Ma
2021-04-19 20:55:52
284
1
原创 table数据转换算法
文章目录前言构造dom元素将原始数据进行排序数据重组最终代码结语前言我们有如下的一组原始数据，现在我们需要在vue里使用原生table标签将其展示。 data: [ { paraValue: [ { canshu: "参数名称" }, { moren: "默认配置" },
2021-03-21 21:24:06
447
2
原创 js两种自定义修改对象属性的方式
文章目录前言Object.defineProperty()ProxyProxy校验器结语前言先看下面一段常规的object赋值代码：const people = { name: 'Rookie', age: 18};people.age = 20;// setpeople.age;// get现在我们想要自定义实现people的set和get，那么应该如何实现呢？下面我们介绍两种实现方式：Object.defineProperty()，ProxyObject.define
2021-03-16 22:42:25
3402
原创 一道工作中遇到的回溯算法题
文章目录问题描述解决思路求解组合原题解答结语问题描述2020年有12个月，我们想得到如下格式的所有数据组合集合的结果：[['2020-01'], ..., ['2020-12'],['2020-01','2020-02'],...,['2020-11','2020-12'],...['2020-01',...,'2020-12']]仔细观察上述目标结果，其实最终结果是一个二维数组，外层数组的元素正好是组合和C121C_{12}^1C121+…+C1212C_{12}^{12}C1212的
2021-03-16 18:10:48
524
原创 一道工作中经常遇到的数据转换算法题
文章目录问题描述解决思路课后练习习题答案小结问题描述将原数据类型转换为目标数据类型。原数据类型如下：const list1 = [ { typeId: 1, off: '111,222', on: '333,444', }, { typeId: 2, off: '111,222', on: '333,444', }, { typeId: 3,
2021-03-06 21:52:39
394
2
原创 vue底层原理之实现简易版本vue框架
文章目录前言模块叙述Observer/DepWatchDirective(Compile)入口文件流程概述结语前言vue框架实现了数据的双向绑定，即Data和Dom之间的双向通信，这两者之间的通信则需要一个Directive来连接，即：表现得更复杂一点：模块叙述下面我结合一个具体的代码案例来介绍各个模块的功能以及最终的执行流程。Observer/DepObserver的作用为对传入的data设置了 getter 和 setter即为一个可以获取和修改的观察者。Dep 存在意义就是，他通过
2021-01-31 18:37:31
375
原创 力扣题解之暴力动态规划
文章目录题目介绍解决方案暴力动规扩展题结语题目介绍在开始解决这道题之前，我们不妨先将题目条件修改一点：将上、下、左、右四个方向之一移动改为下、右两个之一方向移动。解决方案修改条件之后的题目就是一道很经典的动态规划题目，使用动态规划的经典解决手段–填表法不难得出其状态转移方程为：rowMax = Math.max(dp[i - 1][j], Math.abs(heights[i - 1][j] - heights[i][j]));colMax = Math.max(dp[i][j - 1], M
2021-01-30 21:31:24
603
原创 js一行代码创建二维数组
文章目录前言正文结语前言使用js创建二维数组的方式有很多，最经典的莫过于使用for循环创建，相信大家都会此方法。下面我使用js原生API一行代码创建二维数组。正文Talk is cheap,show you my code：const arr1 = Array(3).fill(0).map(x => Array(3).fill(0));此代码应该也很好理解，初始化一个行列都为3且数值都为0的二维数组。看完代码肯定会有人有疑问，此创建方式总感觉有些复杂，为何不用下面更简单的方式来创建：
2021-01-29 18:40:35
3013
原创 解决父元素的padding对子元素的input失效问题
文章目录问题描述解决方案方案一方案二更多方案结语问题描述在一个含有padding的div元素中包含一个input标签和一个icon，但是input元素显示异常。（具体表现为父元素的padding对子元素的input失效）异常效果图：案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Taoism</title> <s
2021-01-16 10:53:04
1026
原创 CSS gird布局
文章目录简介grid布局的常用属性grid-template-columns / grid-template-rowgrid-row-gap / grid-column-gapgrid-column / grid-row现场实操结语简介Grid布局是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线
2020-12-06 17:04:35
720
原创 react的高级技术点总结（二）
文章目录RefsRefs介绍何时使用 Refs创建 Refs访问 Refs小结受控组件与非受控组件受控组件非受控组件表单案例小结结语RefsRefs介绍我们知道react里面我们做操作的dom元素都是虚拟dom并不是真正网页上的dom元素，但是有时候我们确实需要操作真实的dom元素，那么此时就需要用到Refs。Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。何时使用 Refs下面是几个适合使用 refs 的情况：管理焦点，文本选择或媒体
2020-11-29 16:34:06
545
原创 react的高级技术点总结（一）
文章目录children propreact组件的生命周期方法componentDidMount()componentDidUpdate()componentWillUnmount()小结结语children prop我们知道在子组件通过props来获取父组件提供的数据，通过上篇博客的内容（react之jsx语法）我们知道props可以是一些很常见的基本数据类型。如果我们想在父组件给子组件传递一个动态组件，这个组件也可以直接作为props的一部分，但是往往不推荐这种做法，因为react提供了一种语法来满
2020-11-29 16:05:27
1053
原创 react之jsx语法
文章目录前言指定 React 元素类型React 必须在作用域内在 JSX 类型中使用点语法用户定义的组件必须以大写字母开头JSX 中的 PropsJavaScript 表达式作为 Props字符串字面量Props 默认值为 true属性展开JSX 中的子元素字符串字面量JSX 子元素JavaScript 表达式作为子元素函数作为子元素布尔类型、Null 以及 Undefined 将会忽略结语前言使用过react框架的朋友应该知道其使用的一些语法规格（jsx）与普通的js语法有一些差异，下面我罗列出一些
2020-11-22 17:56:17
867
2
原创 react中父组件与子组件间的通信
文章目录前言父组件向子组件传递数据父组件的参数作为子组件的props子组件使用connect获取数据子组件向父组件传递数据一个简单且很形象的案例父组件解析子组件解析小结结语前言相信很多刚开始接触react的朋友都没能完全的弄明白react父子组件间是如何进行行云流水班的数据通信，这其中的底层机制又是什么，相信通过此篇文章能够立竿见影的解答大家心中的疑惑。父组件向子组件传递数据在日常使用中父组件向子组件传递数据有两种方式：父组件的参数作为子组件的props，子组件使用connect获取数据父组件的
2020-11-15 15:40:44
1304
原创 2020前端面试题（一）
文章目录前言题目一解决思路解决代码题目二方案一前言在实际工作中我们也应需要保持有一颗居安思危的心，虽然有关算法模块的技术着实很难有用武之地，但是这并不影响我们去见识并学习一些非算法部分的面试题，从而做到知己知彼，方可心中不虚。题目一写一个 mySetInterVal(fn, a, b),每次间隔 a,a+b,a+2b,…,a+nb 的时间，然后写一个 myClear，停止上面的 mySetInterVal解决思路本题属于一道逻辑思维的编码题，不需要使用算法技巧。由于需要循环执行进而想到使用函数
2020-11-07 18:22:34
477
原创 如何快速的在项目中查找目标文件
文章目录问题描述解决方案vsCode全局文件搜索vsCode全局变量搜索devtools中Elements页面的蛛丝马迹devtools中React页面的蛛丝马迹结语问题描述对于一个完整陌生的大项目源码库，如何能够快速的找到自己心中预期的目标文件甚至是目标函数？这里我使用的开发工具是vsCode，项目是一个前端项目。（万变不离其宗，其它开发工具甚至是其它类型项目也可以找到类似的查找方法）解决方案vsCode全局文件搜索默认快捷键ctrl+p即可打开如下搜索界面：通过此方法我们可以通过文件名
2020-11-01 21:18:48
2667
原创 如何聪明的提问（职场的必踩坑）
文章目录前言在提问之前当你提问时Stack Exchange精确地描述问题并言之有物话不在多而在精低声下气不能代替你的功课描述问题症状而非你的猜测描述目标而不是过程清楚明确的表达你的问题以及需求询问有关代码的问题时去掉无意义的提问句礼多人不怪，而且有时还很有帮助问题解决后，加个简短的补充说明如何解读答案如果还是搞不懂不该问的问题好问题与蠢问题结语前言对于刚踏入实际工作中的新手或者是踏入一个全新的知识领域时，向同事甚至或者是身边的大佬提问是一件在所难免的事情，比较他们确实能给予我们很大程度上的帮助，但是这
2020-10-25 20:00:33
551
原创 git常用命令
文章目录git命令基础必备命令基础高级命令远程仓库相关命令分支管理相关命令一个经常遇到的实际问题案例问题描述解决思路涉及的git命令结语git命令基础必备命令初始化本地git仓库：git init将目标文件添加入本地git仓库：git add <file>将目标文件提交到本地git仓库：git commit -m <message>基础高级命令查看历史操作记录：git log更好用的查看命令：git log --oneline注：键盘输入Q键可以
2020-10-17 18:34:36
409
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人