找点乐子 Check List #58

Mr-haili · 2020-10-19T06:48:13Z

乐子

100 盗贼问题
airtable 的试用，功能拆解
工作流规范与模型的学习
fluent interface 的原理与试用
用户体验要素，阅读
写文章，聊聊前端组件库的搭建
我们需要一个 Builder 来帮助我们操作 options 类的数据（想法还是不够完整）

factory

基于 proxy 实现一个 BuilderFactory
基于上实现 FactoryFactory 用于快速组件衍生，加快组件的装配

https://exploringjs.com/es6/ch_proxies.html#_proxies-as-prototypes

proxy 这里充当了类似 prototype 的作用

28.3.6 Pitfall: not all objects can be wrapped transparently by proxies
当 proxyObj.a() 中 a 函数获得的 this 是 proxyObj 对象

28.3.6.2 Objects that can’t be wrapped transparently
对想不能被透明的包裹

typescript 中的 eq
microsoft/TypeScript#27024

参考项目

https://github.com/Vincent-Pang/builder-pattern

单独 column 层级上的 ColumnBuilder

每一个单一的 column 有 column 的模式
columns 的集合 columns 有整体的模式

针对这两个层级上的对象，我们是否可以整理出一套有限的标准操作来帮助我们快速的构建对象．
并最大化的利用信息．

一个独立的 column 可以通过 builder 模式来构建，
基于一个基础配置 aTypeColumn 去生成特定的 aTypeColumnBuilder，
后续的列使用 aColumn，这样基础配置 a 能被更方便的复用

ColumnsBuilder 用于对整体的 columns 的构建

columns 是线性数据结构（数组）
每一个 column 有唯一的 key 来标识
我们通过有限的基础操作对 columns 操作，完成构建.

对应的 ColumnsBuilder 提出如下基础操作：push, unshift, filter, override
push
unshift
filter
override column => nextColumn

这里没有添加 pop 和 shift 操作，因为希望移除特定列必须显式的声明并操作，
衍生操作：
pop 在队列的尾部添加一列
unshift 在队列的头部添加一列
omit 按 key 移除
pick 按 key 选择
override 按 key 覆盖

然后通过一个 Builder 来将这些操作放到一起，并提供一个 fluent 的接口来构建．

the cube

import { Selector } from "reselect";
import { useSelector } from "react-redux";
import { select } from "redux-saga/effects";

type Builder<T extends object> = {
  [key in keyof T]: (value: T[key]) => Builder<T>;
} & {
  build: () => T;
};

/**
 * 定义药方的基础结构
 */
interface IA<IProps = {}> {}

/**
 * 组件工厂
 * 基于模板组件做预加工，通过特定的数据通道链接到对应的数据源
 * 数据源分类：
 *
 * 1. constant 常量 (直接喂给组件)
 * 2. selector (通过 useSelector 转换成数据后喂给组件)
 *
 * NOTE:
 *   我们知否需要对一些属性做必填约束？
 *   组件的对外数据流动？ onClick 对应的暴露到一个对外的信号发送上，onClick 用户的点击操作，转换为一个 dispatch 一个 action
 *
 *   1. 链接连接线
 *   2. 信号转换发射器
 *
 * useState 的部分是否需要给予？
 *
 * NOTE: 容我三思
 *
 * 工厂启动需要解决的问题：
 * 　1. 通过 influent interface 由 Builder 负责构建出配方（诊断室：医生开出药房）
 * 　2. 最后构建出的配方交付给装配器 linker 进行装配（药房：药师抓药）
 *
 *   1. 是被哪些传入的上下文是 selector
 *
 */
export function ComponentFactory<TProps extends object>(ctx: TProps): Builder<TProps> {
  // 虚假的组件
  const Component: React.ComponentType<TProps> = {} as any;

  //

  const A = props => {};

  return A;
}

/**
 * 提供一个 fluent 的接口
 *
 * 最后的产物是一组配置信息传递给 linker 去完成组件最后的链接工作
 */
const ComponentBuilder = () => {};

/**
 * 组件连接器：链接组件与外部信息源（信源与信息）
 * 组件与外部数据管道链接
 *
 * 提交给连接器的应该是一个组件和一组xx（某种程度可以叫管线？？）的集合
 * 链接器会负责把这些 "管线" 和组件装配起来
 *
 * 1. constant 常量 (直接喂给组件)
 * 2. selector (通过 useSelector 转换成数据后喂给组件)
 *
 * 这里蕴含了２部分信息：获取数据的通道，数据流入组件的入口
 */
function linkComponent<TProps = {}>(
  Component: React.ComponentType<TProps>,
  constants: Partial<TProps>,
  selectors: { [key in keyof TProps]?: Selector<any, TProps[key]> },
) {
  const LinkedComponent: React.ComponentType<TProps> = props => {
    const valueProps: Partial<TProps> = {};
    for (const propKey in selectors) {
      const selector = selectors[propKey];
      if (selector) {
        const value = useSelector(selector as any);
        valueProps[propKey] = value as any;
      }
    }
    return <Component {...constants} {...valueProps} {...props} />;
  };
  return LinkedComponent;
}

interface IFakeButtonProps {
  title: React.ReactNode;
  onClick: () => void;
  type: string;
}

const a = ComponentFactory<IFakeButtonProps>()
  .title("你看见了标题")
  .type("你看见了类型");

https://zh.wikipedia.org/wiki/Drupal

https://juejin.cn/post/6844904106767695880