Attack on Life ⚔️

当前项目中很多处理耗时较长，单个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
});

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

预处理器的使命与其宿命

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

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

已知的大小写风格

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

实践

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

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

EVENT HANDLER NAMING IN REACT

参数Props

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

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

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

X1的硬件做工

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

因为个人博客从国内迁移到了国外，服务器销毁，备案域名也就失效了，博客中的图片等资源一直走的七牛云图床+自定义域名，因此受牵连不起作用。在考虑新图床时，尝试使用了下imgur，但该服务却是被墙的，总之各种不爽。

忍受一段时间后，决定自建图床，同时将七牛云的历史图片资源进行下迁移，保证之前博客中图片资源可以正常访问。同时为了快速上传图片资源，利用Alfred创建便捷workflow。

这里就简单Mark下整个过程。

批量下载七牛图床资源

关于七牛云上托管的的图片，发现不可以预览和下载，实在无语，还在客服服务还不错，经过咨询，了解到了解决办法。

最简单的方式，强烈推荐

最近因为想撸udacity的羊毛，所以又折腾了下如何fanqiang，当然最终还是成功了，只是羊毛没撸到。但如何快速上谷歌的技术得到了提升，也不亏，这里就记录下。也算帮助那些还困惑于如何谷歌的人。

声明：谷歌的目的是学习和爱国

当前还能用的手段

v2ray+websocket+https

window.open这个方法是加载新的资源，一般我们都是打开一个新的网页URL，但是在一次codereview时，我注意到team的成员写了这么一个地址

1
2

window.open('../../static/template.xlsx')

此时项目开发路径情况是这样

1
2
3
4
5
6
7

│── home
│       └── banner
│           └── index.tsx
└── static 
    └── template.xlsx

毫无疑问，这个确实是有问题的。构建后，static是一级目录。所以实际上配置的路径应该是static/template.xlsx。

最近项目中牵扯到精度计算，原生number类型的小数计算有精度损失，比如0.1+0.2可不是等于0.3。于是需要进行轮子选择。找到了以下的2个方案予以考虑，这里简单列下

当然我最终选择了mathjs

big.js

A small, fast JavaScript library for arbitrary-precision decimal arithmetic.

体积: 5.9 KB minified and 2.7 KB gzipped

实际项目开发中，总是会有很多dead code，这些dead code毕竟也是code一部分，占用项目体积事小，但是却对开发造成了困扰，因为你可能改了半天发现不起作用，因为这段代码根本就不执行。
所以面对dead code，个人的认知是一律删除，假如所谓的说辞是”万一以后要用呢！”，我一般的回答是”几月几号呢？当前的代码管理都有Git,本身就存在完整的历史，所以不要为自己的懒惰和不专业找说辞，删！”

当然Team人员的水准参差不齐，认知也不一定一致，最好的办法并非是反复去为他们的错买单，反复指导，而是强制规则约束，及这样一篇有那么几分道理的文章去解释即可。

OK，开搞

TSConfig内置配置