前端见闻录

背景

测试同学提了一个测试环境表格无法切换每页条数的 bug。

排查过程

在测试环境操作后发现，确实存在该问题，但是切换到对应测试分支，本地运行，未能重现。

背景

Redux 常常配合 react-redux 作为状态管理应用在 React 的项目中，并且基于 redux 发展出了 dva 之类的诸多状态管理工具。

说来惭愧，虽然在项目中常常使用到，但是并未阅读过 redux 的源码，了解其原理。本文作为学习笔记，并根据 redux 的比较核心的 createStore 这部分代码实现一个简易版本的 redux，以便将来回顾。

在以往的开发中往往会出现类似以下的代码

if(status === 1) {
   // do something
} else if(status === 2) {
   // do something
} else if (status === 3) {
  // ...
}

上面代码中的 1，2，3就是所谓的魔法数字，即没有注释的情况下我们很难知道 1，2，3 代表的到底是什么 status。

背景

场景：封装一个 antd 的 Radio 组件时，需要从父组件获取到 value 的类型。其 props 接口定义如下

interface CustomRadioProps<ValueType> {
  options: Option<ValueType>[];
  value: ValueType;
  onChange: (value: ValueType) => void;
}

使用时这里假设传进去的是个 number 类型

<CustomRadio<number>
  onChange={handleTypeChange}
  options={[
    {
      label: '1',
      value: 1,
    },
    {
      label: '1',
      value: 2,
    },
  ]}
  value={1}
/>

那么这个 CustomRadioProps 称为泛型组件。

那么如何定义一个泛型组件？

背景

Code Review 的时候看到小伙伴提交了一段用于提取文件拓展名的代码：

// 截取图片后缀信息
// example: 'www.baidu.com/somepic.jpg?h/w/'
// return: '.jpg'
const getExtension = (url = '') => {
  const end = url.indexOf('?') || undefined;
  const start = url.lastIndexOf('.', end);
  return url.substring(start, end);
};

这种写法固然没错，那么是否有别的写法嘞?

背景

最近在使用 ant design 的 Table 组件，遇到一个问题，定义 Table 的 columns 属性如下：

背景

Promise 是异步编程的一种解决方案，可以解决前端的回调地狱。以下根据 ES6 入门 简单过一下 Promise 的基础及个人的一些见解补充，同时尝试实现一个符合 PromiseA+ 规范的 Promise。

背景

最近有个需求：

1. 根据传入的 code 生成条形码 svg 图片
2. 将 svg 图片上传至 cdn
3. 展示图片时需要点击按钮后保存至本地

在 Vue（以下均指的是 2.x 版本） 中，数据模型仅仅是普通的 JavaScript 对象，当你修改它们时，视图会进行更新，这就是 Vue 的响应式系统，其设计模式就是观察者模式。

背景

在上一篇文章《debounce与throttle》 中提到了 RxJS， RxJS 中有两个重要的概念: Observable（可被观察者） 和 Observer（观察者），RxJS 的 Observable 就是观察者模式和迭代器模式的组合。

在 javascript 中，观察者模式和发布订阅模式极为相似，因此本文将探讨这两种模式以及其应用。