问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

想要项目框架和组件A进行解耦。 组件A可以封装打包发布出去，这里应该如何设计这里的设置功能呢，才不能有耦合？

头像头饰
letier
    1.1k112531

    请问下，这样的需求场景应该如何设计呢？

    组件A是设计出来给项目使用的，
    项目有一个设置按钮，可以设置组件A展示的内容。

    然后组件A可以进行展示项目设置的内容。

    QQ_1725188355932.png

    现需求：
    1、想要项目框架和组件A进行解耦。
    组件A可以封装打包发布出去，这里应该如何设计这里的设置功能呢，才不能有耦合？
    2、因为项目设置按钮下面可以扩展为设置组件B/C/D...的展示，所以不能把设置按钮放在组件中
    3、一般这样的前端项目的设置一般持久化是如何做的呢？比如我们经常看到的软件：VSCode或者其他的前端开源项目持久化设置信息。

    Microsoft前端typescript设计设计模式面向对象编程
    阅读 1.5k
    avatarAI BotBETA

    1. 组件A与项目框架的解耦设计

    为了实现组件A与项目框架的解耦，你可以采用以下设计思路：

    • 使用Props传递配置：组件A应该通过props接收所有必要的配置信息。这样，无论项目框架如何变化，只要传递给组件A的props保持不变，组件A的行为就不会受到影响。
    • 定义清晰的接口：在项目框架中定义一个清晰的接口（或配置对象），用于描述组件A需要的所有配置信息。这样，组件A的开发者就可以根据这个接口来编写组件，而项目框架的开发者则负责填充这个接口。
    • 使用Context API（如果适用）：如果组件A的配置信息需要在多个组件层级间共享，可以考虑使用React的Context API。这样，即使组件A被嵌套在很深的层级中，也能方便地访问到配置信息，而无需通过props层层传递。

    2. 设置功能的解耦设计

    由于设置按钮不能放在组件中，你可以考虑以下方案：

    • 全局状态管理：使用Redux、MobX或React的Context API等全局状态管理工具来管理设置信息。这样，无论是项目框架还是组件A，都可以从全局状态中读取或修改设置信息，而无需直接相互引用。
    • 事件总线（Event Bus）：实现一个简单的事件总线，用于在项目框架和组件A之间传递设置变更的事件。当设置发生变化时，项目框架通过事件总线发布一个事件，组件A监听这个事件并更新自己的状态。

    3. 持久化设置信息

    前端项目中持久化设置信息通常有以下几种方式：

    • LocalStorage/SessionStorage：对于简单的键值对设置，可以使用浏览器的LocalStorage或SessionStorage进行存储。这些存储方式简单易用，但受限于浏览器存储大小和同源策略。
    • IndexedDB：对于需要存储更复杂数据结构或大量数据的场景，可以考虑使用IndexedDB。IndexedDB是一个低级的API，用于客户端存储大量结构化数据，并提供比LocalStorage更高的存储限制。
    • 第三方服务：如果项目需要跨设备或跨浏览器同步设置信息，可以考虑将设置信息存储在第三方服务（如Firebase、AWS Amplify等）中。这些服务提供了丰富的API和强大的功能，可以方便地实现数据的同步和备份。
    • Cookies：虽然Cookies主要用于存储用户会话信息，但在某些场景下也可以用来存储简单的设置信息。不过，由于Cookies的大小限制和每次HTTP请求都会携带Cookies，因此不建议用它来存储大量数据。

    结论

    通过上述设计思路，你可以有效地实现项目框架与组件A的解耦，并灵活地管理设置信息的持久化。在实际开发中，你可以根据项目的具体需求和团队的技术栈来选择合适的方案。

    1 个回答
    得票最新
    头像头饰
    Meathill
      22.2k123642
      1. 适合单独拿出去的组件都是非常独立，且几乎不包含业务逻辑的。比如我们常见的组件库，按钮、弹窗、Tabs 这种组件，跟业务完全不相关，独立出来就比较合适
      2. 如果一个组件包含比较多的业务逻辑，但是在公司内部多处要使用，也可以
      3. 否则的话，如果组件包含太多业务逻辑，可能没法独立出去
      4. 至于如何解耦，要看你用什么语言什么框架
      5. 最后，如果版本也是你比较关心的，可以考虑 monorepo
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏