Attack on Life ⚔️

Personal blog

发表于 更新于 本文字数： 1.4k 阅读时长 ≈ 2 分钟
本文是作者对Redux Saga实现loading中间件的介绍，包括Redux Saga实现loading中间件的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Redux Saga实现loading中间件的效率。

当前项目中很多处理耗时较长，单个API请求我们可以加拦截器做到loading的开启和关闭，但是假如是一个effects中包含了多个请求，同时夹杂了一些其它的逻辑，那么单纯靠API层的loading控制是不行的，并且还会出现抖动开关。so，我们需要做到saga-effects这层的loading控制。

目标效果

当发起一个saga监听的action时，loading遮罩开启，当effects执行结束时，关闭。

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import { call, put } from 'redux-saga/effects';
import * as is from '@redux-saga/is';


const LOADING_BLACKLIST = [UserActionTypes.GET_USERS];

function isForkEffect(eff) {
  return is.effect(eff) && eff.type === 'FORK';
}

function loading(sagaFn) {
  return function* (action) {
    function* loadingWrapper() {
      yield put(loadingStatusAction(true));
      yield call(sagaFn, action);
      yield put(loadingStatusAction(false));
    }

    if (LOADING_BLACKLIST.includes(action.type)) {
      return yield call(sagaFn, action);
    } else {
      // @ts-ignore
      return yield call(loadingWrapper, action);
    }
  };
}

const effectMiddleware = next => eff => {
  if (isForkEffect(eff)) {
    eff.payload.args[1] = safe(eff.payload.args[1]);
    eff.payload.args[1] = loading(eff.payload.args[1]); // loading
  }
  return next(eff);
};

export const sagaMiddleware = createSagaMiddleware({
  effectMiddlewares: [effectMiddleware],
  onError: sagaEffectUnhandled
});
阅读全文 »

发表于 更新于 本文字数： 1.1k 阅读时长 ≈ 2 分钟
本文是作者对Beginning CSS Preprocessors的介绍，包括Beginning CSS Preprocessors的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Beginning CSS Preprocessors的效率。

最近快速阅读一本书《Beginning CSS Preprocessors》， 书中讲解的less,sass，compass使用略显过时，但整体读下来还是有几点收获和想法的，这里Mark下。

预处理器的使命与其宿命

  1. CSS并不遵循DRY原则，所以实际上我们书写的样式中存在大量的重复，而预处理的使命是提高可维护性，灵活性，尽可能的DRY。
  2. 预处理器只是将一种形式的样式写法转换为目标CSS写法，所以也就意味着预处理器并不会赋予样式新的功能，只是提高了开发层次的体验。我们现在经常用TS来代替JS开发，但是最终还是会编译为JS。从这个角度来看，两者相似。

阅读全文 »

发表于 更新于 本文字数： 625 阅读时长 ≈ 1 分钟
本文介绍关于前端编程大小写风格问题，包括使用场景、实现细节等，以提高关于前端编程大小写风格问题的效率。

风格很多时候没有绝对的对错，但是一个项目，一个team，群星璀璨，风格迥异一定是错。对于个人也一样，在实际的编程中，逐步也会形成自己的一套风格。这里梳理下我所认知的，抛砖引玉

已知的大小写风格

  • 大驼峰命名法(Pascal Case) UserType
  • 小驼峰命名法(camelCase) userType
  • 烤串命名法(kebab case) user-type
  • 小蛇形命名法(lower snake case) user_type
  • 大蛇形命名法(upper snake case) USER_TYPE
  • 点连接(dot annotation) user.type

实践

阅读全文 »

发表于 更新于 本文字数： 1.8k 阅读时长 ≈ 3 分钟
本文是作者对React中事件处理器命名规范的介绍，包括React中事件处理器命名规范的优势、实现细节、相关资料等，这些步骤可以帮助作者提高React中事件处理器命名规范的效率。

命名一直是个很有挑战的事情，需要做到的是一定的表意，一定的抽象，一定的言简意赅。之前看到一篇非常不错的文章【即该文】讲述一些事件处理函数的命名规范，其中的手法与我自己在实践中的一些认知一致，但解释的更为有理有力，这里翻译下，权当自己做了次复习，兴许也可以帮助一些Coder。

虽翻译，仍推荐看下英文原版

EVENT HANDLER NAMING IN REACT

参数Props

阅读全文 »

发表于 更新于 本文字数： 649 阅读时长 ≈ 1 分钟
本文介绍关于把玩ThinkPad X1 Carbon 2019，包括使用场景、实现细节等，以提高关于把玩ThinkPad X1 Carbon 2019的效率。

年前已经拿到的X1因为账户问题，吃灰2个月～～～哭倒，节后，经过客服重做系统，最近才拿到手里。因为主力机器还是Mac，所以这台机器不免作为我的备机。

轻度把玩几个小时，这里记录下我的操作与看法。

备注：我拿到的本配置是第七代+i7+16G+2T,顶配，X1当前内存最多支持到16G，搞开发的同学请注意

X1的硬件做工

因为深度用过了MBP，从2015 13->15再到现在的16寸，又轻度使用了Surface Laptop,所以面对X1的颜值，我主观感受并不觉得如何惊艳咱毕竟见过世面的不是。

阅读全文 »
0%