<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Quiet-Night的博客]]></title><description><![CDATA[Talk is cheap, Show me the Code]]></description><link>https://blog.youkuaiyun.com/DeepLies</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; DeepLies]]></copyright><item><title><![CDATA[直接告诉你这些常用正则表达式是怎么写出来的]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/123425556</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/123425556</guid><author>DeepLies</author><pubDate>Fri, 11 Mar 2022 15:12:52 +0800</pubDate><description><![CDATA[作为一名程序员，不会写正则表达式总感觉少了点什么，不要求你能把正则玩出花来，但最起码要对常用的正则表达式手到擒来，刚毕业的我对于正则也是一头雾水，不过学会它也就一篇教程的事情
本文我不会再浪费带宽把正则的规则再次重复一遍，而是从实际入手，直接告诉你为什么这么写
16进制颜色
按照规则来

以 # 开头
后面紧跟着6个字符或者3个字符作为结尾，这些字符可以是 a-f 的小写字母、A-F的大写字母、数字

第一句，可以写成 /^#/；第二句，[a-fA-F0-9] 表示任意的 a-f、A-F、0-9，6或 3的]]></description><category></category></item><item><title><![CDATA[从源码看Babel是如何编译Async和Generator函数的]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/104860921</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/104860921</guid><author>DeepLies</author><pubDate>Sat, 14 Mar 2020 15:15:05 +0800</pubDate><description><![CDATA[某次面试场景：
面试官：你知道 async/await 吗？
我：有所了解（心中窃喜，看来下面要问我事件循环方面的东西了，马上给你倒着背出来，稳得很）
面试官：那请你说下 Bable 是如何处理 async/await 的？ 或者直接描述一下相关 polyfill 的原理
我：。。。（怎么不按套路出牌？）
我确实不知道这个东西，但为了避免尴尬，我只能秉持着虽然我不知道你说的这个东西但气势不能弱了一...]]></description><category></category></item><item><title><![CDATA[前端UI设计稿对比工具 - chrome+webpack插件]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/104860908</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/104860908</guid><author>DeepLies</author><pubDate>Sat, 14 Mar 2020 15:14:14 +0800</pubDate><description><![CDATA[（切图仔）前端开发者一大重要的职责就是将 UI画稿转化为实际可用的页面，效果图的还原度在相当大的程度上决定了 UI 和 PM的满意度
一般情况下，拿到设计稿后，懒散点的可能直接看图软件打开，肉眼测距就开搞了，负责点的会打开 PS或者更正规的 Photoshop，力图精确到 px，这两种方法各有利弊，前者的还原度大概率堪忧，后者耗时耗力，能把眼睛看瞎，最后都不一定能过得了设计师的像素眼
鄙人不才，恰...]]></description><category></category></item><item><title><![CDATA[编写可维护的现代化前端项目]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/104860884</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/104860884</guid><author>DeepLies</author><pubDate>Sat, 14 Mar 2020 15:13:10 +0800</pubDate><description><![CDATA[本文其实可以看成是对 接手前端新项目？这里有些注意点你可能需要留意一下 的补充，主要是我在平时写代码过程中得到的一些经验
使用 typescript
忘了从哪里看到的一句话，意思是使用了 typescript的项目，将比不使用的项目体积多出 30%，当然，这多出来的 30%代码只是你本地需要写的代码，项目打包完毕后，是否使用 ts，项目体积基本上是一样大的
ts的好处我就不多加赘述了，其最实用的就...]]></description><category></category></item><item><title><![CDATA[两万字长文-电商sku组合查询状态细究与实现]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/103019921</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/103019921</guid><author>DeepLies</author><pubDate>Mon, 11 Nov 2019 22:34:38 +0800</pubDate><description><![CDATA[最近做到一个需求，需要做一个类似于京东或者淘宝等电商的商品详情页，其中有一个功能就是商品SKU的选择查询问题

如上图，网络类型、机身颜色、套餐类型、存储容量这些每一个都是一个 SKU属性，当选择好了所有的 SKU属性后，会组合成一个完整的 SKU，对应一个具体的商品，然后就可以给出这条 SKU对应的商品的库存和价格等信息
并且，当点选了某些 SKU属性后，会自动根据当前已经点选的 SKU属性，来...]]></description><category></category></item><item><title><![CDATA[解放双手-vue语法自动转typescript]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/100924696</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/100924696</guid><author>DeepLies</author><pubDate>Tue, 17 Sep 2019 14:06:26 +0800</pubDate><description><![CDATA[代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 npm包就行了，但是业务代码的复用就不好做成包了，一般都是复制粘贴
我一般写代码的时候，如果觉得某段业务代码以前见过其他人写过，那么考虑到业务优先性，只要别人的代码不是写得太烂，我一般会优先抄别人的代码，省得自己再写一遍
然后我就遇到了一个问题，公司目前前端项目大部分都是 vue，早期没有 ts这...]]></description><category></category></item><item><title><![CDATA[vscode扩展之根据Vue模板自动生成Sass结构]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/98962253</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/98962253</guid><author>DeepLies</author><pubDate>Fri, 09 Aug 2019 15:39:45 +0800</pubDate><description><![CDATA[某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候，template大概布局写完后，对着 template结构写 scss是件比较耗时耗力的事情，如果能作出一个自动依据 template结构生成 scss文件的 vscode插件就好了
我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode扩展的开发文档，就上手 code了，做出来后效果还不错，最起码不用再...]]></description><category></category></item><item><title><![CDATA[canvas绘制雷达图]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/90648330</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/90648330</guid><author>DeepLies</author><pubDate>Tue, 28 May 2019 22:16:56 +0800</pubDate><description><![CDATA[最近做的一个需求，场景之一是绘制一个雷达图，找了一圈，似乎 AntV 下的 F2 很适合拿来主义：

但是接着又考虑了一下，我当前所做的项目并不是可视化项目，今后大概率也不会有这种可视化图表的需求，只是为了单个需求一两个图表就引入一个可视化库，性价比有点低，辛辛苦苦优化下来的代码体积，就因为一个冗余的代码库一下子回到解放前，那可真要不得（虽然 F2已经够精简的了）
再加上我刚好对于 canvas这...]]></description><category></category></item><item><title><![CDATA[canvas&&CSS&&SVG三种实现仪表盘的方式]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/90648265</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/90648265</guid><author>DeepLies</author><pubDate>Tue, 28 May 2019 22:12:52 +0800</pubDate><description><![CDATA[先上效果图：

这种图形大家应该都见过，俗称仪表盘，当然，上图只是个最基本的仪表盘架子，可能在实际场景中还会其他很多花里胡哨的点缀，那些暂且不管，不是关键，这东西经常见到，但还没亲自上手在代码层面实现过，最近做的一个需求恰好有这个场景，这里归纳一下
Canvas 实现
大部分情况下，对于这种偏可视化的元素，一般都选择使用 canvas来进行绘制，现在已经 9120年了，线上使用 canvas完全没...]]></description><category></category></item><item><title><![CDATA[从源码看Vue的响应式原理]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/89176219</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/89176219</guid><author>DeepLies</author><pubDate>Wed, 10 Apr 2019 10:39:25 +0800</pubDate><description><![CDATA[前段时间把 vue源码抽时间看了一遍，耐心点看再结合网上各种分析文章还是比较容易看明白的，没太大问题，唯一的问题就是
看完即忘

当然了，也不是说啥都不记得了，大概流程以及架构这些东西还是能留下个印象的，对于 Vue的构建算是有了个整体认知，只是具体到代码级别的细节很难记住多少，不过也情有可原嘛，又不是背代码谁能记住那么多逻辑绕来绕去的东西？
不过嘛，如果能加深对这些细节的印象那也是最好不过了，于...]]></description><category></category></item><item><title><![CDATA[跟混乱的页面弹窗说再见]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/89083311</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/89083311</guid><author>DeepLies</author><pubDate>Mon, 08 Apr 2019 10:42:10 +0800</pubDate><description><![CDATA[对于一些快速迭代的产品来说，特别是移动端 C端产品，基于用户运营的目的，在 app首页给用户展示各种各样的弹窗是很常见的事情，在产品初期，由于迭代版本和运营策略变化地还不是太大，所以可能觉得没什么，但当产品运营到后期，各种八竿子打不着的运营策略轮番上阵，弹窗的样式、逻辑等都变了不知道多少遍的时候，问题就出来了

由于前期没有做好规划，首页的弹窗组件可能放了十多个甚至更多，不仅是首页有，首页内又引入...]]></description><category></category></item><item><title><![CDATA[小tips-一种移动端模拟实现返回拦截的方案]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/88684327</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/88684327</guid><author>DeepLies</author><pubDate>Wed, 20 Mar 2019 11:33:18 +0800</pubDate><description><![CDATA[移动端作为互联网重要入口，切图仔前端工程师开发移动端页面早已是司空见惯的事了，并且其中大部分都是内嵌于客户端(app，小程序)的 h5页面，即 webview
有次被同事问到一个问题，他有个需求，是一个内嵌在客户端app内的页面，有个功能点是拦截客户端的返回操作，实现页面内弹层的显示与隐藏，拦截点包括 app页面上自带的返回按钮以及安卓机的物理按钮，类似于下面这种：

点击购物车，则购物车元素从页...]]></description><category></category></item><item><title><![CDATA[React SSR（服务器端渲染） 细微探究]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/88087897</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/88087897</guid><author>DeepLies</author><pubDate>Sun, 03 Mar 2019 14:27:17 +0800</pubDate><description><![CDATA[最近看了下 React SSR相关的东西，这里记录一下相关内容

本文实例代码已经上传到 github，感兴趣的可参见 Basic | SplitChunkV

初识 React SSR
nodejs遵循 commonjs规范，文件的导入导出如下：
// 导出
module.exports = someModule
// 导入
const module = require('./someModul...]]></description><category></category></item><item><title><![CDATA[让动画变得更简单之FLIP技术]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/88087881</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/88087881</guid><author>DeepLies</author><pubDate>Sun, 03 Mar 2019 14:25:29 +0800</pubDate><description><![CDATA[某次被问到如何实现以下动画效果：

若干个元素卡片从上而下排列，当增加或删除某个卡片的时候，其余的卡片会以一种 transition动画的形式移动到适当的位置上，而不是生硬地闪现
当时我恰好看过 Vue中的内置组件 transition的实现，意识到完全可以用 transition组件的部分原理来完成这个效果，但是由于没有深入地探究过为什么是这样，只停留在表面，知其然而不知其所以然，所以尽管我知道...]]></description><category></category></item><item><title><![CDATA[造轮子之图片预览组件(preview)]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/86063385</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/86063385</guid><author>DeepLies</author><pubDate>Tue, 08 Jan 2019 10:29:45 +0800</pubDate><description><![CDATA[图片放大预览是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品详情页的商品图片等位置都会用到此功能
像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：

打开冰箱 启动 Github
搜索 photo、preview、carousel、photoSwipe等关键字
找到想要的库，npm install之

这种做法没毛病，有现成的轮子可用当然拿来...]]></description><category></category></item><item><title><![CDATA[造轮子之图片轮播组件(swiper)]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/85681935</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/85681935</guid><author>DeepLies</author><pubDate>Thu, 03 Jan 2019 10:55:05 +0800</pubDate><description><![CDATA[图片轮播是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品详情页的商品图片等位置都会用到此功能
像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：

打开冰箱 启动 Github
搜索 swiper、slider、Album等关键字
找到想要的库，npm install之

这种做法没毛病，有现成的轮子可用当然拿来主义，因为项目用的是 vue，所...]]></description><category></category></item><item><title><![CDATA[Vuex 源码概览]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/83895877</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/83895877</guid><author>DeepLies</author><pubDate>Fri, 09 Nov 2018 12:25:59 +0800</pubDate><description><![CDATA[
本文以 vuex v3.0.1版本进行分析

install
vuex提供了一个 install方法，用于给 vue.use进行注册，install方法对 vue的版本做了一个判断，1.x版本和 2.x版本的插件注册方法是不一样的：
// vuex/src/mixin.js
if (version &amp;amp;gt;= 2) {
  Vue.mixin({ beforeCreate: vuexInit }...]]></description><category></category></item><item><title><![CDATA[小tip - 一种图片加载状态效果的实现]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/83685955</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/83685955</guid><author>DeepLies</author><pubDate>Sat, 03 Nov 2018 12:17:47 +0800</pubDate><description><![CDATA[做的一个需求，其中有一个是实现类似于下图的一个图片上传效果：

从本地上传图片到服务器，然后服务器响应返回这个图片在服务器上的链接地址，将这个链接地址所对应的图片显示到屏幕上，并且在此图片资源完全下载下来之前，呈现一个动态 loading的展位图，直到图片完全下载后进行替换
小tip
这是个很常见的需求，关键点在于检测图片的加载完成事件，一般的做法是，先将 img标签的 src属性指向一个当图片加...]]></description><category></category></item><item><title><![CDATA[React事件机制 - 源码概览（下）]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/83445655</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/83445655</guid><author>DeepLies</author><pubDate>Sat, 27 Oct 2018 13:48:52 +0800</pubDate><description><![CDATA[
上篇文档 React事件机制 - 源码概览（上）说到了事件执行阶段的构造合成事件部分，本文接着继续往下分析

批处理合成事件
入口是 runEventsInBatch
// runEventsInBatch
// packages/events/EventPluginHub.js
export function runEventsInBatch(
  events: Array&amp;amp;lt;React...]]></description><category></category></item><item><title><![CDATA[React事件机制 - 源码概览（上）]]></title><link>https://blog.youkuaiyun.com/DeepLies/article/details/83445579</link><guid>https://blog.youkuaiyun.com/DeepLies/article/details/83445579</guid><author>DeepLies</author><pubDate>Sat, 27 Oct 2018 13:39:04 +0800</pubDate><description><![CDATA[某次被问到 React事件机制的问题，关于这一块我确实不怎么清楚，因为平时大部分工作都是用 Vue，对于 React的熟悉程度只限于会用，具体实现逻辑还真没专门学习过，但是总不能就说自己不清楚吧，好在我了解 Vue的事件机制，于是就把 Vue的事件机制说了一遍，最后再来一句“我觉得 React应该和 Vue的差不多”
后来我想了下应该没那么简单，于是网上搜了下相关文章，发现果然是被我想得太简单了，...]]></description><category></category></item></channel></rss>