当前位置：首页 > 文章列表 > 文章 > 前端 > 层次扁平化：管理软件设计复杂性的秘诀

层次扁平化：管理软件设计复杂性的秘诀

来源：dev.to 2024-11-21 21:28:09 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《层次扁平化：管理软件设计复杂性的秘诀》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

层次扁平化：管理软件设计复杂性的秘诀

在软件开发中，我们经常发现自己在兼顾两个看似矛盾的需求：以对人类思维有意义的方式组织代码，以及在运行时有效地处理代码。本文探讨了分层结构及其扁平化结构如何服务于不同的目的，以及理解这种二元性如何使我们成为更好的开发人员。

代码组织的双重性质

当我们开发软件时，我们在两个不同的环境中操作：

设计时间：我们组织、理解和维护代码的地方
运行时：我们处理和执行代码的地方

这些环境有不同的要求，在一种情况下效果最好的方法可能对另一种情况却不是最佳的。让我们来探究一下原因。

设计中层次结构的力量

层次结构是人类认知的自然现象。我们本能地将信息组织在树和嵌套类别中。在软件开发中，这体现在几个方面：

目录结构
套餐组织
类继承
成分组成
领域建模

考虑一个典型的 react 应用程序的路由结构：

src/
  routes/
    public/
      homeroute.js
      aboutroute.js
    private/
      dashboardroute.js
      profileroute.js
    common/
      notfoundroute.js

此层次结构立即进行通信：

公共和私人路线的分离
相关组件的逻辑分组
访问控制边界
整体应用结构

运行时扁平化结构的效率

虽然层次结构非常适合组织，但在运行时处理方面，扁平结构通常会提供显着的优势：

简化处理：线性数组更容易遍历、过滤和变换
降低复杂性：无需处理嵌套结构或递归操作
更好的性能：无需遍历层次结构即可直接访问元素
更轻松的状态管理：更扁平的结构更容易更新和维护
简化的算法：许多操作变成简单的迭代而不是递归遍历

现实示例：路线管理

让我们看一下该原则的实际应用示例。这是一个弥合分层路由组织和运行时处理之间差距的实用程序：

import { readdirsync, statsync } from 'fs';
import { join } from 'path';

export const deepmaproutes = async (routesdir) => {
  const routes = [];

  const traversedir = async (currentdir) => {
    const files = readdirsync(currentdir);

    for (const file of files) {
      const filepath = join(currentdir, file);
      const stat = statsync(filepath);

      if (stat.isdirectory()) {
        await traversedir(filepath);
      } else if (
        stat.isfile() && 
        (file.endswith('.jsx') || file.endswith('.js')) && 
        !file.startswith('index')
      ) {
        const module = await import(filepath);
        if (array.isarray(module.default)) {
          routes.push(...module.default);
        } else if (module.default) {
          routes.push(module.default);
        }
      }
    }
  };

  await traversedir(routesdir);
  return routes;
};

这段代码将我们组织良好的分层路由结构转换为一个非常适合运行时处理的平面数组。好处包括：

简化的路线匹配
更轻松的路线授权检查
简化的导航处理
简化的路由修改和过滤

路线之外：其他应用

这种具有运行时扁平化的分层组织原则适用于许多其他场景：

1. 文件系统操作

// hierarchical for organization
documents/
  work/
    projects/
  personal/
    finances/

// flattened for processing
[
  'documents/work/projects/project1.doc',
  'documents/personal/finances/budget.xlsx'
]

2. 菜单结构

// hierarchical for ui
menu/
  file/
    new/
    open/
  edit/
    copy/
    paste/

// flattened for command processing
[
  { id: 'new', shortcut: 'ctrl+n' },
  { id: 'open', shortcut: 'ctrl+o' },
  { id: 'copy', shortcut: 'ctrl+c' }
]

3. 组件库

// Hierarchical for documentation
components/
  inputs/
    text/
    select/
  displays/
    card/
    modal/

// Flattened for registration
{
  'TextInput': TextInputComponent,
  'SelectInput': SelectInputComponent,
  'Card': CardComponent,
  'Modal': ModalComponent
}