front business logic 前端业务逻辑

[WangShuXian6]

前端业务逻辑 front business logic

业务逻辑 = 组件逻辑+数据逻辑

风格指南 style guide

保持业务逻辑无依赖

对代码的关键任务部分使用很少甚至不使用第三方库。 确保除了业务规则的更改之外，没有其他原因需要更改代码。

例如 更改 Store 解决方案时（Redux 转移至 Vuex），业务没有一点改变，应用程序的业务逻辑有多少会受到影响？有多少宝贵的业务规则需要重写？

复杂的业务逻辑代码应该是和react和redux解耦，不应该和任何state,或者事件挂钩 可以在action或者reducer，甚至react组件里再来调用这些业务代码

无依赖代码更容易测试。尽可能多地测试重要代码

---

UI 必须与业务规则分开

[WangShuXian6]

业务逻辑常见错误

使用“data-”属性在 DOM 元素中存储重要的业务数据

数据集属性绝不意味着存储业务数据。它们是 DOM API 的一部分。 而 DOM 一直处于应用程序规模中称为“视图”、“表示”、“UI”的那部分。它与您的应用程序的业务逻辑无关。 它的存在只是为了将这个逻辑的结果呈现给用户并从他们那里收集反馈

---

将业务逻辑与 UI 耦合 [逻辑取决于 UI]

这严重违反了单一职责原则（SOLID 中的“S”）。 每次更改这些 UI 元素时，都存在业务逻辑发生潜在变化的风险。

example

componentDidMount() {
   axios.get(‘/articles/’)
}

methods: {
  calculateDiscount(){
    // actual code that 
    // makes business-critical calculations 
    // for the price of the product
  }
}

---

应用程序的业务逻辑，软件中最有价值和最关键的部分，依赖 第三方解决方案

---

混合逻辑和存储

这违反了关注点分离原则

Store 只有一个职责：存储数据。它与业务逻辑无关 Store不关心您如何、从何处以及为什么获取数据。它只负责存储并明确地提供给 UI

example

将业务逻辑与 Flux/Redux/Vuex或任何其他第三方解决方案结合在一起

[WangShuXian6]

React业务逻辑 React business logic

使用 hooks 隔离业务逻辑

example UI 部分

// Presentational component
const QuantitySelector = () => {
  const { onClickPlus, onClickMinus, state } = useQuantitySelector();
  const { message, value } = state;
  return (
    <div className="quantity-selector">
      <button onClick={onClickMinus} className="button">
        -
      </button>
      <div className="number">{value}</div>
      <button onClick={onClickPlus} className="button">
        +
      </button>
      <div className="message">{message}</div>
    </div>
  );
};

export default QuantitySelector;

业务逻辑部分

import { useState } from "react";

// Business logic. Pure, testable, atomic functions
const increase = (prevValue, max) => {
  return {
    value: prevValue < max ? prevValue + 1 : prevValue,
    message: prevValue < max ? "" : "Max!",
  };
};

const decrease = (prevValue, min) => {
  return {
    value: prevValue > min ? prevValue - 1 : prevValue,
    message: prevValue > min ? "" : "Min!",
  };
};

// Implementation/framework logic. Encapsulating state and effects here
const useQuantitySelector = () => {
  const [state, setState] = useState({
    value: 0,
    message: "",
  });
  const onClickPlus = () => {
    setState(increase(state.value, 10));
  };
  const onClickMinus = () => {
    setState(decrease(state.value, 0));
  };
  return { onClickPlus, onClickMinus, state };
};

export default useQuantitySelector;