跳到主要内容位置

· 预计阅读时间: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

· 预计阅读时间:14 分钟

Babel 是一个工具集,主要用于将 ES6 版本的 JavaScript 代码转为 ES5 等向后兼容的 JS 代码,从而可以运行在低版本浏览器或其它环境中。

因此,你完全可以在工作中使用 ES6 编写程序,最后使用 Babel 将代码转为 ES5 的代码,这样就不用担心所在环境是否支持了。下面是一个示例:

· 预计阅读时间:10 分钟

React 16.8 后的 hooks api 出现以后,大大解决了代码的简介性,然而除了官方提供的几个 hooks api 之外,我们还可以自定义自己的 hooks api,以实现业务代码的简化和复用。

我们可以通过下列的例子,真正进入 hooks 的世界。

· 预计阅读时间:2 分钟

react-router v4 之后,在组件之外使用路由必须通过 createBrowserHistorycreateHashHistory 方法返回的 history 实例,并传入给 Router 组件,替换掉原本的 BrowserRouter/HashRouter 包裹组件。

然而在 最新的 v6(超强劲破坏性版本) 版本中,这种方法依然不可取(url 变化但是页面不变),除了上述所说之外,同时还需要监听 history 的变化,手动重新渲染页面。