设计基础原则

为什么需要设计

唯一不变的只有变化本身

  1. 降低维护成本
  2. 提高开发效率
  3. 快速响应多变的需求
    4. 准时下班

如何设计

  1. 你可能根本无需设计, 提前设计往往是过度设计.
  2. 尽可能遵守KISS原则, 使代码保持简单, 根据三次原则, 重复三次的逻辑再做抽象.
  3. 确认功能的边界, 遵守SOLID原则, 尽可能保持功能之间的独立.

什么是好的设计

  1. 一致性 一致性的概念很广泛, 包括但不限于同样的风格、数据结构、驱动方式等, 下面就驱动方式作例子

    不好的例子

1
2
3
4
5
6
7
8
9

const [val, setVal] = useState();
const [val_1, setVal_1] = useState();
function doSth(){
    setVal(...)
}
useEffect(()=>{
    // 通过观察者去负值val1
    setVal1(val)
}, [val])

好的例子

1
2
3
4
5
6
7

const [val, setVal] = useState();
const [val_1, setVal_1] = useState();
function doSth(){
    // 行为放一起
    setVal(...)
    setVal1(...)
}
  1. 高复用性 这个说白就是别把代码写死, 灵活使用抽象和设计.

坏

 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

    {
      title: '项目',
      dataIndex: 'prdId',
      renderFormItem(config) {
        const handledDateTime = dateTime?.map(item => item?.format('YYYY-MM-DD')) as string[];
        return (
          <div {...config}>
            <ProductSelector<number[]>
            // 接收一大堆 莫名奇妙的props 内部也没有多内聚
              prdId={prdIds}
              date={handledDateTime && handledDateTime[1]}
              departmentId={department}
              multiple={true}
              clearable={false}
              autoSelect={true}
              autoSelectAll={true}
              checkType={'checkItem'}
              customAllSelectOptions={{ label: '汇总', value: -999 }}
              onChange={(value: number[], options) => {
                setPrdIds(value);
                if (options?.length) {
                  setPrdOptions(options);
                } else {
                  const newOptions = [...defaultPrdOptions];
                  if (newOptions[0].value === -999) newOptions.shift();
                  newOptions.unshift({ label: '汇总', value: -999 });
                  setPrdOptions(newOptions as Options);
                }
              }}
            />
          </div>
        );
      },
    }

好

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    {
      title: '项目',
      dataIndex: 'prdId',
      renderFormItem(config) {
        return (
          <div {...config}>
          // AOP 模式, 每个切片单一责任 分工明确
            {compose(
              SelectAll,
              Search,
            )(
              // 原始组件照常使用
              <Select
                onChange={setPrdIds}
                loading={prds.isLoading}
                options={prds.data}
                maxTagCount={1}
                maxTagTextLength={12}
              />,
            )}
          </div>
        );
      },
    },
  1. 低耦合度
    不要依赖来, 依赖去; 相互的依赖交给统一的interface、context和store去做例如

    不要

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function Father() {
  const store = useStore();
  return (
    <>
      <Child {...store} />
      <Child {...store} />
      <Child {...store} />
    </>
  );
}

function Child(props) {
  // use props.store dosth
}

而是

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

function Father() {
  return (
    <>
      <Child />
      <Child />
      <Child />
    </>
  );
}

function Child(props) {
  const store = useStore();
  // use store dosth
}