JavaScript
文章平均质量分 81
刘文壮
Github地址:https://github.com/liuwenzhuang
展开
-
RxJS 中一些容易忽略的概念
本文收集了一些在学习 RxJS 过程中发现的容易忽略或比较容易弄错的概念,并尝试对其进行解释。本文涉及的代码均在 RxJS v6 版本,其他版本区别不大,基本概念是相同的。EMPTY 不是空转EMPTY 是一个内置的 Observable,很多人看到其名字认为它什么也不做,但对于 Observable 来说一定是处在下面“状态”之一的:正常推送数据出现错误完成而 EMPTY 就是直接到达完成状态的 Observable:import { EMPTY } from "rxjs";E原创 2020-12-31 17:16:43 · 430 阅读 · 0 评论 -
null、undefined在ajax请求中的区别
目前的前后端的数据交互大多都使用ajax利用JSON进行数据交换,在前端调用接口时遇到某些参数不需要传的情况时(接口将这些参数设置为可选的)我们应该将其设置为undefined还是null呢?它们两者在ajax请求中有什么区别呢?一般我们的HTTP请求是按请求方法来区分的,如POST、GET、PUT等,完整的请求方法列表可查看MDN。按照是否能够携带请求体对其进一步区分,我们先了解一下它们之间的不同:具有请求体的请求所谓具有请求体的请求,是指诸如POST、PUT、PATCH等能够在请求体中包含数据的请原创 2020-08-04 19:04:40 · 1315 阅读 · 0 评论 -
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 · 2921 阅读 · 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 · 3404 阅读 · 0 评论 -
插入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 · 523 阅读 · 0 评论 -
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 · 1328 阅读 · 0 评论 -
你可能不了解的forEach循环
在JavaScript或者几乎所有的编程语言中,for循环语句都是处理循环的主要手段,其使用方式相信大家都很熟悉。在处理循环时,我们还可以使用break、continue来控制循环的结束或者跳过本次处理。但ES5中引入的forEach作为处理循环的利器能否沿袭for循环的特点呢?答案是否定的,forEach有着自己独特的特性:break、continue不能在forEach中使用var arr ...原创 2020-02-14 16:24:34 · 237 阅读 · 0 评论 -
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 · 2917 阅读 · 0 评论 -
理解并利用Iterable协议
ES6中引入了for...of、[...arr]展开语法等很方便易用的功能,而且它们不仅仅只能用于Array,还适用于:Set、MapStringNodeList、HTMLCollection我们称这些数据结构是可迭代的,那这些数据结构之间肯定存在某种共同点,即它们的原型链上都存在这一个名为Symbol.iterator的函数:const arr = [1, 2, 3];conso...原创 2019-11-01 17:45:29 · 305 阅读 · 0 评论 -
什么是前端缓存
大家在日常的开发工作过程中,有没有遇到过下面几种情况:部署/发布前端工程后,增加的功能或修改的bug没有生效测试同学测试功能时经常暴力地清除所有浏览器缓存前端开发同学经常说:你“强刷”一下就好了…遇到上面这些情况,大部分同学就知道了,这是前端有缓存的原因,那具体什么是前端缓存呢,前端缓存仅仅和前端有关系吗?前端缓存 / 浏览器缓存前端缓存,是浏览器为了提升网站的加载性能,缩短用户...原创 2019-10-22 18:44:33 · 1555 阅读 · 0 评论 -
自此使用Object字面量取代switch
几乎在所有主流编程语言中switch…case语句都占有一席之地,并且几乎所有介绍条件表达式的资料中都指示说当多条件判断时使用switch…case语句比if…else if…更具效率。在JavaScript中也不例外,switch…case语句在处理多条件判断时仍然很锋利,不过使用Object字面量完全可以取代它…switch…case的问题初始在JavaScript中遇到switch…case时原创 2017-04-25 23:44:28 · 1591 阅读 · 1 评论