- 博客(100)
- 资源 (22)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 直接告诉你这些常用正则表达式是怎么写出来的
作为一名程序员，不会写正则表达式总感觉少了点什么，不要求你能把正则玩出花来，但最起码要对常用的正则表达式手到擒来，刚毕业的我对于正则也是一头雾水，不过学会它也就一篇教程的事情本文我不会再浪费带宽把正则的规则再次重复一遍，而是从实际入手，直接告诉你为什么这么写16进制颜色按照规则来以 # 开头后面紧跟着6个字符或者3个字符作为结尾，这些字符可以是 a-f 的小写字母、A-F的大写字母、数字第一句，可以写成 /^#/；第二句，[a-fA-F0-9] 表示任意的 a-f、A-F、0-9，6或 3的
2022-03-11 15:12:52
500
原创 从源码看Babel是如何编译Async和Generator函数的
某次面试场景：面试官：你知道 async/await 吗？我：有所了解（心中窃喜，看来下面要问我事件循环方面的东西了，马上给你倒着背出来，稳得很）面试官：那请你说下 Bable 是如何处理 async/await 的？ 或者直接描述一下相关 polyfill 的原理我：。。。（怎么不按套路出牌？）我确实不知道这个东西，但为了避免尴尬，我只能秉持着虽然我不知道你说的这个东西但气势不能弱了一...
2020-03-14 15:15:05
1934
原创 前端UI设计稿对比工具 - chrome+webpack插件
（切图仔）前端开发者一大重要的职责就是将 UI画稿转化为实际可用的页面，效果图的还原度在相当大的程度上决定了 UI 和 PM的满意度一般情况下，拿到设计稿后，懒散点的可能直接看图软件打开，肉眼测距就开搞了，负责点的会打开 PS或者更正规的 Photoshop，力图精确到 px，这两种方法各有利弊，前者的还原度大概率堪忧，后者耗时耗力，能把眼睛看瞎，最后都不一定能过得了设计师的像素眼鄙人不才，恰...
2020-03-14 15:14:14
2933
原创 编写可维护的现代化前端项目
本文其实可以看成是对 接手前端新项目？这里有些注意点你可能需要留意一下 的补充，主要是我在平时写代码过程中得到的一些经验使用 typescript忘了从哪里看到的一句话，意思是使用了 typescript的项目，将比不使用的项目体积多出 30%，当然，这多出来的 30%代码只是你本地需要写的代码，项目打包完毕后，是否使用 ts，项目体积基本上是一样大的ts的好处我就不多加赘述了，其最实用的就...
2020-03-14 15:13:10
481
1
原创 两万字长文-电商sku组合查询状态细究与实现
最近做到一个需求，需要做一个类似于京东或者淘宝等电商的商品详情页，其中有一个功能就是商品SKU的选择查询问题如上图，网络类型、机身颜色、套餐类型、存储容量这些每一个都是一个 SKU属性，当选择好了所有的 SKU属性后，会组合成一个完整的 SKU，对应一个具体的商品，然后就可以给出这条 SKU对应的商品的库存和价格等信息并且，当点选了某些 SKU属性后，会自动根据当前已经点选的 SKU属性，来...
2019-11-11 22:34:38
801
原创 解放双手-vue语法自动转typescript
代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 npm包就行了，但是业务代码的复用就不好做成包了，一般都是复制粘贴我一般写代码的时候，如果觉得某段业务代码以前见过其他人写过，那么考虑到业务优先性，只要别人的代码不是写得太烂，我一般会优先抄别人的代码，省得自己再写一遍然后我就遇到了一个问题，公司目前前端项目大部分都是 vue，早期没有 ts这...
2019-09-17 14:06:26
845
原创 vscode扩展之根据Vue模板自动生成Sass结构
某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候，template大概布局写完后，对着 template结构写 scss是件比较耗时耗力的事情，如果能作出一个自动依据 template结构生成 scss文件的 vscode插件就好了我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode扩展的开发文档，就上手 code了，做出来后效果还不错，最起码不用再...
2019-08-09 15:39:45
1532
2
原创 canvas绘制雷达图
最近做的一个需求，场景之一是绘制一个雷达图，找了一圈，似乎 AntV 下的 F2 很适合拿来主义：但是接着又考虑了一下，我当前所做的项目并不是可视化项目，今后大概率也不会有这种可视化图表的需求，只是为了单个需求一两个图表就引入一个可视化库，性价比有点低，辛辛苦苦优化下来的代码体积，就因为一个冗余的代码库一下子回到解放前，那可真要不得（虽然 F2已经够精简的了）再加上我刚好对于 canvas这...
2019-05-28 22:16:56
2155
原创 canvas&&CSS&&SVG三种实现仪表盘的方式
先上效果图：这种图形大家应该都见过，俗称仪表盘，当然，上图只是个最基本的仪表盘架子，可能在实际场景中还会其他很多花里胡哨的点缀，那些暂且不管，不是关键，这东西经常见到，但还没亲自上手在代码层面实现过，最近做的一个需求恰好有这个场景，这里归纳一下Canvas 实现大部分情况下，对于这种偏可视化的元素，一般都选择使用 canvas来进行绘制，现在已经 9120年了，线上使用 canvas完全没...
2019-05-28 22:12:52
2546
1
原创 从源码看Vue的响应式原理
前段时间把 vue源码抽时间看了一遍，耐心点看再结合网上各种分析文章还是比较容易看明白的，没太大问题，唯一的问题就是看完即忘当然了，也不是说啥都不记得了，大概流程以及架构这些东西还是能留下个印象的，对于 Vue的构建算是有了个整体认知，只是具体到代码级别的细节很难记住多少，不过也情有可原嘛，又不是背代码谁能记住那么多逻辑绕来绕去的东西？不过嘛，如果能加深对这些细节的印象那也是最好不过了，于...
2019-04-10 10:39:25
622
原创 跟混乱的页面弹窗说再见
对于一些快速迭代的产品来说，特别是移动端 C端产品，基于用户运营的目的，在 app首页给用户展示各种各样的弹窗是很常见的事情，在产品初期，由于迭代版本和运营策略变化地还不是太大，所以可能觉得没什么，但当产品运营到后期，各种八竿子打不着的运营策略轮番上阵，弹窗的样式、逻辑等都变了不知道多少遍的时候，问题就出来了由于前期没有做好规划，首页的弹窗组件可能放了十多个甚至更多，不仅是首页有，首页内又引入...
2019-04-08 10:42:10
433
1
原创 小tips-一种移动端模拟实现返回拦截的方案
移动端作为互联网重要入口，切图仔前端工程师开发移动端页面早已是司空见惯的事了，并且其中大部分都是内嵌于客户端(app，小程序)的 h5页面，即 webview有次被同事问到一个问题，他有个需求，是一个内嵌在客户端app内的页面，有个功能点是拦截客户端的返回操作，实现页面内弹层的显示与隐藏，拦截点包括 app页面上自带的返回按钮以及安卓机的物理按钮，类似于下面这种：点击购物车，则购物车元素从页...
2019-03-20 11:33:18
362
原创 React SSR（服务器端渲染） 细微探究
最近看了下 React SSR相关的东西，这里记录一下相关内容本文实例代码已经上传到 github，感兴趣的可参见 Basic | SplitChunkV初识 React SSRnodejs遵循 commonjs规范，文件的导入导出如下：// 导出module.exports = someModule// 导入const module = require('./someModul...
2019-03-03 14:27:17
1726
原创 让动画变得更简单之FLIP技术
某次被问到如何实现以下动画效果：若干个元素卡片从上而下排列，当增加或删除某个卡片的时候，其余的卡片会以一种 transition动画的形式移动到适当的位置上，而不是生硬地闪现当时我恰好看过 Vue中的内置组件 transition的实现，意识到完全可以用 transition组件的部分原理来完成这个效果，但是由于没有深入地探究过为什么是这样，只停留在表面，知其然而不知其所以然，所以尽管我知道...
2019-03-03 14:25:29
2791
原创 造轮子之图片预览组件(preview)
图片放大预览是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品详情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：打开冰箱 启动 Github搜索 photo、preview、carousel、photoSwipe等关键字找到想要的库，npm install之这种做法没毛病，有现成的轮子可用当然拿来...
2019-01-08 10:29:45
1155
原创 造轮子之图片轮播组件(swiper)
图片轮播是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品详情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：打开冰箱 启动 Github搜索 swiper、slider、Album等关键字找到想要的库，npm install之这种做法没毛病，有现成的轮子可用当然拿来主义，因为项目用的是 vue，所...
2019-01-03 10:55:05
1147
原创 Vuex 源码概览
本文以 vuex v3.0.1版本进行分析installvuex提供了一个 install方法，用于给 vue.use进行注册，install方法对 vue的版本做了一个判断，1.x版本和 2.x版本的插件注册方法是不一样的：// vuex/src/mixin.jsif (version >= 2) { Vue.mixin({ beforeCreate: vuexInit }...
2018-11-09 12:25:59
358
原创 小tip - 一种图片加载状态效果的实现
做的一个需求，其中有一个是实现类似于下图的一个图片上传效果：从本地上传图片到服务器，然后服务器响应返回这个图片在服务器上的链接地址，将这个链接地址所对应的图片显示到屏幕上，并且在此图片资源完全下载下来之前，呈现一个动态 loading的展位图，直到图片完全下载后进行替换小tip这是个很常见的需求，关键点在于检测图片的加载完成事件，一般的做法是，先将 img标签的 src属性指向一个当图片加...
2018-11-03 12:17:47
1118
1
原创 React事件机制 - 源码概览（下）
上篇文档 React事件机制 - 源码概览（上）说到了事件执行阶段的构造合成事件部分，本文接着继续往下分析批处理合成事件入口是 runEventsInBatch// runEventsInBatch// packages/events/EventPluginHub.jsexport function runEventsInBatch( events: Array<React...
2018-10-27 13:48:52
584
原创 React事件机制 - 源码概览（上）
某次被问到 React事件机制的问题，关于这一块我确实不怎么清楚，因为平时大部分工作都是用 Vue，对于 React的熟悉程度只限于会用，具体实现逻辑还真没专门学习过，但是总不能就说自己不清楚吧，好在我了解 Vue的事件机制，于是就把 Vue的事件机制说了一遍，最后再来一句“我觉得 React应该和 Vue的差不多”后来我想了下应该没那么简单，于是网上搜了下相关文章，发现果然是被我想得太简单了，...
2018-10-27 13:39:04
1470
3
原创 vue-router源码概览
源码这个东西对于实际的工作其实没有立竿见影的效果，不会像那些针对性极强的文章一样看了之后就立马可以运用到实际项目中，产生什么样的效果，源码的作用是一个潜移默化的过程，它的理念、设计模式、代码结构等看了之后可能不会立即知识变现(或者说变现很少)，而是在日后的工作过程中悄无声息地发挥出来，你甚至都感觉不到这个过程另外，优秀的源码案例，例如 vue、react这种，内容量比较庞大，根本不是三篇五篇十篇...
2018-10-08 11:14:12
632
1
原创 自动解析 github仓库的目录列表
我在 github上有个维护时间比较长的 repository，开始时只有几个文件，后来文件数目逐渐增多，期间整理了好几次，现在已经整理成了好几个文件夹了，有时候想找某个文件的时候，但是不确定到底在哪个文件夹里面，于是就凭感觉一个一个文件夹试过去，层级少点还好，但是层级一多，就算是明确知道在哪个文件夹里，一层层点进去也要点好几次于是心中一动，就想着把当前仓库的目录结构列出来，直接写在 READM...
2018-09-27 16:51:17
2176
3
原创 Canvas 性能优化
最近对 html5小游戏有点兴趣，因为我感觉将来这个东西或许是前端一个重要的应用场景，例如现在每到某些节假日，像支付宝、淘宝或者其他的一些 APP可能会给你推送通知，然后点进去就是一个小游戏，基本上点进去的人，只要不是太抵触，都会玩上一玩的，如果要是恰好 get到用户的 G点，还能进一步增强业务，无论是用户体验，还是对业务的发展，都是一种很不错的提升方式。另外，我说的这个 html5小游戏是包括...
2018-09-21 12:52:01
4383
1
原创 页面间通信与数据共享解决方案简析
最近在看微服务方面的东西，看到关于 多个微服务页面间通信和数据共享的解决方案，发现了一些比较陌生的 API，说是陌生其实专门拿出来也能说出个所以然来，也知道是个什么东西，但就是不熟练，凭空想的话就很难能想到，看了一下觉得有些门道，于是索性扩展开来整理了一下BroadcastChannelBroadcast 也是“广播”的意思，将信号广播出去，允许其他人接听。此 API允许同一原始域和用户代理...
2018-09-19 10:02:00
1098
原创 接手前端新项目？这里有些注意点你可能需要留意一下
前段时间加入公司内一个新开业务线的前端组，由于是新开的业务线，做的也是小程序这一块，所以几乎没有任何历史包袱，组内成员都是项目代码第一手产出者我加入的时机较晚，没有经历过最开始的初创阶段，不太清楚一开始的状况，不过听说是蛮折磨人的，需要踩坑无数，经常需要加班(虽然互联网行业加班本来就是常态，不过现在熬过初始阶段就好多了)，这让我即庆幸又遗憾，庆幸的是我不用加班那么晚了，遗憾的是，没有参与到一条...
2018-09-13 11:17:34
1738
原创 小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案
最近做的一个需求，遇到一个问题，小程序绘图目前只支持 px单位，设计图一般是以 iphone6为基准设计，如果严格 iphone6的尺寸进行代码编写，放在其他尺寸的设备上，肯定是不行的，所以需要按照设备进行等比例兼容，这里给出两个解决方案先假设一个需求，下面是最终实现的效果(以 iphone6为基准)，下面就以此为目标进行展开 整个页面被 canvas组件覆盖(在 iphone6下...
2018-09-10 12:35:39
2006
原创 将自己在CSDN上的文章下载到本地并上传到掘金
CSDN 算是一个老牌技术网站了，很多喜欢写文章的人，一开始都是在 CSDN上发布，但是可能由于某些原因，有的人想把自己在 CSDN上的文章放到其他的网站上(嗯，比如掘金)，但是由于在 CSDN上发布的文章数量很多，一篇篇复制粘贴下来理论上是可行的，就是手酸了点。不过，作为技术型体力劳动者人才，重复一种动作几十甚至上百遍未免有点丢失 biger，想起前段时间我花费了 大量时间 翻译的 Pupp...
2018-08-28 10:40:18
3559
2
原创 微信小程序 canvas圆角矩形的绘制
微信小程序允许对普通元素通过 border-radius的设置来进行圆角的绘制，但有时候在使用 canvas绘图的时候，也需要圆角，例如需要将页面上某块区域导出为图片下载到本地的时候，常用的解决方法就是使用 canvas将这块区域绘制出来，最后导出 canvas即可，但是 canvas没有直接提供圆角的绘制 api，所以需要 曲线救国圆角矩形与一般矩形的区别在于，前者的四个角都是圆弧，所以...
2018-08-22 13:00:54
15464
5
原创 小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法
最近做的一个小程序需求，其中一个页面使用到了 textarea这个小程序组件，然后点击页面上的某个元素，会触发页面弹起一个弹窗，这时发现 textarea的 placeholder文字或者输入的文字内容，会直接穿透遮罩层和浮动弹窗，显示在最上面，开始时我以为是遮罩层和浮动弹窗的层级舍得小了，于是改大，谁知道没用，改到了 99999也没用，于是我意识到这应该不是我代码的问题，网上一搜，果然有故事。...
2018-08-08 17:07:02
20592
2
原创 vue实现一个动效柱状图
接手了一个需求的时候，其中有个 UI图是这样的：按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码...
2018-08-04 22:12:02
3871
原创 动手写一个简单的浏览器扩展插件 - markdown文件本地预览
平时写文档的时候，一些简单的文档都用 markdown来写，编辑工具自然是随便用的，记事本、vs code或者专门的 md编辑器都可以，但是想要预览的时候，却有一定的限制，例如我想用 vs code预览 md文件，就必须装一个专门的插件，或者干脆就要开启一个 md编辑器才行，而我的本意其实仅仅是想预览一个写好的 md文档，不会做任何的改动，上面几种做法也不费什么事，但未免有些多余，毕竟，代码编辑器...
2018-07-03 15:05:19
7531
3
翻译 Puppeteer v1.5.0 中文翻译
最近用到了 Puppeteer 这个库，既然用到了这个东西，顺便也就把它的 API给看了一遍，为了加深印象，在看的同时也就顺便翻译了一下，不过这API文档的内容量还是蛮大的，花费了好些时间才看完，有些地方不知道怎么翻译比较好，所以也就没翻译，有的地方可能官方说得不怎么详细，我也加了一点主观意见。Table of Contents - Overview - Environment...
2018-06-29 20:56:54
9394
3
原创 webpack多入口文件页面打包配置
大多数情况下，我们使用 webpack来打包单页应用程序，这个时候只需要配置一个入口，一个模板文件，但也不尽是如此，有时候也会碰到多页面的项目，而且以我的经验来看，这种情况出现的频率还不低，例如项目比较大，无法进行全局的把握，或者项目需要多次的更新迭代等，都适合做成多页面程序，这就涉及到了 webpack的多页面文件的打包配置问题。手动配置单页应用程序和多页应用程序的 webpac
2018-01-08 17:42:20
17205
原创 基于Ace和CodeMirror打造markdown 输入 + 即时预览在线编辑器
Ace CodeMirror markdown 即时预览 在线编辑器
2017-12-27 12:38:48
8132
1
通过NodeJS中的http.get() 和 http.request()模块两种方法，调用中国天气api
2016-10-09
通过NodeJS中的http.get 和 http.request模块两种方法，调用中国天气api
2016-10-09
NodeJs+Angular+Mongodb Web开发（2）
2016-10-09
NodeJs+Angular+Mongodb Web开发（1）
2016-10-08
NodeJs+Express4.x+Mongodb搭建电影网站
2016-09-19
无力吐槽，vscode如何关闭自动保存功能?
2016-11-16
react-native中，将文件的绝对路径转为URI
2016-11-14
react-native测试安装返回404
2016-10-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人