跳到主要内容

· 阅读需 7 分钟

axios 已经逐步成为了 JS 前端甚至 Node 后端主流的网络请求库。其中请求/响应拦截也是使用率非常广泛的功能,众所周知其 getpost 请求参数结构不一,使得我们通常会在原 api 上进行二次封装。

既然是封装,那就要考虑到代码的健硕性,参数的扩展性,TS 类型支持,以及可维护性,如何有效设计封装,就是我们接下来要讲的重点。

· 阅读需 17 分钟

前端开发中,我们经常看见有一些全局脚手架包通过 xx create app-name 或者 npx xx app-name 等命令,就可以快速生成一个对应的模板项目,他们是怎么做到的呢?

· 阅读需 2 分钟

前端开发中,经常会有处理 url query 参数的需求,大部分人会自己封装一个方法,去用正则转换解析成 js 对象或者遍历生成 query 参数字符串,或者找一些第三方库或 node 原生库 querystring 等。

但是许多人都或者不知道或者没用过 JS 的新的 Window 对象 API:ULRSearchParmsULRSearchParms 就是专门用来处理 query 参数的各种转换问题。

· 阅读需 1 分钟

CSS 中 inset 属性大部分人可能没听过也没用过,其实就是 top right bottom left 的简写方式

inset: 0; 等价于:

div {
top: 0;
right: 0;
bottom: 0;
left: 0;
}

同时 inset: 1px 2px; 等价于:

div {
top: 1px;
right: 2px;
bottom: 1px;
left: 2px;
}

inset: 1px 2px 3px; 等价于:

div {
top: 1px;
right: 2px;
bottom: 3px;
left: 2px;
}

inset: 1px 2px 3px 4px; 等价于:

div {
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
}

设置顺序依次为上、下、左、右,这点就和 margin padding 等属性的统一设置规则一样。

4 行缩成 1 行,在代码简化上,倒是起了很大的帮助。

· 阅读需 1 分钟

最近遇到行内子元素垂直居中的需求,按照以往经验设置了子元素 vertical:middle 以及 display:inline-block,但是发现并没有效果。 几经周转查询了 vertical-align 的具体用法,发现主要是因为没有基线对照参照物,所以没有生效。

因此想到添加一个高度 100% 的空的行内元素,并且同时设置 vertical:middle 作为子元素的参照物。

· 阅读需 1 分钟

gitlab ci 执行流水线 Job 返回如下错误:

Reinitialized existing Git repository in /home/gitlab-runner/builds/AXzjdXyZ/0/root/blog/.git/
fatal: git fetch-pack: expected shallow list
fatal: The remote end hung up unexpectedly

原因是 centos 7 git 版本太老不持之新 API,需要升级一下 git:

#安装源
yum install http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-2.noarch.rpm
#安装git
yum install git
#更新git
yum update git