前端零碎

上一篇文章已经是… 451 天前了, 罪过罪过…

言归正传, 作为一个业余的前端, 不会写很多前端的文章, 但是可能会涉及到前端的方方面面, javascript, react, webpack, 浏览器等等, 打算把自己遇到的前端相关的点滴都记在这里.

Lodash: javascript utility

“大家前端如果有 select search 这样的控件,获取数据记得要用下 lodash/debounce 这个合并事件,避免触发很多后端请求”, 好长一段时间之前一个同事在工作群中跟大家说道, 这是第一次接触 lodash, 它是一个 javascript 工具包, 提供数组, 集合, 日期, 函数, 语言本身, 数学, 数字, 对象, 序列, 字符串等的一些好用工具, 真是相见恨晚, 先看个没用它之前, 我可能会写出来的代码:

_.has

if (
    this.state.info &&
    this.state.info.workflow_info &&
    this.state.info.workflow_info.label &&
    this.state.info.workflow_info.label.detailPage
) {
    // blabla...
}

emmmmm, 不许笑… 用 lodash 的话就可以:

if (_.has(this.state, 'info.workflow_info.label.detailPage')) {
    // blabla...
}

T & T 为什么不早点告诉我.

_.debounce

再举个前面提到的 debounce 的例子, 我们经常会在一个输入控件里发送请求到后端拉取相关数据, 以实现补全等功能, 例如用户输入一个 ip 地址的前缀, “192.168.” 发送该字符串到后端查询该字符串作为前缀的 ip 提供给用户选择以提升用户体验, 但是频繁的发送请求会增加非常多不必要的请求, 这时候, 可以用 _.debounce decorate 一下发请求的函数, 例如

this.checkAppName = debounce(this.checkAppName, 500);

这样, 500 ms 最多只会发送一个请求给后端.

其他

官方文档每个 utility 都有相应的例子, 大家自己去看吧.

redux

TODO

参考


2019-01-19 前端 , javascript , utils , lodash

最近文章