-
guqing commented on pull request #6364 in halo-dev/halo
-
guqing commented on issue #7 in halo-sigs/plugin-injection
/assign @CaiHaosen
-
guqing opened issue #7 in halo-sigs/plugin-injection
现状
目前代码注入的编辑和创建公用一个表单并且逻辑混在一起来处理建议
-
拆分表单组件:
将表单拆分为单独的视图组件(如 HtmlInjectionForm),这有助于提高代码的可维护性和重用性。通过这样做,你可以将表单的展示逻辑和数据处理逻辑分离,从而使代码更清晰和模块化。 -
创建独立的创建和编辑组件:
分别创建 新增 (HtmlInjectionCreationModal)和 编辑 (HtmlInjectionEditionModal)的组件来调用HtmlInjectionForm
,这使得你可以在这些组件中分别处理各自的逻辑,而不必将所有的逻辑混在一个组件中。这样做不仅使代码更具可读性,还能使每个组件专注于自己的职责,从而减少耦合度。 -
数据回调和逻辑处理:
通过在 HtmlInjectionForm 中定义 submit 事件来允许调用者通过@submit="onSubmit"
来得到表单数据进行额外的逻辑处理如调用 API 与服务端交互,而将表单的展示和基本交互逻辑留在 HtmlInjectionForm 中,表单需要渲染的表单项通过如定义form-state
props 来传递并根据条件渲染,参考 Post form-state props。这种做法符合单一职责原则,使得每个组件只做一件事,并做得很好。
优点
- 模块化: 将表单逻辑和显示逻辑分离,代码更具模块化。
- 可维护性: 每个组件专注于自己的职责,逻辑更清晰,易于维护。
- 可复用性: 表单组件 HtmlInjectionForm 可在其他地方重复使用,而不必重复编写代码。
这种结构符合 Vue 的组件化思想,也是前端开发中推荐的最佳实践。
参考:
-
-
guqing created a review on pull request #6 in halo-sigs/plugin-injection
-
guqing commented on issue #6375 in halo-dev/halo
-
guqing created a review on pull request #6375 in halo-dev/halo
-
guqing commented on issue #6373 in halo-dev/halo
-
guqing commented on issue #16 in halo-sigs/halo-gradle-plugin
-
guqing pushed to feature/api-client in halo-sigs/halo-gradle-plugin
-
guqing commented on issue #6365 in halo-dev/halo