- 博客(49)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 我的React服务端渲染实践
@TOC欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全...
2020-10-28 21:37:19
914
原创 A星寻路算法详解
A星算法是一种启发式搜索算法，它通过在地图上找到一条从起点到终点的路径来解决一些问题。该算法通过启发式函数来评估每个节点，并选择具有最低 F 值的节点作为下一个要探索的节点。最终，该算法会找到一条最优的路径。
2024-02-24 18:31:17
1901
原创 Canvas实现连线动态效果
本文将带大家基于Canvas封装的ZRender库，了解ZRender库中提供的animate绘制动画的方法，并且使用animate方法实现一个带有箭头流动效果的连线。
2023-05-26 17:45:29
2479
原创 Canvas实现以鼠标当前位置为原点缩放及画布拖动（矩阵变换）
通过矩阵的方式用 Canvas 实现以鼠标当前位置为原点缩放及画布拖动，理解起来更加容易（当然前提是要有一定的数学基础，起码了解过矩阵🤣），大大减少了代码量，同时缩放和拖拽的逻辑可以复用，不仅是在Canvas中，普通的div拖拽和放大也是一样的代码逻辑。
2023-03-26 21:39:54
1447
1
原创 设计模式-策略模式
作为一名合格的前端开发工程师，全面的掌握面向对象的设计思想非常重要，而“设计模式”是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的，代表了面向对象设计思想的最佳实践。
2023-03-04 20:47:34
721
1
原创 Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)
本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale，并结合这两个方法，实现鼠标滚轮缩放以及画布拖动功能。
2023-02-11 16:17:26
3886
5
原创 Spring Boot整合MyBatis(保姆级教程)
本文通过 `Spring Boot + MyBatis` 实现一个用户管理的例子，来带大家入门 `MyBatis`。本教程适合小白入手，文中如有差错还请各位不吝赐教，大家一起学习，共同进步。
2022-12-30 15:04:42
1444
原创 数据库设计三范式
范式是数据库设计时遵循的一种规范，不同的规范需要遵循不同的**范式**，只有充分遵循了数据库设计的范式，才能设计开发出冗余较小、高效、结构合理的数据库。在实际的数据库开发过程中，往往会允许一部分的数据冗余来减少数据库连接。
2022-11-29 23:37:45
499
1
原创 Vue组件间的通信方式浅析
在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用Vuex往往会比较重，本文将系统的罗列出几种不使用Vuex，比较实用的组件间的通信方式，供大家参考。
2022-09-29 11:04:33
506
原创 vue-cli-service: command not found报错引发的血案
vue-cli-service: command not found报错引发的血案
2022-09-07 21:57:02
16450
1
原创 pnpm + workspace + changesets 构建你的 monorepo 工程
pnpm + workspace + changesets 构建你的 monorepo 工程
2022-05-17 15:57:21
8588
2
原创 如何使用lerna管理你的仓库
如何使用lerna管理你的仓库multirepo VS monorepo在介绍我们今天的主角 lerna 之前，首先了解下什么是 multirepo ？什么是 monorepo ？multirepo 指的是将模块分为多个仓库，monorepo 指的是将多个模块放在一个仓库中。multirepo 可以让每个团队都拥有自己的仓库，他们可以使用自己的构建流程、代码规范等，但是同时也会存在很多问题，比如模块之间如果存在相互依赖，就必须到目标仓库里进行bug修复、构建、发版本等，相互依赖关系越复杂，处理起来就
2022-02-21 12:27:43
2297
原创 redux你用对了吗？
redux 的三大原则redux 的开发和使用必须要遵循三大原则，即：单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。使用纯函数来执行修改: 为了描述 action 如何改变 state tree ，你需要编写 reducers关于第一点很容易理解，整个应用应当只有一个 s
2021-09-11 17:40:10
398
原创 如何在github上提交PR(Pull Request)
github 上有很多优秀的开源项目，很多时候我们不仅仅只是满足于使用，同时也想一起参与开源项目的开发，贡献自己的代码。今天这篇文章就给大家介绍一下如何在 github 上提交 PR，让我们一起为开源社区做贡献。fork你要参与的项目在 github 上找到你想要参与的开源项目(这里以 ant-design 为例)，然后点击右上角的 fork 按钮，就会在你自己的代码仓库中创建一个此开源项目的副本，后续所有代码提交都提交到此仓库，这样就不必担心未经审核的代码弄乱了原始仓库。完成了fork步骤后，会在
2021-03-21 23:52:49
5305
原创 一文搞懂peerDependencies
问题引出今天在运行之前的一个react工程时，浏览器上抛了一个奇怪的错误：Error: 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 h...
2020-04-21 23:51:56
14290
1
原创 Ant-design Modal实现可以拖动的效果
最近项目组在开发的时候提出了一个需求，需要让 ant-design Modal实现能够拖动的功能，研究了一番，基于 and-design Modal自己封装了一个antd-draggable-modal组件。特性：支持弹出窗居中打开支持拖拽 title bar 实现拖拽支持多层弹窗拖拽实现原理要实现 Modal 的拖拽，首先要弄清楚 Modal 的位置跟什么有关系，打开浏览器，通...
2020-03-01 14:14:58
9862
9
原创 微前端实践-实现React(umi框架)的子系统集成
问题引入最近在公司遇到了一个需求，别的团队的同事想将他们用 React 编写的工程作为子系统集成到我们已有的系统中，React 工程是基于 umi 框架编写的，我们的主系统是基于 jquery 框架实现的。其实他们本来是已经实现了 React 作为子系统集成到我们的主系统中的，但是他们是借助于 iframe 实现页面嵌入的，后来因为用户体验不佳、存在安全性问题等因素而不得不放弃这种方式的集成了。...
2020-02-23 23:57:27
3802
原创 拖拽神器React DnD你真的了解了吗？
简介最近在研究用 React 绘制拓扑图的时候涉及到了 HTML5 拖放 API，了解到了 React DnD 这个拖放神器。React DnD 帮我们封装了一系列的拖放 API，大大简化了拖放 API 的使用方式，今天就结合下面这个示例给大家介绍下 React DnD 的用法。重要概念React Dnd 提供了几个重要的 API 供我们使用：DragSourceDropTarget...
2020-01-19 21:03:16
3107
原创 手摸手教你撸一个代码检测命令行工具(CLI)
大家在做前端开发的时候，为了保证团队成员提交代码的质量，一般都会对代码进行代码质量检查和代码美化工作，通常的做法是进行一系列的配置，借助于 eslint、prettier、lint-staged、husky 等工具实现代码的检测工作。但是这个过程涉及众多，配置起来也很繁琐，而且针对不同的项目都需要进行重复配置，无疑增加了大家的工作量，那么我要解决的就是这个问题，提供一个命令行工具来封装上述检测工具...
2020-01-06 17:26:25
2213
原创 基于Github issues + umi 搭建一个免费的带评论功能的博客(二)
上一节我主要介绍了什么是`Github App`，以及如何利用GitHub App为我们的`repository`进行授权，解决了博客搭建中的数据层，那么这篇文章我将着重介绍博客搭建过程中用到的前端技术...
2019-12-22 00:36:14
378
1
原创 基于Github issues + umi 搭建一个免费的带评论功能的博客(一)
作为一个工作了好几年的前端搬砖狗，搭建一个属于自己的博客是很有必要的，一来可以总结自己的开发学习经验，二来可以分享和记录下自己的学习轨迹，可谓好处多多，那么今天我就给大家介绍一种搭建博客的新方式。✈️为什么选择Github issues而不是其他方式？其实在使用Github issues搭建博客之前自己就曾经尝试过其他方式搭建属于自己的博客平台，最早的时候自己买过云服务器，买的域名，搭建过一个...
2019-12-22 00:35:43
584
1
原创 如何使用git rebase管理你的开发流程
开发流程最近在公司换了一个新部门，对代码的提交流程比较混乱，这里整理一下比较规范的Git开发流程。新建本地主分支首先假设远程代码仓库的origin/dev分支是我们的开发分支。$ git checkout -b dev origin/dev第一步先新建一个本地的主分支，并和远程的origin/dev分支关联起来。后面会一直将这个分支保持和origin/dev代码同步。切换到本地...
2019-10-11 21:18:20
558
原创 js中如何判断一个变量是数组还是对象
在javascript中当使用typeof方法来判断[]和{}时，返回值都是’object’，那么如何来判断一个变量是数组还是对象呢？这里记录两种方法：利用toString()方法 Object.prototype.toString.call({}) // [object Object] Object.prototype.toString.call([]) // [object Arra...
2019-03-14 19:12:04
12413
原创 js中hasOwnProperty方法和in运算符区别
hasOwnPropert方法hasOwnPropert()方法返回值是一个布尔值，指示对象自身属性中是否具有指定的属性，因此这个方法会忽略掉那些从原型链上继承到的属性。看下面的例子：Object.prototype.foo = 'animal';let obj = { name: 'xiaoming', age: '12'}console.log(obj.hasOwnPrope...
2019-03-14 18:30:32
1664
原创 用React实现一个HTML中上标、下标转换工具
用React实现一个HTML中上标、下标转换工具前言HTML中的sub、sup标签在React中的使用前言最近的项目中有个需求，需要能够在html中实现化学元素的表示，比如上标：SO2、O3、CH4、PM2.5、PM10，还有一些单位，比如：μg/m3、mg/m3等，这些上下标该如何表示呢？解决这个问题的方式有几种，其中一种是搜狗输入法中的数字范围中可以找到部分上标和下标，但是不是很全，其次就...
2019-02-15 17:09:57
1190
原创 CSS3 transition实现手风琴效果
CSS3 transition实现手风琴效果最近在项目中遇到了一个需求，需要完成一个手风琴效果的展示，最后通过CSS3 transition实现了这个效果，下面就分享下实现方法。效果首先看下效果：可以看到，当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。transition属性实现动画效果这要用到了transition的四个属性，分别是：transition-prope...
2019-01-04 15:25:14
3361
1
原创 js将小数转换为百分数并保留两位小数
记录下js中如何将小数转换为百分数并保留两位小数的方法。function format(point) { const formated = Number(point*100).toFixed(2); return `${formated}%`}
2018-11-15 23:04:10
5746
原创 es6箭头函数中return的用法
最近在项目中频繁的使用了箭头函数，在使用的过程中经常遇到以下几个问题，下载记录下来：如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回例子：const foo = (a, b) => { a+b;}foo(1, 2) // undefinedconst foo1 = (a, b) => { return a+b;...
2018-11-15 16:21:43
11732
3
原创 详解CSS中的BFC及其应用
详解CSS中的BFC及其应用前言何为BFC创建BFCBFC的特性BFC的应用使用BFC来防止文字环绕使用BFC实现两列布局,左侧固定,右侧自适应外边距折叠用于清除浮动总结前言在最近的几次面试中频繁地被问到了CSS中的BFC，问到这块的时候直接回答说“不是很清楚”，给面试打了个折扣，回来做个总结，认识下什么是“BFC”？何为BFCBFC的全称是Block Formatting Context...
2018-10-29 15:40:36
306
原创 十分钟理解javascript中的this对象
最近在参加的几场面试中都涉及到了对于js中this对象的理解，那么怎样去理解this呢？这里针对不同的场景通过代码来帮助我们理解好this。this到底指向什么？this指向什么呢？一言以蔽之：this最终指向的是那个调用它的对象下面通过代码来分析this的指向问题。默认绑定全局变量windowvar a = 'hello';function foo() { conso...
2018-10-27 21:29:26
1736
3
原创 记一次失败的小米前端面试经历
之前投了小米南京的前端开发岗，今天晚上有时间进行了一次视频面试，嗯，感觉欠缺的东西太多了，好多都不会，下面记录下一些面试的题目。es6中的let和var的区别是什么？用过bind函数吗？作用是什么？call和apply的区别是什么？有没有想过call是怎么实现的？能用代码写出来吗？JavaScript类的继承有哪几种实现方式？你能列举出来吗？所说你对JavaScript中的protot...
2018-10-25 20:22:06
3281
原创 记录一次扇贝前端面试经历
记录一次扇贝前端面试经历最近在上家公司由于换部门的关系干的不是很舒服，一直想换个环境，于是找时间投了简历，打开招聘软件查找了一番，发现了“扇贝”这家公司，发现他们家的招聘简章写的非常有意思，又是一家总部位于南京的公司，技术栈也和自己的现在学习方向很接近，也是就顺手投了个简历。漫长的等待简历投递之后就是一个漫长的等待的过程。虽然同时也投递了其他家公司，但是最心仪的公司一直没给我答复内心其实...
2018-10-24 00:32:29
3636
6
原创 git切换到指定远程分支
git切换到指定远程分支我们在使用git进行开发的时候经常会遇到需要切换远程分支并且提交到远程指定分支的情况，现在记录下操作步骤。查看远程所有分支$ git branch -agit branch不带参数,列出本地已经存在的分支，并且在当前分支的前面用*标记，加上-a参数可以查看所有分支列表，包括本地和远程，远程分支一般会用红色字体标记出来* dev master remote...
2018-10-12 17:44:41
301211
3
原创 微信小程序页面跳转方式的总结
微信小程序页面跳转方式的总结微信小程序页面跳转方式的总结前言wx.navigateTowx.redirectTowx.navigateBack微信小程序页面跳转方式的总结前言在微信小程序的开发中经常会遇到页面跳转的情况，有的在跳转的时候还需要在页面之间传递参数，今天整理下常见的几种页面跳转方式。wx.navigateTo保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面...
2018-10-10 17:03:52
3671
原创 es6之扩展运算符 三个点（...）
es6之扩展运算符 三个点（...）es6之扩展运算符 三个点（...）对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点（…）对象的扩展运算符理解对象的扩展运算符其实很简单，只要记住一句话就可以：对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...z }; /...
2018-09-30 19:09:23
249208
27
原创 React之高阶组件
React之高阶组件React之高阶组件前言基本用法属性代理模式`(Props Proxy)`通过ref访问组件实例反向继承`(Inheritance Inversion)`总结React之高阶组件前言高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件从高阶组件的定义来看，高阶组件并不是一个组件，它就是一个函数，接受一个组件并且返回一个被包装过的新组件。const...
2018-09-29 11:27:01
2657
1
原创 React之context上下文详解
React的context介绍React的context介绍简介用法总结React的context介绍简介首先介绍下React中context这个概念，React官方文档上是这么介绍的：Context provides a way to pass data through the component tree without having to pass props down manua...
2018-09-27 17:04:27
1152
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人