前端见闻录

在平时的 CodeReview 中要如何去分辨代码的好坏呢？最近看到 https://github.com/ryanmcdermott/clean-code-javascript 这个仓库的总结，感觉蛮有参考价值的。特别是关于类这一章，涉及很多设计模式的思想。刚好相关的中文仓库似乎缺失了类这章节的翻译，以下为类以及 SOLID 这个章节的翻译并添加个人理解。

h5 的单行/多行文字溢出截断实现如下

// 单行
div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行
div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

在 h5 中，多行文字截断的兼容性并不好，而在 RN 中，实现文字截断则简单的多，只需要给 Text 组件添加 numberOfLines 属性即可。

但是通常我们还会遇到如下需求：

文字在不超出 N 行时，全部展示，超出 N 行时截断，并显示 阅读更多 按钮，用于点击展开，展开后 阅读更多 按钮显示为 收起，点击后折叠文字。

最近有同事遇到一个问题，有个页面的图片（www.xxx.jpg）在安卓和 pc 都能正常显示，但是用 ios 就展示不了。通常出现在这种情况是因为 WKWebview 不支持 webp 的图片导致的。通过 https://caniuse.com/?search=webp，可以看到 safari 在 14.0 之后才支持 webp。

背景

项目组中 RN 之前使用的状态管理是小伙伴自行封装 redux， redux-saga 的一个组件库，然而由于文档不全，使用起来不方便等原因，经过讨论，决定替换成 mobx。主要参考官方文档： https://mobx.js.org/react-integration.html#react-integration。本文记录我将 mobx 加入 RN 的过程以及使用 mobx 的一些注意事项（实际上与普通的 React 项目差不多）

背景

继上一篇 《svg 图片的上传与下载》后，产品要求下载的 svg 需要使用 “OCR-B 10 BT” 这个字体。下面记录下遇到的坑。

背景

早些时候在公司内部的做过一个内部项目 api-docs，该项目是提供一个 Api 管理文档平台，类似于 YApi 。项目是半路接过来的，前端使用 vue，服务端使用 eggjs 提供符合 restful 规范的接口，数据库则选择的是 mongodb。

在不断的迭代中，遇到以下一些问题

1. 首页和测试模块都展示了 api 列表，但是首页与测试模块所展示的字段存在一些异同点，基于此，有两种做法：
   1. 提供两个不同的接口
   2. 提供同一个接口，根据请求参数判断需要下发的字段
2. 需要对外开放查询接口，不同部门需求的字段信息不同
3. 由于是内部使用，接口 ( 需求 ) 改动比较频繁，仅仅是修改前端展示的数据却需要频繁修改服务端接口，当然可以将页面需要的字段全部下发，不过这么做有点浪费带宽。

因此我引入了 graphql 来解决上述的问题。基本想法是前端自行构建需要的字段，服务端无需变更。

本文尝试去还原引入的过程是防止遗忘( 实际上时间隔得比较久了，一些细节确实已经模糊了 )。由于当时也是摸石头过河，可能会有一些不是最佳实践的地方，还望指教。

背景

当前的项目由于不是严格按照敏捷开发进行的，经常有功能分支需要分别上到 测试，预发以及开发环境。这个就导致了功能分支比较多，且开发要在临上线前整理需上线的分支，在上到正式环境之前需要合并到一个临时分支，之后再统一上到 master 分支。因此经常会遗漏掉一些分支。用 git log 可以对比出两个分支合并分支的区别，从而知道有哪些分支合并到测试分支，但是并没合并到 master。 那么这些分支就有可能是需要上线到 master 的。我个人比较习惯使用命令行 + vscode 来使用 git，但是命令行不太直观，且交互比较麻烦，因此打算写个 VSCode 插件。

背景

电商以及图片网站经常可以看到瀑布流的列表，即多列等宽的列表，但是每一列中的元素高度不一定一致。这在 web 是一个很常见的设计且有很多组件可供使用，而在 ReactNative 中，少有成熟的瀑布流组件，大多数组件要么是多年前维护的，要么 star 数较少，或者干脆有一些不维护了，总之就是用着不放心。因此在产品同学的要求下，实现了一个 RN 瀑布流组件。这里只记录思路，具体代码后面添加了较多业务相关的，就不贴了。

背景

需求：实现一个选择快递的页面，操作类似于通讯录，设计图如下

上半部分的搜索交互及实现这里就不赘述，重点探讨字母列表的实现。

背景

在项目中看到一段小伙伴写的代码，简化后大概如下：

enum A {
  "ONE" = 1,
  "TWO" = 2
}

const a = Math.random() > 0.5 ? A.ONE : A.TWO

const b = Math.random() > 0.5 ? a : 0

if(b === 1 || b === 2) {
}

此时，b === 2 处 ts 会提示:

This condition will always return 'false' since the types '0' and '2' have no overlap.ts(2367)

为何 TypeScript 会提示 0 与 2 没有重合的地方呢？