front business logic 前端业务逻辑

[WangShuXian6]

front business logic 前端业务逻辑

[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;