toB开发范式

前言

B端开发，也被称为后台开发或者企业级开发，是针对企业或者组织的业务需求进行的软件开发。在 B 端开发中，我们通常关注的是系统的功能性、稳定性、可扩展性以及安全性，从面向过程编程 -> 面向对象编程 + 组合式编程

以下是 B 端开发体系的一些主要元素：

技术栈：B 端开发通常涉及到复杂的技术栈，包括编程语言（ JavaScript ）、框架（React）等等。
架构设计：因为 B 端业务的复杂性，所以架构设计尤为重要。包括如何有效地分层（视图层，逻辑层，服务层）、如何进行微服务化、如何保证系统稳定性等等。
性能优化：B 端开发需要关注系统的性能。这不仅包括服务响应速度的提升，还包括如何在高并发环境下保持系统的稳定性。
安全：B 端开发需要对安全进行严格的考虑，包括数据的加密存储、传输安全、权限控制等等。
设计模式：针对一些复杂的场景设计，设计模式的建立，往往会带来可靠的代码维护和扩展。
其他

理解和掌握 B 端开发体系需要一点时间，但是这对于追求成为一名优秀的前端开发者来说，是非常必要的。

我们以典型的B端页面组成为例，上层搜索组件，下层列表展示 + 分页

技术栈

iCE + React + Zustand + SWR + Ant Design + react-intl

架构设计

视图层

// Container 容器
/*
 * @Author: Jiang
 * @Date: 2024-03-05 16:09:33
 * @Last Modified by: Jiang
 * @Last Modified time: 2024-03-05 16:15:01
 */

import { useState } from 'react';
import Search from './components/search/';
import List from './components/list';
import styles from './index.module.less';

const Container = () => {
  const [condition, setCondition] = useState(null);
  const { setStoreFilterConditions, setAdvConditionGroups } = tradeStore();

  return (
    <div className={styles.logPageView}>
      <Search />
      <List />
    </div>
  );
};

export default Container;

/*
 * 列表组件
 * @Author: Jiang
 * @Date: 2024-03-05 16:09:33
 * @Last Modified by: Jiang
 * @Last Modified time: 2024-03-05 16:10:03
 */

import { useState } from 'react';
import Search from './components/search';
import List from './components/list';
import styles from './index.module.less';

const List = () => {
  const [condition, setCondition] = useState(null);
  const { setStoreFilterConditions, setAdvConditionGroups } = tradeStore();

  return (
    <div className={styles.logPageView}>
      <div>123</div>
    </div>
  );
};

export default List;

逻辑层

import { create } from 'zustand';
import containerService from '@/services/system/cacheService';

const initialState = {
  tabCondition: ''
};

export const containerStore = create()((set) => ({
  ...initialState,
  getLocation: ({ location }) => {
    set((state) => ({ ...state, tabCondition: location }));
  },
  reset: () => {
    set(initialState);
  },
}));

服务层

export default {
  async getQueryField(param) {
    const queryParam = {
      catalog: param.catalog,
      codes: typeof param.codes === 'string' ? param.codes.split(',') : param.codes,
    };
    const url = `${config.tradecURL}${config.apiVersion}/databases/query-fields`;
    const data = await request.post(url, queryParam);
    return query_field_format(data);
  },
  // 修改自定义列
  async updateDisplayField(param) {
    let res = await request.post(`${config.tradecURL}${config.apiVersion}/databases/custom-query-columns`, param);
    return {
      list: displayFieldFormat(res.columns, res.id),
      type: res.type ? res.type : 'COMPACT',
    };
  }
}