三

三省吾身丶丶

https://blog.guowenfh.com/

https://blog.guowenfh.com/atom.xml (RSS订阅地址)

从一个简单功能的实现，谈谈 react 中的逻辑复用进化过程

<blockquote> 需求：我们现在有一个获取验证码的按钮，需要在点击后禁用，并且在按钮上显示倒计时60秒才可以进行第二次点击。 本篇文章通过对这个需求的八种实现方式来讨论在 react 中的逻辑复用的进化过程 </blockquote> <img src="https://tva1.sinaimg.cn/large/006y8mN6ly1g72uk6zdtqj30k00fxwfe.jpg"> 代码例子放在了 <a class="exturl__link" href="https://codesandbox.io/s/kind-herschel-l4f9h?fontsize=14" >codesandbox</a> 上。

2019/9/17

在 vue 中使用 jsx 与 class component 的各种姿势

<blockquote> 在之前我们分享过一次 <a class="exturl__link" href="https://blog.guowenfh.com/2019/04/28/2019/react-development-description-vue/" >一个使用 react 的思想去使用 vue 的方式</a>。 随着组内很多时候为了让 view 层更加清晰，和一些复杂的逻辑处理，导致现在 vue 代码中 jsx 的代码越来越多，这里进行一个整理说明 </blockquote>

2019/9/17

使用 generic-pool 优化 puppeteer 并发问题

<blockquote> 这个篇文章产生时间应该是在一年前的。。由于最近组里进了很多新小伙伴，写下这篇文章算是补一个介绍吧。 在17年的 D2 百度的小姐姐分享的话题《打造前端复杂应用》时有提到利用服务端产生图片来导出脑图和 h5 图片的问题，正好那段时间也正在做这个方向的探索于是有《<a class="exturl__link" href="https://blog.guowenfh.com/2018/03/05/2018/canvas-text-to-image-clarity/" >一次canvas中文字转化成图片后清晰度丢失的探索</a> 》这篇文章的产生。里面提到了在之前我使用了 phantomjs 来解决服务端页面渲染的问题。当然后面我们改成了 puppeteer。由于其实都是虚拟浏览器，两者都遇到了浏览器复用的问题。 </blockquote>

2019/6/16

再谈中文字体的子集化与动态创建字体

<blockquote> 其实在项目中用中文字体子集化已经很久了，在刚接受到项目时真的让用户去下载全量字体的方式也早已被废除。如今终于有时间将它整理成文。算是对这件事情的一个基本了结吧。 </blockquote> <h2 id="为什么要截取字体？" > <a href="#为什么要截取字体？" class="heading-link"></a><a href="#为什么要截取字体？" class="headerlink" title="为什么要截取字体？"></a>为什么要截取字体？</h2> 众所周知，相对于英文字体，中文字体就是一个“庞然大物”。英文字体 <code>200～300KB</code> 已经很大了，而中文字体动戈 <code>10~30MB</code>。 这主要是两个方面的原因： <ol> <li>中文字体包含的字形数量极多英文字体则只需包含几十个基本字符和符号。有些中文字体还要包括韩语和日语的字形。</li> <li>中文字形的曲折变化复杂度高，用于控制中文字形曲线的控制点普遍比英文更多，由于数据量不一样，字体大小也自然就有这样的膨胀了</li> </ol>

2019/6/4

《张乌梅的日记》摘录

08年2月3日阴 胡老师走了，我想世界上再没有这样的老师了。好人有好报吗？骗人的！ 2月4日晴 村子来了个人，好像是胡老师的男朋友，不喜欢他，因为他一年里一次都没有来看过胡老师，胡老师明显是很想他的，胡老师，那是叫思念吗？ 2月7日晴 胡老师的爸妈，还有那个人，都在村里过年了，听人说那个人昨天晚上喝了很多酒，在操场上吐，吐出血了，真的吗？他是在伤心吗？如果是的，我就不那么讨厌他了。 2月13日大雨 那个人又去山上了，这么大雨，他不怕吗？

2019/5/28

一个使用 react 的思想去使用 vue 的方式

<blockquote> 有一个 react 开发者问我 vue 如何上手开发？然后我是这么和他描述的。。 用 react 的思想去考虑 vue 要怎么写。 本文很水。而且将来感觉一定会被打脸，期待那一天到来。 </blockquote>

2019/4/28

React 项目构建

<blockquote> 在很久之前在知乎回答过一个问题：<a class="exturl__link" href="https://www.zhihu.com/question/263620922/answer/273687900" >公司要求统一一套前端脚手架，该怎么选择？</a> 在那个时候推荐了使用了魔改 <code>vue-cli@2</code> 来实现 <code>react</code> 的基础脚手架，让 <code>react</code> 以及 <code>vue</code> 能够基本使用同一个模式的脚手架。 在之后也将他开源了出来：<a class="exturl__link" href="https://github.com/guowenfh/vue-cli-react-base/tree/base" >vue-cli-react-base 最基础的实现</a> </blockquote>

2019/4/11

从一个简单的实例看 JavaScript 的异步编程进化历

<img src="https://ws4.sinaimg.cn/large/0069RVTdgy1fuwvkqjzvdj30k00bnmym.jpg" alt="回调地狱"> <blockquote> 很久没有进行过创作了，也感觉到了自己的不足。这一篇文章是对于 JavaScript 异步编程的一个整理 希望自己更多的成为一个创造者，而不是只会看，会用，还需要深入理解到原理吧。 </blockquote> 例子如下： <blockquote> 我们有 A, B, C, D 四个请求获取数据的函数（函数自己实现）， C 依赖 B 的结果，D 依赖 ABC 的结果，最终输出 D 的结果。 </blockquote>

2018/9/3

webpack入坑之旅（零）简介与升级

<h2 id="webpack-基础中的基础。" > <a href="#webpack-基础中的基础。" class="heading-link"></a><a href="#webpack-基础中的基础。" class="headerlink" title="webpack 基础中的基础。"></a>webpack 基础中的基础。</h2> 升级了一下两年前写的这个教程，前端变化太快了，里面很多示例已经跑步起来，终于愿意花时间来更新一下了。非常基础！！ 记录 vue-webapck 的学习基础，代码示例 <a class="exturl__link" href="https://github.com/guowenfh/vue-webpack" >github地址</a> 2018-08-05最新更新：本教程已升级至 webpack4 ，旧的代码在 webpack1-backup 分支。将原来教程中部分不正确的地方也已经剔除。不过难免还有错误之处，欢迎指正。 代码示例位于 webpack 文件夹中。已经把所有练习的<code>node_modules</code>移除，若要正常使用，请安装运行<code>npm install #推荐 cnpm </code>。 然后再根据文中的指令，进行打包、编译等操作。重要的是在运行过程中体会。学习。 教程目录: <ul> <li><a href="//guowenfh.github.io/2016/03/24/vue-webpack-01-base/">webpack入坑之旅（一）不是开始的开始</a></li> <li><a href="//guowenfh.github.io/2016/03/24/vue-webpack-02-deploy/">webpack入坑之旅（二）loader入门</a></li> <li><a href="//guowenfh.github.io/2016/03/24/vue-webpack-03-config/">webpack入坑之旅（三）webpack.config入门</a></li> <li><a href="//guowenfh.github.io/2016/03/24/vue-webpack-04-custom/">webpack入坑之旅（四）扬帆起航</a></li> <li><a href="//guowenfh.github.io/2016/03/25/vue-webpack-05-vue/">webpack入坑之旅（五）加载vue单文件组件</a></li> <li><a href="//guowenfh.github.io/2016/03/28/vue-webpack-06-router/">webpack入坑之旅（六）配合vue-router实现SPA</a></li> </ul>

2018/8/5

中文播客推荐

<blockquote> 从大学时期听书开始，慢慢接触到更多的播客。听一些人讲故事，讲技术，感觉也是一个非常不错的了解世界的途径。已经成为我生活中的一部分。不过从身边感觉到播客还是比较小众的。于是想推荐一下我在听的一些播客吧。 引用一句《内核恐慌》的话作为推荐语：“我们虽然号称 Hacker ，但是也没有干货，想听的人就听，不想听的人就别听。” </blockquote> 推荐播客客户端： Moon FM，播客，小宇宙，player.fm <h2 id="IT-技术主题" > <a href="#IT-技术主题" class="heading-link"></a><a href="#IT-技术主题" class="headerlink" title="IT 技术主题"></a>IT 技术主题</h2> <h3 id="《内核恐慌》" > <a href="#《内核恐慌》" class="heading-link"></a><a href="#《内核恐慌》" class="headerlink" title="《内核恐慌》"></a>《内核恐慌》</h3> <img src="https://ws4.sinaimg.cn/large/006tKfTcgy1fpp7nosof8j3074074dfr.jpg" alt="内核恐慌"> <blockquote> 《内核恐慌》(Kernel Panic) 是吴涛和 Rio 做的播客，首播于 2014 年 10 月。号称硬核，可也没什么干货。想听的人听，不想听的人就别听。 </blockquote> <a class="exturl__link" href="https://kernelpanic.fm/feed" >rss</a> 推荐： <ul> <li>类型系统</li> <li>并发与异步</li> <li>数学与编程</li> </ul>

2018/6/16

学习 Promise，掌握未来世界 JS 异步编程基础

<blockquote> 其实想写 Promise 的使用已经很长时间了。一个是在实际编码的过程中经常用到，一个是确实有时候小伙伴们在使用时也会遇到一些问题。 Promise 也确实是 ES6 中对于写 JS 的方式，有着真正最大影响的 API 特性之一。 本文是实际使用使用过程中的一个总结 看一下文件创建时间 2017-10-09，拖延症真是太可怕了。。。还是得增强执行力啊！不忘初心，加油吧！ </blockquote> <h2 id="前言-amp-amp-基础概念" > <a href="#前言-amp-amp-基础概念" class="heading-link"></a><a href="#前言-amp-amp-基础概念" class="headerlink" title="前言 && 基础概念"></a>前言 && 基础概念</h2> Promise 是解决 JS 异步的一种方案，相比传统的回调函数，Promise 能解决多个回调严重嵌套的问题。 Promise 对象代表一个异步操作，有三种状态: <code>pending、fulfilled 或 rejected</code> ，状态的转变只能是 <code>pending -> fulfilled</code> 或者 <code>pending -> rejected</code> ，且这个过程一旦发生就不可逆转。

2018/6/3

2017 杭州 nodeParty 记录

<blockquote> 本文记录于 2017 杭州丁香园 nodeParty 期间，由于是流水帐式记录，一直都偷懒没发。最近心态又有点改变，抽了一点时间来发布。 </blockquote> <hr> <blockquote> 最近在工作中的任务对于 node 的任务越来越重了，正好看到新一期的 Node Party 开办了，于是当天就报名了，想看看大家是怎么在用 Node.js 的。 好了，废话不多说，我来从时间顺序来聊一下我参加这次会议听到的东西 </blockquote>

2018/3/11

一次canvas中文字转化成图片后清晰度丢失的探索

<blockquote> 本文最初记录在 2017 年 D2 期间。知乎问题为：参加第12届D2前端技术论坛，你有什么收获？ 主要是想说一下百度的小姐姐分享的话题《打造前端复杂应》。 </blockquote> 最近正好接手了这样一个类似的项目，（百度 h5 百度脑图）不过整体全是基于 canvas 的，而且也没有事件广播，没有数据驱动，没有模型，全是直接 jquery 直接操作 DOM 的。整体感觉很混乱。现在一个人维护，改起来，感觉很忧伤。 不过听完分享之后，不管是事件广播，还是直接数据的双向绑定，都让我多了很多思路去改造。目前第一步就是先加入了 webpack、ES6、React、PubSub ，先把之前的 jquery 逐渐干掉吧。 <hr> 不过小姐姐提到百度脑图和百度 H5 分别使用 SVG 以及原生 DOM 来实现的，这样当然没什么问题，不过也提到为什么没用 canvas 的原因，主要是事件绑定，元素选择相关的等等一些方面的考虑。 但是实际上，根据我项目的使用来说，直接使用 canvas 也是可以的，基本能解决掉提出来的顾虑，当然主要是有这个强大的开源 canvas 操作库： <a class="exturl__link" href="http://fabricjs.com/" >fabric.js: Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser </a> 事件，动画，选中，变换，loadJOSN()，toJSON() 。强大之处，不太好用几句话说清楚，部分功能如下图，建议官网体验: <img src="https://ws1.sinaimg.cn/large/006tKfTcgy1fp2cew4ofqj30uw0uu0xs.jpg">

2018/3/5

从零学习 canvas (一)

<blockquote> 由于上一篇描述的原因。有图像处理的需求，于是我就开始学习 canvas 啦，和以前的一样，这一篇也是一边学一边写，敲出来的。有不正确的地方，欢迎指出。 canvas 本身的 api 描述是比较简单，但是衍生出来的东西，操作，图像处理，动画，性能，还是非常的多的。所以对于 canvas 的学习不出意外的话，将会是一个系列。这就是第一篇了。下面就开始吧 </blockquote> <h2 id="前言" > <a href="#前言" class="heading-link"></a><a href="#前言" class="headerlink" title="前言"></a>前言</h2> <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><canvas id="canvas" style="background:blue;">浏览器不支持canvas</canvas> </pre></td></tr></table></div></figure> 在不支持 canvas 的浏览器中，显示标签中的内容。 绘图区域默认是 300 x 150。 canvas 中的宽高是实际的宽高，css 中的宽高会等比缩放。 在开始绘图之前需要先，获取绘图环境。 <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>const canvas = document.querySelector('#canvas'); if(canvas.getContext){ const context = canvas.getContext('2d'); // .... 绘制 } </pre></td></tr></table></div></figure>

2017/10/24

浅谈 electron 中的 session 管理（隔离）

<blockquote> 已经有很长一段时间没有产出博客了。 一. 是因为花了很多时间去专研业务，能够做到目前的基本业务流程理清，大致了然于胸（导致了一个问题：有人找我解决问题，我可能会先问一句，你的需求是什么？） 二. 确实是自己这一段时间确实懈怠了，每天上班回去就不想敲代码了，看看剧，看看小说，刷刷微博。虽然在组内有过一些分享，整理过一些东西，但是却没有将其在博客产出了。 这样的情况，让我明显的感觉到自己的成长速度相对于第一年成长的速度，慢了几个等级。这让我有一种危机感，于是克服这种懈怠，跳出舒适区，继续强健自己。重新回归吧。 最后。还是引用这个博客的描述：”兴趣遍地都是，专注和坚持才是真正稀缺的。” </blockquote> 不多说了，开始吧。 <h2 id="基础介绍" > <a href="#基础介绍" class="heading-link"></a><a href="#基础介绍" class="headerlink" title="基础介绍"></a>基础介绍</h2> <blockquote> 由于公司的项目内部调整，有幸接触 2 个星期的 electron 开发。（然后我又被拥抱变化了。。）实现了一个多账号的切换，并且同时对于多账号的聊天窗口做一个浏览器 tab 的集成的需求，这里对于接触到的知识点，做一个总结。以免完全忘记(忽略代码规范，我自己都看不下去) </blockquote> <a class="exturl__link" href="https://wizardforcel.gitbooks.io/electron-doc/content/faq/electron-faq.html" >electron-中文文档</a>

2017/10/21

FlexBox 布局详解

<blockquote> 很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! </blockquote> flex 弹性布局 FlexBox 可控制子元素: <ul> <li>水平或垂直排成一行</li> <li>控制子元素的对齐方式</li> <li>控制子元素的高度／宽度</li> <li>控制子元素的显示顺序</li> <li>控制子元素是否折行</li> </ul> ** <code>display:flex;</code> 创建 Flexbox 元素 ** 在 flex 布局中必须理解的概念就是区分主轴和辅轴(侧轴): <img src="https://ws1.sinaimg.cn/large/82d12951gy1fg4x85jz1oj21420ei0ty.jpg">

2017/5/31

HTML5常用标签分类

<blockquote> 文章是很早之前的笔记，做了一些属性上的补充，现发布到博客中来 </blockquote> <a class="exturl__link" href="https://www.h5jun.com/post/html5-element-flowchart.html?utm_source=tuicool&utm_medium=referral" >十年踪迹的博客：HTML5 元素选择流程图</a> <img src="https://p3.ssl.qhimg.com/t01d712cd34f492117d.png" class="full-image" art="如何选择标签"/>

2017/4/21

ES6 简单特性学习记录

<h2 id="变量定义的新方式：let-const" > <a href="#变量定义的新方式：let-const" class="heading-link"></a><a href="#变量定义的新方式：let-const" class="headerlink" title="变量定义的新方式：let/ const"></a>变量定义的新方式：<code>let</code>/ <code>const</code></h2> <code>let</code> 特性： <ol> <li>不允许重复声明</li> <li>没有变量提升（预解析）</li> <li>块级作用域（一对 <code>{}</code> 包括的区域称为一个代码块，<code>let</code> 声明的变量只在该代码块起作用）</li> </ol> 例子1 ：简单的打印数据 使用 <code>var</code>: <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>for(var i = 0; i<10 ; i++ ){ setTimeout(()=>console.log(i)) // 执行10次，全都打印 10 } </pre></td></tr></table></div></figure> 使用 <code>let</code>: <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>for(let i = 0; i<10 ; i++ ){ setTimeout(()=>console.log(i)) // 执行10次，打印 0 - 9 } </pre></td></tr></table></div></figure> 之前我们要实现这样的打印，必须使用闭包： <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>for(var i = 0; i<10;i++){ (function(j){ setTimeout(()=>console.log(j)) // 执行10次，打印 0 - 9 })(i) } </pre></td></tr></table></div></figure>

2017/3/1

一张图学习 ES6 中的 React 生命周期与流程

如题。 一张图学习 ES6 中的 React 生命周期与流程。 <img src="https://ws1.sinaimg.cn/large/82d12951gy1fj405g3bdkj20z1152af1.jpg" class="full-image" art="ES6中的React生命周期与流程"/>

2017/2/5

2017，一切才刚刚开始。

又是一年结束，明天就是2017了，这一年做了很多事：实习、毕业、工作。广州、丽江、重庆、北京、长沙、杭州、走了5个城市。开心、懊恼、苦涩各种心境。从一个编程的门外汉真正成为了一个初级前端开发工程师。也算是人生又一个新的起点吧。 <h2 id="博客" > <a href="#博客" class="heading-link"></a><a href="#博客" class="headerlink" title="博客"></a>博客</h2> 先说说博客，从第一篇博客开始到现在一年零一个月了。一共 50 篇，博客总字数为：338202，产量不算高。不过值得高兴的是一年下来总流量量有 <code>15W</code>，应该还算不错吧。不仅是对自己学习的一个记录，应该也帮助到了不少人。终于把域名买了 <a class="exturl__link" href="http://blog.guowenfh.com/" >blog.guowenfh.com</a> <img src="https://ww4.sinaimg.cn/large/006tKfTcgw1fbab295cyqj31kw1hah2h.jpg" alt="博客访问统计">

2016/12/31