介绍

基于组件的结构侧重于将设计分解为具有单独的功能或者逻辑组件，这些组件包含方法，事件，属性以及具有明确定义的通信接口！它对问题进行高度准确的抽象，并每个大问题划分为子问题。每个子问题又可以组成不同的集合。那我们该如何基于组件架构将设计分解为包含事件、方法和属性的逻辑组件？

什么是组件

组件可以被认为是构成用户界面的一小部分功能。

例如在react.js中，弹出框可以是一个组件，按钮有可能就是另一个组件，又或者一个无限滚动的表格也是一个组件！

尽管这些组件共享相同的空间，但是他们却以不同的方式相互作用！组件是独立的，具有自己的结构，方法和API。组件可以重复使用，也可以随时进行更新！组件的独立性保证了开发人员创建具有不同功能的组件！

组件的机制

组件基于AJAX请求，他是客户端调用服务器，允许动态更新DOM，而无需刷新页面！每个组件都有自己的接口，可以与服务器通信并更新自己的接口。因为组件时独立的，我们可以刷新一个组件而不影响整个UI!

基于组件的设计原则

组件级设计，可以使用图形，表格和基于文本等可以转换为源码的中间件表示！为了帮助我们避免导致错误，数据结构、接口和算法的设计应该遵循完善的规则。

• 软件系统被分解为可重用、内聚和封装的组件单元。
• 每个组件都有自己的接口，描述所需和提供的接口，每个组件都隐藏了其实现的细节。
• 组件应该被扩展而不需要对组件的现有部分进行内部代码或设计修改。
• 依赖抽象组件不依赖其他具体组件，增加了可扩展性的难度。
• 连接器连接组件，指定和管理组件之间的交互。交互类型由组件的接口指定。
• 组件交互可以采用方法调用、异步调用、广播、消息驱动交互、数据流通信和其他协议特定交互的形式。

参考

• w3schools.com/xml/ajax_intro.asp
• medium.com/@dan.shapiro1210/understanding-c…
• tutorialspoint.com/software_architecture_de…
• tutorialride.com/software-architecture-and-…