最近，开发格局发生了变化，实施起来似乎比以往任何时候都更容易 Mendix 小部件通过 氛围编码它的吸引力非常大：只需坐下来，放松一下，然后让人工智能生成代码即可。经过一番尝试和错误之后，你或许真的能得到一个可以运行的小部件和一个不错的用户界面。听起来很不错，对吧？

然而，这种看似简单的方法可能具有欺骗性。虽然人工智能无疑可以加速最初的搭建，但一个关键的事实依然存在：你仍然需要了解这个系统。如果没有这种基础的理解，仅仅依靠人工智能生成的代码很快就会变得类似于盲目地从 Stack Overflow 复制解决方案，而没有真正掌握其背后的原理。

开发小部件 Mendix 开发过程本身就伴随着一系列独特的挑战，需要深思熟虑的决策，这些决策不仅会影响开发过程，还会影响应用程序的长期成功。从选择合适的架构到处理数据和优化性能，每个决策都伴随着一系列的权衡。

通过探索不同的可用方法并理解其含义，您可以做出更明智的选择，并创建功能强大且可扩展的小部件。让我们深入了解 Mendix 小部件开发。

小部件架构——做出正确的选择

当为 Mendix首先从架构决策入手，确定最佳方法。您的选择很大程度上取决于小部件的复杂程度，您需要考虑以下几点：

• 小部件和 Mendix 组件
• 容器小部件
• 多个小部件
• 加载器小部件方法

首先想到的方法是为整个组件创建一个小部件。虽然这对于基本组件来说很简单，但当组件复杂且包含多个交互操作时，就会变得更具挑战性。

让我们用 待办事项清单 我将以widget为例，讨论实现同一个widget的三种不同方法。

方法 1：单个小部件作为列表容器

在此方法中，您将数据源添加到待办事项列表小部件的设置中。该小部件负责整个列表的渲染，让您完全控制视图。例如，您可以垂直、水平或使用自定义布局以卡片形式渲染项目，而这些布局在标准小部件中是无法实现的。 Mendix 列出组件。

但是，您需要处理小部件中所有与列表相关的挑战，包括但不限于分页、排序、筛选和延迟加载行为。这意味着您需要从头开始实现这些功能，而不是利用 Mendix的内置优化。

数据处理复杂性

下一个重大挑战是处理操作和数据更新。由于数据源是只读的，您无法直接修改待办事项。您需要一个虚拟属性来通过微流传递更改。这带来了一些实现挑战：

更新操作

对于删除项目或切换待办事项状态等简单操作，您可以实现单独的操作。但是，对于更复杂的更新，您必须将所有更改传递到单个微流，或者为每个更新操作（切换状态、更改标题、更改截止日期、更改优先级等）创建单独的微流。

性能考量

处理大型数据集时，您必须实现自己的分页逻辑。这包括管理页面大小、处理无限滚动的滚动事件，以及确保用户浏览数千个项目时的流畅性能。

内存管理

由于您要在小部件中处理整个数据集，因此需要注意内存使用情况，尤其是在移动设备上或处理大型列表时。使用分页可以缓解这个问题。

动作变量

从 10.21.0 版本开始，可以使用动作变量，这使得实现比以前更容易。在早期版本中，动作背后的 MF 不能有任何参数，MF 必须自行检索虚拟对象的值。

配置复杂度

这些额外的设置使得小部件的设置更加具有挑战性 Mendix 开发人员需要对几个关键配置有深入的了解。开发人员必须学习如何配置用于数据传递的虚拟对象，为不同的操作创建合适的微流，并确保适当的错误处理以应对失败的操作。此外，当多个用户编辑同一项目时，维护数据一致性需要格外谨慎和规划。

性能

完整的渲染控制
Widget 可以完全控制列表渲染（卡片、垂直、水平布局、自定义动画、拖放界面）。

高级过滤和排序
该小部件可以实现复杂的排序算法、多列排序和超出标准 Mendix 功能。

一致的风格
由于所有内容都包含在一个小部件中，因此更容易保持整个组件的样式一致性。

自定义交互
可以实现高级用户交互，如批量操作、键盘快捷键和复杂的选择模式。

缺点

整体复杂性
在小部件代码中创建一个具有增加复杂性的单片结构，使其更难维护和调试。

绩效实施负担
需要付出大量努力才能有效地实现分页、排序、过滤和延迟加载行为。

造型整合挑战
将小部件样式与应用程序的整体设计系统和主题变化保持一致变得更加困难。

复杂的设置要求
复杂设置 Mendix 开发人员，需要虚拟对象、多个微流以及对小部件内部数据流的理解。

测试复杂性
由于所有内容都紧密耦合在一个组件内，因此测试单个功能更加困难。

方法 2：列表项小部件

另一种选择是利用 Mendix的内置列表组件，例如 展示台 小部件， 列表视图 或 数据网格。在这种情况下，您只需构建项目小部件并在提供的列表容器中使用它 Mendix.
这种方法从根本上分离了不同组件之间的关注点。 Mendix 列表小部件处理所有复杂的列表管理任务：分页、延迟加载、排序和过滤。由于这些控件和模式对于 Mendix 开发人员，设置变得更加容易并遵循既定的模式。

利用 Mendix内置优化

通过使用 Mendix的原生列表组件，您将自动受益于：

• 优化数据检索： Mendix 自动实现高效的数据检索模式，包括 检索和聚合 当您只需要计数而不是完整数据集时，可以进行优化以减少数据库查询。
• 内置分页：本机分页处理，可配置页面大小，减少服务器负载并提高客户端性能。
• 延迟加载：用户滚动时自动延迟加载数据，防止不必要的数据检索并改善初始页面加载时间。
• 缓存机制： Mendix 实施智能缓存策略，减少冗余的服务器请求。

简化数据管理

如需添加新项目，您可以在小部件外部处理，例如显示弹出页面、模态窗口或导航至单独的表单。这种方法有几个好处：

• 熟悉的模式： Mendix 开发人员可以使用他们已经知道的标准页面布局、表单验证和样式方法。
• 访问控制：使用以下方式更容易实现基于角色的访问控制 Mendix的内置安全功能。
• 表单验证：可以利用 Mendix的验证框架和错误处理机制。
• 响应式设计：自动受益于 Mendix的响应式设计能力。

可编辑数据处理

用这种方法 所有 项目变得可编辑（取决于用户的对象访问权限）。在小部件中，实现更新逻辑变得非常简单：

• 直接对象操作：无需虚拟对象即可直接修改对象属性。
• 简化的微流程：更改的微流程很简单 - 它只需要提交对象，而不需要额外的操作虚拟参数。
• 实时更新：无需复杂的状态管理，更改即可立即反映在 UI 中。
• 验证集成：可以利用 Mendix的内置验证规则和错误处理。

性能

简化维护
显著简化小部件维护，降低代码复杂性并减少潜在故障点

标准性能模式
使用经过验证的、优化的分页、排序、过滤和延迟加载实践，并通过以下方式不断改进： Mendix

设计系统集成
更轻松地将小部​​件样式与应用程序的设计系统、自动主题支持和一致的用户体验进行对齐

开发人员友好的设置
简化设置 Mendix 开发人员——无需额外的虚拟对象、复杂的微流配置或了解内部小部件数据流

经过验证的可扩展性
受益于 Mendix经过测试和优化的列表处理功能，可以很好地适应大型数据集

可访问性合规性
自动继承 Mendix的可访问性功能和对网络标准的遵守

缺点

有限的渲染控制
减少对列表渲染选项的控制（仅限于 Mendix的内置布局选项）

定制限制
无法实现高度自定义的交互或布局 Mendix标准能力

高级功能限制
可能不支持复杂的拖放、自定义排序算法或独特的交互模式等高级功能

方法 3：多个小部件

第三种方案是构建多个相互连接的 Widget：一个用于渲染项目列表的容器 Widget，以及一个或多个用于渲染单个待办事项的 Widget。当你需要一些在 Mendix的内置列表组件，例如高级拖放功能、自定义布局算法或复杂的项目间交互。

这种方法也有利于更好的规划和迭代开发。您可以决定哪些部分需要自定义小部件，哪些部分可以利用 Mendix的内置组件。随着功能的迭代，您可以根据需要替换组件，而无需重建整个系统。

可扩展性和可重用性优势

在我们之前关于 所有 例如，如果我们构建了容器小部件，我们可以重用上面第二种方法中的项目小部件。然后，在容器小部件中，我们可以添加以下高级功能：

• 高级拖放：多方向拖动、带有视觉反馈的拖放区域以及复杂的重新排序逻辑
• 自定义布局算法：砌体布局、基于内容的动态大小调整或算法定位
• 批量操作：多选功能、批量编辑和复杂的选择模式
• 实时协作：多个用户编辑同一张列表时实时更新
• 高级过滤：自定义过滤器界面、保存的过滤器预设和复杂的查询构建器

多组件方法提供了更好的可扩展性和关注点分离。然而，为了使组件真正可重用且通用，您必须考虑增加实现的复杂性。
如果没有适当的抽象和设计，可重用性就会受到限制，维护也会变得更具挑战性。

实施复杂性考虑

此外，当同一页面上的多个小部件实例需要相互通信时，还存在重大挑战：

• 状态同步：确保数据更改时所有小部件保持同步
• 事件协调：管理小部件之间的复杂事件链
• 性能优化：防止不必要的重新渲染和数据获取
• 错误处理：优雅地处理一个小部件中的故障而不影响其他小部件
• 可放置区域配置：在小部件中实现预览模式，以在 Studio Pro 中预览可放置区域

国家管理挑战

小部件之间的信号和状态管理

多个小部件最显著的复杂性之一是小部件之间的通信和状态管理。当小部件需要了解彼此的状态时（例如，当用户在看板中将某个项目从一列拖到另一列时），您需要一个强大的通信机制。一个小部件必须隐藏该项目，而另一个小部件则必须显示该项目，同时还要保持数据一致性并提供流畅的用户反馈。
这需要小部件之间复杂的数据流和同步，这并不简单，需要特定的实现技术和仔细考虑边缘情况。

数据流模式

对于多个微件，数据提供方式与单个微件类似，但您需要建立可靠的模式来在微件之间传递数据。您可以使用容器微件来容纳子微件，但需要了解一些重要的限制。

虽然 React 开发人员可能认为他们可以将 props 从父组件传递到子组件，但这在 Mendix 可插入小部件。如果在父小部件中渲染另一个小部件， Mendix 运行时会使用 Studio Pro 中配置的小部件设置中的数据覆盖您传递的任何 props。这意味着您无法像在典型的 React 应用程序中那样通过组件树动态传递数据。

替代沟通方法

相反，您需要其他方法在小部件之间共享数据：

共享属性：

• 向一个小部件中写入另一个小部件可以读取的属性
• 当属性发生变化时，第二个小部件会自动重新渲染，因为它的 props 已经改变
• 提供自动反应，但频繁更新可能会导致性能问题
• 最适合简单的状态共享，例如选定的项目或过滤值

反应上下文：

• React 18 引入了状态管理的上下文（以前需要 Redux 等第三方库）
• 由于所有 Mendix 页面上的小部件由相同的 React DOM 渲染，它们之间可以共享上下文
• 您可以在一个小部件中创建上下文提供程序，然后在其他小部件中使用它
• 非常适合复杂的状态管理和避免 prop 钻探
• 需要仔细设置以防止内存泄漏并确保正确清理

发消息API：

• 这一既定机制利用 window.postMessage API 在页面上发送事件
• 无论小部件位于何处，甚至跨 iframe，它们都可以订阅这些事件
• 提供小部件之间的松散耦合，但需要仔细的事件命名和有效负载结构
• 最适合单向通信和事件广播
• 可以跨不同的页面甚至不同的应用程序工作

造型挑战

使用多个小部件时，样式设置会变得更加复杂。当您希望从其他小部件访问某个小部件中的 CSS 样式表时，您需要仔细规划样式架构：

共享存储库结构：

• 使用两个小部件都可以访问的更大的存储库结构
• 实现可以共享通用样式的构建过程
• 需要小部件开发团队之间的协调
• 可能导致版本同步挑战

设计系统集成：

• 将样式完全移出小部件，并使其成为设计系统的责任
• 在小部件中使用设计系统中的类，并将设计系统样式记录为间接依赖项
• 提供更好的一致性，但需要成熟的设计系统
• 可能会限制单个小部件的自定义选项

基于模块的发布：

• 将您的小部件发布为模块而不是独立小部件
• 这允许导出可在小部件之间共享的 CSS 文件
• 提供更多灵活性，但使发布和分发过程复杂化
• 需要了解 Mendix 模块开发模式

设置复杂性和开发人员经验

对于 Mendix 对于开发人员来说，设置多个小部件比配置单个小部件要困难得多。复杂性体现在以下几个方面：

配置依赖项：

• 通过一个小部件，开发人员可以进行简单的数据源配置
• 对于多个小部件，它们必须理解并遵循开发中使用的特定模式
• 错误的配置可能导致功能损坏或性能下降

数据结构要求：

• 多个小部件通常需要特定的数据结构和关系
• 开发人员必须了解小部件如何通信以及每个小部件需要什么数据
• 文档对于成功实施至关重要

部署协调：

• 所有相关小部件必须一起部署以确保兼容性
• 小部件之间的版本不匹配可能会导致运行时错误
• 需要仔细的发布管理和测试程序

调试复杂度：

• 问题可能涉及多个小部件，使调试更具挑战性
• 开发人员需要了解整个小部件生态系统才能解决问题
• 需要对所有小部件进行全面的日志记录和错误处理

性能考量

多个小部件还会引入单个小部件不存在的性能考虑：

• 渲染协调：多个小部件同时重新渲染可能会导致性能瓶颈
• 内存管理：每个小部件都维护自己的状态，这可能会导致内存使用量增加
• 网络优化：多个小部件同时进行 API 调用可能会使服务器不堪重负
• 事件处理：如果没有进行适当的优化，小部件之间的复杂事件链可能会产生性能问题

尽管面临这些挑战，但正确实施后，多组件方法将发挥极其强大的作用。它能够灵活地创建复杂的用户界面，同时保持代码的模块化和可重用性。关键在于提前仔细规划架构，并建立清晰的通信、样式和数据管理模式。

三种方法的示例

为了进行比较，我使用了上述所有方法实现了三个待办事项列表展示小部件。代码主要由 Vibe 使用 Copilot 生成。我提示了需求和预期功能，然后对其进行迭代以获得预期结果。请注意，这些代码库仅为展示示例，尚未通过可用于生产环境的质量控制。

• 来看一个代码示例： https://github.com/MeisamMahdian/showcase-todolist-single-widget
• 方法二代码示例： https://github.com/MeisamMahdian/showcase-todolist-single-item
• 方法三代码示例： https://github.com/MeisamMahdian/showcase-todolist-container-widget

最后，我希望这篇文章能让你更清楚地了解 Mendix 小部件架构，展示了为什么除了简单的代码生成之外，全面掌握平台对于制定卓越的定制解决方案是不可或缺的。