刘文壮-优快云博客

原创 Vmmem 进程（WSL2）消耗内存巨大

问题场景在 WSL2 中使用 Docker 时，可能会造成 Vmmem 进程消耗掉全部的内存，导致机器卡顿，且通过任务管理器或者通过 taskkill 都无法终止此进程。方案在用户目录下新建文件 .wslconfig，增加下面的配置，限制其内存占用：[wsl2]memory=6GBswap=0localhostForwarding=true更多配置可查看 WSL 的发行说明重启 WSL2：打开服务（可通过 Win + R，运行 services.msc），找到 LxssMa

2021-05-26 19:12:57 35064 3

原创通过 Marble Test 理解 RxJS

上篇文章介绍了一些 RxJS 的相关概念，本文通过学习 Marble Test 进一步的理解 RxJS。Marble Diagram 是理解 RxJS 的重要辅助工具，在 RxJS 的文档中有很多以时间为轴的图，那就是 Marble Diagram。而 Marble Test 就是测试某个 Observable 是否满足某个 Marble Diagram 的方法，能帮助我们更好地理解“时间”在 RxJS 中到底是起到了什么作用，也能够让我们更好地理解 Observable 的转换（如通过各种 operat

2021-01-21 19:29:26 604 1

原创 RxJS 中一些容易忽略的概念

本文收集了一些在学习 RxJS 过程中发现的容易忽略或比较容易弄错的概念，并尝试对其进行解释。本文涉及的代码均在 RxJS v6 版本，其他版本区别不大，基本概念是相同的。EMPTY 不是空转EMPTY 是一个内置的 Observable，很多人看到其名字认为它什么也不做，但对于 Observable 来说一定是处在下面“状态”之一的：正常推送数据出现错误完成而 EMPTY 就是直接到达完成状态的 Observable：import { EMPTY } from "rxjs";E

2020-12-31 17:16:43 490

原创 Windows下前端开发使用prettier保证以LF结尾

在Windows下开发时有点比较烦：文件行尾默认是以CRLF格式，也就是回车换行，区别于macOS和Linux常用的LF格式，所以在和使用其他系统的开发人员协作开发时就需要特别注意，所以一般我们需要对Git进行配置：git config --global core.autocrlf true上面是从全局告知Git，如果我们工作区的文件是CRLF格式的，在推送到远程时会进行一次转换将其变为LF格式；当我们拉取远程文件时，会再将LF格式的文件转换为CRLF格式的。这样做既能保证其他系统的协作人员的文件格式

2020-08-12 22:32:16 7853

原创 Yarn 2的安装与使用

Yarn在前端开发者中必然不陌生，目前来说大部分使用的都是Yarn 1.x的版本，其实Yarn 1.x很多时候定位有些尴尬，在设计上还是从npm上借鉴了很多，甚至在大多开发者眼中只是将package-lock.json换成了yarn.lock而已（yarn workspaces是较大的不同），虽然号称在速度上有优势，但npm所具有的缺点Yarn 1.x还是不可避免地会存在。所以促使了Yarn 2地出现，在尽可能保留1.x的使用方式和功能的同时，还提出和实现/重构了很多新的功能，目前1.x已经不再进行版本更

2020-08-07 16:09:33 11599 3

原创 null、undefined在ajax请求中的区别

目前的前后端的数据交互大多都使用ajax利用JSON进行数据交换，在前端调用接口时遇到某些参数不需要传的情况时（接口将这些参数设置为可选的）我们应该将其设置为undefined还是null呢？它们两者在ajax请求中有什么区别呢？一般我们的HTTP请求是按请求方法来区分的，如POST、GET、PUT等，完整的请求方法列表可查看MDN。按照是否能够携带请求体对其进一步区分，我们先了解一下它们之间的不同：具有请求体的请求所谓具有请求体的请求，是指诸如POST、PUT、PATCH等能够在请求体中包含数据的请

2020-08-04 19:04:40 1410

原创 TypeScript中类型守卫Type Guard的介绍和使用

Type Guard不是一种类型，而是一种能够确认具体类型的一种机制，如针对union类型经常设置一个type字段来作为当前类型的唯一标识，从而在使用时能够正确识别：type Contact = { type: 'email'; email: string; } | { type: 'phone'; phone: string; }function saveContact(contact: Contact) { if (contact.type === 'email') { // 这里能够

2020-07-17 10:39:10 3096 1

原创 ERR_BLOCKED_BY_CLIENT - 请求被广告拦截插件拦截

近日同事在项目中遇到个问题：用户A在使用某产品前端页面时从数据库中选择某张特定的表后调用接口获取相关数据失败，而其他表都是正常的。然后他在自己和同事的电脑上按同样的步骤操作，有些同事能够复现，有些不能复现。我按照他提供的步骤尝试复现了一下，发现相关请求是被拦截了：控制台的报错信息：GET http://xxx?table=activity_advertisement_info net::ERR_BLOCKED_BY_CLIENTNetwork请求的报错信息：原因定位首先看到ERR_BLOCKE

2020-07-07 19:06:09 4474

原创调试Node.js应用

应用开发中，功能实现是首要目的，其次是掌握调试的能力，本文会介绍如何通过Chrome DevTools和VS Code进行Node.js应用的调试。前提准备首先请确保Node.js版本高于6.3.0：# 版本需高于6.3.0$ node -v其次准备好自己的Node.js应用，这里我们先以一个简单的index.js为例：// index.jsfunction add(x, y) { return x + y;}const result = add(1, 2);console.

2020-06-22 17:40:11 558

原创 create-react-app在WSL中执行npm start出错

最近在Windows10中的wsl2中使用create-react-app创建了工程后，发现执行npm start或yarn start时会报错：Error: spawn cmd.exe ENOENT经过调试，发现是尝试调用本地浏览器打开页面时出现了错误，具体代码在open库中：可以看到尝试使用cmd.exe启动浏览器时出现了问题，没有找到cmd.exe，一般来说安装wsl2时，会将windows10的环境变量也附加到wsl2环境中，但是cmd.exe所在的/mnt/c/System32路径没被附

2020-06-08 16:17:05 626

原创 Vue一次监听多个属性变化

一般来说Vue中监听属性值的变化时，是在watch中针对各属性值单独设置监听函数：var vm = new Vue({ data: { sourceType: 1, sourceOrder: 2, sourceStatus: 3, }, watch: { sourceType: function (val, oldVal) {}, sourceOrder: function (val, oldVal) {}, sourceOrder: funct

2020-05-08 23:19:44 8638

原创 git clean 和 git rm 的区别和使用场景

git操作中clean和rm是比较容易混淆的两个操作，本文介绍它们之间的区别及使用场景。git cleangit clean操作针对的是当前仓库中未被跟踪的文件，即未通过git add操作过的文件。常用操作方式当我们需要剔除仓库中误添加的文件、中间过程生成的文件时，可以这样做：# 1. git clean -n 看一下将要删除的文件是哪些$ git clean -n ./# 2. ...

2020-04-08 21:14:24 1329

原创插入DOM神器 - insertAdjacent*

DOM操作中，插入元素的操作是使用较多的，一半我们都会使用appendChild来做，但是使用起来很不方便，特别是涉及到表格操作：const emptyRow = document.querySelector('tr');const firstCol = document.createElement('td');firstCol.className = 'first-col';first...

2020-04-08 10:26:33 583

原创 TypeScript使用Class的简写形式

一般定义Class的代码：class Person { name: string; // A1 email: string; // A2 constructor(name: string, email: string) { this.name = name; this.email = email; }}首先我们在A...

2020-03-26 18:59:05 1450

原创 Vue如何正确使用watch监听属性变化

Vue中可以使用监听器监听属性的变化，并根据属性变化作出响应。但一旦涉及到复杂数据的监听（如Object，但数组一般不需要，因为Vue针对数组做了特殊处理）时就比较复杂了，本文解释了使用watch监听属性变化的方法，包括复杂数据。基本用法Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑:<template> <input type="number" ...

2020-02-18 13:54:25 8640

原创你可能不了解的forEach循环

在JavaScript或者几乎所有的编程语言中，for循环语句都是处理循环的主要手段，其使用方式相信大家都很熟悉。在处理循环时，我们还可以使用break、continue来控制循环的结束或者跳过本次处理。但ES5中引入的forEach作为处理循环的利器能否沿袭for循环的特点呢？答案是否定的，forEach有着自己独特的特性：break、continue不能在forEach中使用var arr ...

2020-02-14 16:24:34 275

原创 Windows Terminal添加、使用主题

此方法在Windows 10 版本1909上通过Microsoft Store中安装的Windows Terminal测试通过，其它版本可能有些许区别。添加主题Windows Terminal从profiles.json中读取配置，初始状态下配置文件很“简陋”：// To view the default settings, hold "alt" while clicking on th...

2020-01-11 22:16:29 11311 1

原创 Vue组件代码分块和懒加载

前端开发中，随着业务和页面增加，以组件为基本单位的结构下，组件数量会增长极快，为了优化我们会很显然地想要进行一些工作：代码分块懒加载非必要资源文件非必要资源，指的首次渲染出某页面所不必要的资源，如因为用户操作才出现的图片、弹窗等。代码分块和懒加载在页面层面具有极大的优化作用，用户很可能只是浏览dashboard页面，可能根本就不会去看详情等页面，那我们就不必将详情页面的代码和das...

2019-12-25 18:40:00 1803

原创 vue工程为组件自动注入全局样式文件

开发过程中，随着工程变大，不免要提取出一些公共的样式，如variables、mixins、functions等几乎在所有业务组件中都会用到的样式：-- src---- styles-------- variables.less-------- mixins.less-------- functions.less如果每个需要的组件都要手动导入一次，就太繁琐了：<script l...

2019-12-19 11:22:52 2501

原创 inline svg的使用

inline svg是目前前端图标解决方案的最优解（当然不仅限于图标），而且使用方式也及其简单，只要将svg图标代码当成普通的html元素来使用即可，如：<svg viewBox="0 0 1024 1024" height="1em" width="1em" fill="currentColor"> <path d="M665.6...

2019-11-12 15:08:58 3028

原创理解并利用Iterable协议

ES6中引入了for...of、[...arr]展开语法等很方便易用的功能，而且它们不仅仅只能用于Array，还适用于：Set、MapStringNodeList、HTMLCollection我们称这些数据结构是可迭代的，那这些数据结构之间肯定存在某种共同点，即它们的原型链上都存在这一个名为Symbol.iterator的函数：const arr = [1, 2, 3];conso...

2019-11-01 17:45:29 341

原创什么是前端缓存

大家在日常的开发工作过程中，有没有遇到过下面几种情况：部署/发布前端工程后，增加的功能或修改的bug没有生效测试同学测试功能时经常暴力地清除所有浏览器缓存前端开发同学经常说：你“强刷”一下就好了…遇到上面这些情况，大部分同学就知道了，这是前端有缓存的原因，那具体什么是前端缓存呢，前端缓存仅仅和前端有关系吗？前端缓存 / 浏览器缓存前端缓存，是浏览器为了提升网站的加载性能，缩短用户...

2019-10-22 18:44:33 1611

原创字体图标的使用与设计

字体图标（iconfont）虽然有要被淘汰的趋势，但是在其服役期间也解决了其他方案的很多痛点，如图片增加额外请求不能使用CSS控制其内部细节不同分辨率的适配CSS Sprites（图片整合术）background-position 定位具体图片可维护性太差添加删除图片成本高，尤其是删除图片CSS Sprites 其实在特定条件下（对图片的改动频次很低）也是比较不错...

2019-10-08 16:54:08 304

原创 git同时推送至多个remotes

一般来说，我们的工程只关联一个远程仓库地址，如我们在公司平时的开发中，一般来说都是将代码推送到公司内部的代码仓库中（如GitLab中)。但是如果我们自己的一些工具工程，即想要提供给公司内部使用（GitLab），又想要推送到GitHub上服务大众，我们就需要同时推送至多个远程仓库了：$ git remote set-url --add --push origin [REPOSITORY URL 0...

2019-09-11 17:52:23 2317 1

原创使用git bisect确定引入问题的提交

git bisect只是一个git命令，和git pull、git push等常用的命令一样。它的用途是利用二分查找算法快速确定引起问题的提交。下面以确定哪次提交引起编译错误为例介绍git bisect的基本使用方法：场景当前最新提交下出现了编译错误（如执行npm run build出现错误），但是由于多人协作开发，不知道哪次提交引入了问题。此时需要确定引入问题的提交，从而缩小代码检查范围。...

2019-09-11 17:36:32 297

原创 git push某个或某些特定提交

当我们在本地仓库开发时，暂存区可能有多次提交等待推送(git push)到远程，而我们目前只做完了其中某些需求，此时我们想要将做完的需求涉及的提交推送到远程，git push和git rebase -i就可以做到：默认情况下，git push会推送暂存区所有提交（也即HEAD及其之前的提交），使用下面的命令可以改变此默认行为：$ git push <remotename> <...

2019-09-11 17:33:35 41500 1

原创 Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]

“对呀对呀！……回字有四样写法，你知道么？”，当时鲁大大如此讽刺孔乙己，意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲。但是在Angular 2的世界中，很少存在无用之物，ngModel有三种写法，你知道吗？表单的设计永远都是应用的重头戏，而其中最基本的功能点即是通过一个个输入组件实现的，为此Angular 2为我们提供了锋利的武器：ngModel。而其不同的使用方式有着大不相同的作用：ng

2017-04-26 13:30:44 11662

原创自此使用Object字面量取代switch

几乎在所有主流编程语言中switch…case语句都占有一席之地，并且几乎所有介绍条件表达式的资料中都指示说当多条件判断时使用switch…case语句比if…else if…更具效率。在JavaScript中也不例外，switch…case语句在处理多条件判断时仍然很锋利，不过使用Object字面量完全可以取代它…switch…case的问题初始在JavaScript中遇到switch…case时

2017-04-25 23:44:28 1638 1

翻译 Angular 2 利用Router事件和Title实现动态页面标题

本篇为译文，点击这里前往原文。Angular2 为我们提供了名为Title的Service用于修改和获取页面标题，但是如果只是能够在每个页面的ngOnInit方法中为每个页面设置标题岂不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我们想要的结果是在页面改变时能够动态地改变页面标题，如此最好的解决方案就是组合使用Router事件和Title Service。Title S

2017-04-09 16:20:34 10640

原创 Angular 2 父子组件数据通信

如今的前端开发，都朝组件式开发模式靠拢，如果使用目前最流行的前端框架Angular和React开发应用，不可避免地需要开发组件，也就意味着我们需要考虑组件间的数据传递等问题，不过Angular 2已经为我们提供了很好的解决方案。父组件和子组件接触过面向对象编程的开发者肯定不会对父子关系陌生，在Angular 2中子组件存在于父组件“体内”，并且父子组件可以通过一些渠道进行通讯。父组件向子组件传入数据

2017-03-29 20:29:39 16462

原创 Angular之constructor和ngOnInit差异及适用场景

Angular中根据适用场景定义了很多生命周期函数，其本质上是事件的响应函数，其中最常用的就是ngOnInit。但在TypeScript或ES6中还存在着名为constructor的构造函数，开发过程中经常会混淆二者，毕竟它们的含义有某些重复部分，那ngOnInit和constructor之间有什么区别呢？它们各自的适用场景又是什么呢？区别constructor是ES6引入类的概念后新出现的东东，是

2017-03-21 19:44:37 27253 7

原创 Ionic 2之页面堆栈

还记得Ionic 1中的state和router吗？他们两兄弟配合起来完成页面导航的功能，虽然它们使用起来并不算复杂## 标题 ##，概念也很清晰，不过当页面增多、state嵌套等问题出现后复杂度也会增加，当复杂程度到达一定程度时工程必然难以维护和理解。而Ionic 2效仿原生页面堆栈的概念解决了上述问题。页面与组件页面是应用的基石，是交互的基本单位，Ionic 2中页面是通过组件构成的，Ionic

2017-03-18 15:33:39 8583

原创理解Ionic、Angular、Cordova及插件之间的关系

本文提及概念不区分Ionic 1/Angular 1和Ionic 2/Angular 2。首先我们需要明确以下几个概念：1.即使我们将移动端web页面做得和原生应用及其相似，在我们的页面中也无法像原生应用那样调用原生的能力，当然通过输入框触发键盘、图库、拍照等操作不在这里“调用原生能力”的范畴。2.单纯的web页面不能提交到应用商店被用户使用。然后，我们分别就它们之间的关系做出解释：Ionic和A

2017-03-11 09:24:27 21609 3

原创理解Ionic 2之class及其修饰器@App、@Pipe

理解class只要接触过一门面向对象语言，如Java、C#等，就不会对class感到陌生，其有个响亮的名号：类。它是编程的宠儿，聚万千宠爱于一身，于是其能够开枝散叶，结婚生子，即为继承。但是对于JavaScript开发者来说，class还只是刚刚被实现的东东，当年为了构建一个形似class的东东需要这样做：function Animal (power, speed) { this.power

2017-03-05 00:01:30 3068

原创理解Ionic 2之import

在Ionic 1中最重要的概念是模块化，由于Angular 1实现的Ionic 1理所当然地继承了模块化的概念。所以我们通过Ionic 1可以非常优雅地按照模块化的理念构建我们的工程，使得维护、重构、增删功能节点、理解工程不再困难晦涩。当然，Ionic 2作为Ionic 1的升级版本，在模块化的实现上要更加简洁、更加强大。本文通过ES6的关键字import来接触Ionic 2/Angular 2的模

2017-03-02 20:07:47 1544

原创 Angular Service和Fatory的差异

学习AngularJS的过程中，必不可少地需要使用Service或Factory进行辅助开发，他们是Angular DI系统（Dependency Injection）中的重要成员，而他们有什么区别呢？我想大多数人都被告知他们差不多，相同的功能使用Service或Factory都可以实现，但事实并非如此。

2016-08-03 01:13:28 849

原创 Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

Angular按照发布/订阅模式设计了其事件系统，使用时需要“发布”事件，并在适当的位置“订阅”或“退订”事件，就像邮箱里面大量的订阅邮件一样，当我们不需要时就可以将其退订了。具体到开发中，对应着$scope和$rootScope的$emit、$broadcast和$on方法。本文介绍Angular的事件机制，

2016-06-29 20:25:09 14857 6

原创 Angular $http拦截器介绍与使用

$http service在Angular中用于简化与后台的交互过程，其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。在与后台的交互过程中，可能会对每条请求发送到Server之前进行预处理（如加入token），或者是在Server返回数据到达客户端还未被处理之前进行预处理（如将非JSON格式

2016-06-27 20:05:56 18257

原创 Ionic单元测试（Unit Tests）

代码测试的必要性，对任何编程语言都毋需赘述，JavaScript和HTML自然不例外。本文描述如何对Ionic/Angular进行单元测试（Unit Tests）及端对端（End to End Tests或者UI Tests）测试。对于测试环境而言，目前框架很多，本文使用的是Karma，尤其是其本身就为Angular而生，故能够与Angular完美集成。对于测试用例而言，框架也有很多，本文

2016-04-07 12:11:08 2379

翻译使ionic应用更加贴近原生

使ionic应用更加贴近原生本文乃翻译而来，并加入个人理解，如有理解错误指出，请大家指出，大家也可移步原文。近来，由于设备性能的提高以及混合开发技术的优化，原生开发和混合开发之间的界限越来越不明显了。一些混合开发技术中甚至可以使用“原生切换动画”、“原生滚动”等效果，如ionic。很多情况下，已经分不清原生app和混合app的区别了，特别是很多原生app使用WebViews。混合开发技术仍在飞速的发

2015-12-02 12:23:22 3640