- 博客(35)
- 收藏
- 关注
RSS订阅原创 Webpack插件是如何编写的——prerender-spa-plugin源码解析
概述本文主要的内容是通过之前使用的prerender-spa-plugin插件的源码阅读，来看下我们应该如何编写一个webpack的插件，同时了解下预渲染插件到底是如何实现的。这个内容其实已经在使用prerender-spa-plugin里面有所涉及了，这一章的内容算是对之前一篇文章的补充和拓展，详细介绍下Webpack的插件机制到底是如何运行的，之前写的简单的替换的插件生效的原理到底是什么。如果大家还没有看之前的如何使用prerender-spa-plugin插件对页面进行预渲染这篇文章，可以
2021-10-03 22:17:43
459
原创 正则表达式是如何让你的网页卡住的
概述正则表达式在我们日程的工作项目中，应该是一个经常用到的技能。在做一些字符的匹配和处理的过程中，发挥了很大的作用。我们这篇文章主要是通过一个我在工作中遇到的性能问题，来探究下正则表达式是如何影响我们的代码性能的。在我们遇到了正则表达式有性能瓶颈的时候，我们应该如何的来对它进行优化？如果对正则表达式还没有什么概念，或者说不了解的同学，可以先参考我之前写过的博客： 正则表达式系列之初级入门篇 正则表达式系列之中级进阶篇 问题现状在我们日常的工作中，如果不需要去调整正则表达式的话
2021-10-02 15:20:30
506
原创 如何实现一个虚拟 DOM——virtual-dom 源码分析
概述本文通过对virtual-dom的源码进行阅读和分析，针对Virtual DOM的结构和相关的Diff算法进行讲解，让读者能够对整个数据结构以及相关的Diff算法有一定的了解。Virtual DOM中Diff算法得到的结果如何映射到真实DOM中，我们将在下一篇博客揭晓。本文的主要内容为： Virtual DOM的结构 Virtual DOM的Diff算法 注：这个Virtual DOM的实现并不是React Virtual DOM的源码，而是基于virtual-dom这个
2021-10-02 15:19:48
296
原创 从 IM 通信 Web SDK 来看如何提高代码可维护性与可扩展性
本文内容概述在架构设计和功能开发中，代码的可维护性和可扩展性一直是工程师不懈的追求。本文将以我工作中开发的 IM 通信服务 SDK 作为示例，和大家一起探讨下前端基础服务类业务的代码中对可维护性和可扩展方面的探索。本文不涉及具体的代码和技术相关细节，如果想了解 IM 长连接相关的技术细节，可以阅读我之前的文章： WebSocket系列之基础知识入门篇 WebSocket系列之JavaScript数字数据如何转换为二进制数据 WebSocket系列之JavaScript字符串
2021-10-02 15:18:54
381
翻译 国际大厂 Google 安全策略——【译】BeyondCorp 一种新的企业安全方法
前文介绍本文是对于 Google 相关安全策略的中文翻译，方便大家了解 Google 的相关安全策略。如果大家有兴趣阅读原文，可以通过BeyondCorp A New Approach to Enterprise Security进行访问。BeyondCorp 一种新的企业安全方法（正文内容）实际上每一个公司现在都使用防火墙来强制保证网络边界安全。然而，这个安全模型是存在问题的，因为，当网络边界被攻破时，攻击者可以相对简单的访问公司的内网。当公司采用移动设备和云技术时，网络边界会变得越来越难
2021-10-02 15:18:11
613
原创 ReasonML——新的前端强类型语言简介
背景介绍从有前端到现在，JavaScript 语言一直都是实现前端逻辑的首选。但是，由于 JavaScript 是一个弱类型语言，很难进行相关的类型检测。因此在构建大型应用时，使用 JavaScript 难免会遇到一些隐式类型转换等相关的问题，从而导致程序的 bug。在当前的选择中，有两个流派，都能够解决 JavaScript 弱类型语言带来的弊病，给前端带来强类型语言的支持。 第一个是 Facebook 提出的 Flow——这个的优点在于我们能够在不对现有代码进行任何改造的情况下，为现有的代
2021-10-01 06:58:55
339
原创 Promise进阶——如何实现一个Promise库
概述从上次更新Promise/A+规范后，已经很久没有更新博客了。之前由于业务需要，完成了一个TypeScript语言的Promise库。这次我们来和大家一步一步介绍下，我们如何实现一个符合Promise/A+规范的Promise库。如果对Promise/A+规范还不太了解的同学，建议先看看上一篇博客——[译]前端基础知识储备——Promise/A+规范。实现流程首先，我们来看下，在我实现的这一个Promise中，代码由下面这几部分组成： 全局异步函数执行器 常量与属性..
2021-10-01 06:58:21
308
原创 小而美的Promise库——promiz源码解析
背景在上一篇博客[译]前端基础知识储备——Promise/A+规范中，我们介绍了Promise/A+规范的具体条目。在本文中，我们来选择了promiz，让大家来看下一个具体的Promise库的内部代码是如何运作的。promiz是一个体积很小的promise库（官方介绍约为913 bytes (gzip)），作为一个ES2015标准中的Promise的polyfill，实现了诸如resolve、all和race等API。知识储备我们在这里简单回顾一下Promise/A+的主要关键点，如果需要了
2021-10-01 06:57:52
333
翻译 [译]前端基础知识储备——Promise/A+规范
概述自从准备晋级之后，就拖更了很久了，既然晋级弄完了，那么也恢复更新了。在面试别人的过程中，发现基本上没有人对整个Promise完全了解，因此希望通过这篇文章来帮助大家了解下Promise的全貌。本文的主要内容是Promise/A+规范的译文，主要是能够帮助大家了解下Promise的规范，以及解决在日常运用中遇到的一些问题。原文地址为：Promises/A+如果需要测试一个Promise库是否符合Promise/A+规范，可以使用这个：https://github.com/promises-
2021-10-01 06:57:23
205
原创 记旧项目 TypeScript 改造问题与解决方案
概述由于本次改造的项目为一个通过NPM进行发布的基础服务包，因此本次采用TypeScript进行改造的目标是移除Babel全家桶，减小包体积，同时增加强类型约束从而避免今后开发时可能的问题。本次改造使用的是TypeScript v2.9.2，采用Webpack v4.16.0进行打包编译。开发工具使用的是VSCode，使用中文语言包。预期目标是直接将TypeScript代码通过loader直接编译为ES5的代码。本文中涉及的问题有部分是TypeScript配置和使用的问题，也有部分是VSCode
2021-10-01 06:56:25
749
原创 正则表达式系列之中级进阶篇
概述本文主要通过介绍正则表达式中的一些进阶内容，让读者了解正则表达式在日常使用中用到的比较少但是又比较重要的一部分内容，从而让大家对正则表达式有一个更加深刻的认识。本文的主要内容为： 正则表达式回溯法原理 正则表达式操作符优先级 本文不介绍相关正则表达式的基本用法，如果对正则表达式的基本使用方法还不了解的同学，可以阅读我的上一篇博客——正则表达式语法入门。回溯法原理回溯是影响正则表达式效率的一个非常重要的原因，我们在进行正则表达式匹配时，一定要尽可能的避免回溯。很多人
2021-10-01 06:55:40
130
原创 正则表达式系列之初级入门篇
概述本文主要通过对正则表达式的语法进行一些简单的介绍，从而让没有接触过或者想学习正则表达式的同学有一个基础的了解，从而能够看懂和编写使用一般的正则表达式。本文的主要内容为： 正则表达式的字符匹配 正则表达式的位置匹配 正则表达式的括号与捕获组 本文的主要受众是想要学习正则表达式又不知道从何入手的同学。如果你已经使用过正则表达式，可以快速浏览本文，强化自己的记忆即可。字符匹配匹配规则在正则表达式中，分为精确匹配和模糊匹配两种。顾名思义，精确匹配就是匹配特定的字
2021-10-01 06:54:44
147
原创 TypeScript+Webpack+React组件库开发采坑实记
概述本文为配置TypeScript+Webpack+React，开发UI组件库时遇到的坑以及相对应的解决方案记录，适合相关同学进行查阅解决问题。本文主要内容为： tsconfig.js配置中遇到的问题 选择TypeScript Loader遇到的问题 Webpack遇到的问题 此三类配置和选择会同时导致某一类问题，因此这三类不作为分类标准，仅作为读者思考的方向，我们下面会根据具体的问题和错误以及对应的解决方案来进行说明。本文只需略读，在遇到相对应问题时，能够知道此处
2021-10-01 06:53:59
519
原创 如何实现一个HTTP请求库——axios源码阅读与分析
概述在前端开发过程中，我们经常会遇到需要发送异步请求的情况。而使用一个功能齐全，接口完善的HTTP请求库，能够在很大程度上减少我们的开发成本，提高我们的开发效率。axios是一个在近些年来非常火的一个HTTP请求库，目前在GitHub中已经拥有了超过40K的star，受到了各位大佬的推荐。今天，我们就来看下，axios到底是如何设计的，其中又有哪些值得我们学习的地方。我在写这边文章时，axios的版本为0.18.0。我们就以这个版本的代码为例，来进行具体的源码阅读和分析。当前axios所有源码文
2021-10-01 06:53:28
146
原创 IM应用中如何计算富文本的高度
背景在开发IM的项目过程中，经常会有出现一些需要计算DOM高度，然后超出若干行隐藏等需求。很多时候，需要计算高度的DOM元素都是动态生成的，我们无法在数据渲染前获取到它的高度。如果没有任何交互，我们可以通过CSS来实现这个需求。但是，如果我们需要使用JavaScript来实现一些交互（比如消息渲染时，超过2行显示某个特定按钮等），则只能通过JavaScript来进行实现。我在这里介绍一种通过JavaScript来对元素高度进行计算的方法，希望能够给大家提供一些思路。技术方案根据前端的基本常识
2021-10-01 06:52:31
184
原创 CSS transition delay简介与进阶应用
背景在日常的项目开发中，我们会很经常的遇见如下的需求： 在浏览器页面中，当鼠标移动到某个部分后，另一个部分在延迟若干时间后出现 在鼠标移除该区域后，另一部分也在延迟若干时间后消失 我相信这是一个很常见的一个需求，有很多种方式能够实现，但是，其实现方式的原理各不相同，也有利有弊。实现方案CSS在CSS中，有一个伪类hover也能够监听鼠标移动到某个元素上面，因此我们也可以利用CSS来实现我们刚刚的功能。我们需要使用的是CSS3中的新特性：transition。tra
2021-09-30 11:23:50
553
原创 如何设计实现一个React UI组件库——Ant Design源码阅读与浅析
概述在我们进行日常的项目开发的过程中，我们经常会遇到使用一些通用的UI组件库如BootStrap、Ant Design等。作为成熟的UI组件库，它能够提供提供一整套UI组件用来满足使用需求，能大大减少开发成本。在使用了他人提供的组件库后，我自然就会有兴趣去了解一下别人开发的组件库到底是如何设计的，如何进行相关的组件封装。本文以Ant Design为例，让我们来了解一下目前较为有名的UI组件库是如何设计与实现的？同时，我们又能够有哪些经验可以借鉴？阅读本文，你最好有如下的基础知识来帮助你理解本文内
2021-09-30 11:22:28
639
原创 如何模拟一个XMLHttpRequest请求用于单元测试——nise源码阅读与分析
概述在我们进行单元测试的过程中，如果我们需要对一些HTTP接口进行相关的业务测试，那么我们就需要来模拟HTTP请求的发送与响应，否则我们就无法完成测试的闭环。目前，有许许多多的测试框架都提供了模拟HTTP请求相关的一些流程功能，我们在这边文章中将会讲到的，就是我们在上一篇关于单元测试的博客提高代码质量——使用Jest和Sinon给已有的代码添加单元测试中提到的Sinon中引用的HTTP模拟框架nise。本文的目标是让读者能够通过这篇文章，知道一个成熟的测试框架是如何来模拟一个HTTP的实现，并且
2021-09-30 11:21:17
492
原创 提高代码质量——使用Jest和Sinon给已有的代码添加单元测试
概述在日常的功能开发中，我们的代码测试都依赖于自己或者QA进行测试。这些操作不仅费时费力，而且还依赖开发者自身的驱动。在开发一些第三方依赖的库时，我们也没有办法给第三方提供完整的代码质量报告。现在，我们可以使用单元测试来提高自己的代码质量。下面，我将自己在使用Jest和Sinon.js配置和编写单元测试中的收获的经验和踩到的坑进行总结，根据从零开始配置和编写单元测试这一条线来进行分享。通过本文，你可以解决以下问题： Jest与Sinon.js是什么？ 如何配置Jest与Sinon
2021-09-30 11:20:01
282
原创 提高代码质量——使用Jest和Sinon给已有的代码添加单元测试
概述在日常的功能开发中，我们的代码测试都依赖于自己或者QA进行测试。这些操作不仅费时费力，而且还依赖开发者自身的驱动。在开发一些第三方依赖的库时，我们也没有办法给第三方提供完整的代码质量报告。现在，我们可以使用单元测试来提高自己的代码质量。下面，我将自己在使用Jest和Sinon.js配置和编写单元测试中的收获的经验和踩到的坑进行总结，根据从零开始配置和编写单元测试这一条线来进行分享。通过本文，你可以解决以下问题： Jest与Sinon.js是什么？ 如何配置Jest与Sinon
2021-09-30 11:17:41
276
原创 Unicode中UTF-8与UTF-16编码详解
概述本文通过介绍Unicode编码以及对应的两种编码方式UTF-8和UTF-16，让读者能够了解关于字符串编码的相关知识，同时能够弄清楚Unicode和UTF-8和UTF-16之间的关系。本文的主要内容为： Unicode编码，包含Unicode编码基础知识以及与UTF-8和UTF-16这两种编码方式的关系 UTF-8编码，包含基础概念和Unicode编码转换到UTF-8编码方式 UTF-16编码，包含基础概念和Unicode编码转换到UTF-16编码方式 Jav
2021-09-30 10:44:38
2019
1
原创 Chrome扩展应用开发快速科普
概述本文通过对chrome插件的各个部分进行快速的介绍，从而让大家了解插件各个部分的关系，并且知道如何将其进行组装成一个完整的chrome插件。由于chrome官方文档中对于如何从零开发一个chrome扩展应用没有一套完整的流程，同时官方的API文档对于初学者也不是那么友好，因此本文将通过一个初学者的视角来讲解如何从零开始快速了解和开发一个chrome插件。本文的目标群体：已经了解或使用过chrome扩展应用，但是自己不知道如何开发一个chrome扩展应用的工程师。如果有具体的chrome扩展应
2021-09-30 10:43:40
410
原创 WebSocket系列之如何建立和维护可靠的连接
概述通过前四篇博客，相信读者对于WebSocket的使用和数据（不论是ArrayBuffer还是String）传输都有了一个深刻的了解。现在我们来介绍下，我在使用WebSocket时，连接相关模块遇到的一些共性问题，以及我们如何解决这些问题。本文作为WebSocket系列的第五篇文章，它的内容不仅仅限于前端的WebSocket导致的问题，而是结合一整套长连接方案可能遇到的问题来进行说明。其主要内容为： WebSocket建立连接共性问题 WebSocket维护连接共性问题 通过这
2021-09-30 10:42:06
696
原创 WebSocket系列之二进制数据设计与传输
概述通过前三篇博客，我们能够了解在通过WebSocket发送数据之前，我们需要传递的数据是如何变成ArrayBuffer二进制数据的；在我们收到二进制数据之后，我们又如何将其变成了JavaScript中的常见数据类型。本文作为WebSocket系列的第四篇内容，将会用一个简单的IM聊天应用把整个WebSocket传输二进制数据类型的内容连接起来，让用户对整个WebSocket传输二进制数据的方法有个了解。本文的主要内容如下： 如何设计一个二进制协议 WebSocket如何发送二进
2021-09-30 10:39:24
6688
4
原创 WebSocket系列之JavaScript字符串如何与二进制数据间进行互相转换
概述上一篇博客我们说到了如何进行数字类型（如Short、Int、Long类型）如何在JavaScript中进行二进制转换，如果感兴趣的可以可以阅读本系列第二篇博客——WebSocket系列之JavaScript中数字数据如何转换为二进制数据。这次，我们来说下string类型的数据如何进行处理。本文是WebSocket系列的第三篇，主要介绍string数据与二进制数据之间的转换方法，具体的内容如下： JavaScript中string类型基础知识 JavaScript如何将string
2021-09-30 10:32:56
1439
原创 WebSocket系列之JavaScript数字数据如何转换为二进制数据
概述本文主要通过对JavaScript中数字数据与二进制数据之间的转换，让读者能够了解在JavaScript中如何对数字类型（包括但不限于Number类型）进行处理。二进制数据在日常的JavaScript中很少遇到，但是当你使用WebSocket与后端进行数据交互时，就有可能会用到二进制的数据格式。因此，为了更好的理解本系列中之后发布的关于WebSocket传输二进制相关的内容，我们有必要了解二进制数据在JavaScript中是如何进行操作和存储的。本文内容主要为： JavaScript中
2021-09-29 23:16:04
1137
原创 WebSocket系列之基础知识入门篇
概述本文是WebSocket系列的第一篇，主要介绍WebSocket相关的基础协议知识和API。由于WebSocket的相关介绍在MDN中分布较乱，初学者不太容易入门，因此通过本文将相关基础知识和使用方法进行一个归纳和总结。本文主要内容如下： WebSocket基础概念介绍 WebSocket协议初读 WebSocket 相关API浅析 WebSocket在线上项目中的使用 通过本文，你能够了解到WebSocket相关基础知识，同时了解到WebSocket在线
2021-09-29 23:13:57
525
原创 IndexedDB使用与出坑指南
概述本文通过对IndexedDB的使用方法和使用场景进行相关介绍，对常见的问题进行解答。同时，因为MDN中的相关文档缺乏相关逻辑性，所以不容易理解。本文将通过项目中常见的数据存储和操作需求来进行内容组织。读者能够通过本文学会在项目中正确的使用IndexedDB，给应用带来的本地存储能力，并且避免一些常见的问题。原因：开发者需要在本地进行永久存储当我们进行一些较大的SPA页面开发时，我们会需要进行一些数据的本地存储。当数据量不大时，我们可以通过SessionStorage或者Local
2021-09-29 23:12:29
3827
1
原创 如何开发一个Node脚手架进阶版（Vue-cli学习篇）
前言在之前一篇博客介绍了关于Node脚手架的一些基础的知识，这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题，如： 终端样式、交互问题 文件处理问题 通过对Vue-cli 2.9.2的源码进行分析，解决相关问题。如果没有看过之前一篇博客的，或者对Node.js的脚手架没有了解过的同学，推荐先看上一篇：如何实现一个简单的Node.js脚手架。正文终端怎么自定义终端的样式chalk是一个日志的样式库，可以在终端上面调整日志的样式。以下的代码：c
2021-09-29 23:10:30
90
原创 如何开发一个Node脚手架
原因在工作中，需要开发一个脚手架，用于给相关用户提供相关的开发便利性。适合人群对前端、Node 操作有一定的了解，同时想了解脚手架开发过程或者需要自己实现一个脚手架的开发者。目标 开发一个简单的脚手架，能够提供给用户进行安装。 能够输出相关提示。 对用户文件进行读写操作。 在脚手架中使用 Shell 脚本。 步骤开发脚手架脚手架的开发最开始过程与普通的前端项目相同，需要一个入口文件 command.js 和配置文件 package.json。
2021-09-29 21:58:55
362
原创 EventEmitter3源码分析与学习
背景事件监听在前端的开发过程中是一个很常见的情况。DOM上的事件监听方式，让我们看到了通过事件的方式来进行具体的业务逻辑的处理的便捷。在具体的一些业务场景中，第三方的自定义事件能够在层级较多，函数调用困难以及需要多个地方响应的时候有着其独特的优势——调用方便，避免多层嵌套，降低组件间耦合性。这篇文章所提到的EventEmitter3，就是一个典型的第三方事件库，能够让我们通过自定义的实践来实现多个函数与组件间的通信。整体结构图EventEmitter3的设计较为的简单，具体结构可以看下图
2021-09-29 21:56:36
802
原创 should.js源码分析与学习
背景为了研究与学习某些测试框架的工作原理，同时也为了完成培训中实现一个简单的测试框架的原因，我对should.js的代码进行了学习与分析，现在与大家来进行交流下。之前是放在segmentfault上面的，现在往掘金上面也同步一份。目录 ext assertion.js assertion-error.js config.js should.js util.js 其中ext为文件夹，其余为js文件。结构其中should.js为整个
2021-09-29 21:54:37
154
原创 JavaScript数字运算必备库——big.js源码解析
概述在我们常见的JavaScript数字运算中，小数和大数都是会让我们比较头疼的两个数据类型。 在大数运算中，由于number类型的数字长度限制，我们经常会遇到超出范围的情况。比如在我们传递Long型数据的情况下，我们就只能把它转换到字符串进行传递和处理。 而在小数点数字进行运算的过程中，JavaScript又由于它的数据表示方式，从而导致了小数运算会有不准确的情况。最经典的一个例子就是0.3-0.2，并不等于0.1，而是等于0.09999999999999998。 在之前的博客中我
2021-09-29 21:51:52
7190
原创 Long.js源码分析与学习
背景由于在项目中使用到了WebSocket的自定义二进制协议，需要将二进制转为后端服务中定义的Long型。而在JavaScript中的Number类型由于自身原因，并不能完全表示Long型的数字，因此需要我们通过其他的方式来对Long型值进行存储。目标在GitHub中，有一个实现了在JavaScript中存储Long型的对象，具体代码可以戳此。下面，我们通过简单讲解一下这个库的具体实现来看看如何在JavaScript中实现一个Long型。如果你了解了这个实现原理，那么与之类似的，在JavaScr
2021-09-29 21:51:16
480
原创 如何使用prerender-spa-plugin插件对页面进行预渲染
本文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。预渲染（SSG）和服务端（SSR）渲染有一定的区别，大家想要了解的话可以看：https://segmentfault.com/a/1190000023469150。背景因为之前的网站是使用Vue开发的，这种前端JavaScript渲染的开发模式，对于搜索引擎来说非常的不友好，没有办法抓取到有效的信息。因此为了进行SEO，我们需要对页面进行一些预渲染。预渲染比较适合静态或者变化不大的页面，能够通过部署前的一
2021-09-29 21:36:49
592
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人