前端组件封装性出现问题记录

CSDN话题挑战赛第2期
参赛话题:学习笔记

一:封装性出现的问题:

问题1:组件内部api请求。暴露在父组件?(子组件的api请求应在自身组件内完成)

父组件里出现了大量的子组件的细节。比如api请求,是不需要在父组件里出现的。这个细节应该隐藏在子组件里。

问题2:大量子组件的css,暴露在父组件? (子组件的样式要单独写在组件内部,如要复用一个组件的时候,不需要再把visibe,api,css等一大堆的东西再引入一遍。)

至于每个子组件的样式细节,是完全不需要在父组件里看到的。而且多个子组件的样式细节也容易混淆,代码无法分割,我想删除一部分代码的时候,发现都不知道哪些可以删,哪些不能删

问题3:子组件的显示和隐藏的逻辑,保留在父组件 ?(子组件设置:visible属性控制显隐)

这样看,如果是引用了多个子组件,每个儿子组件都有显示和隐藏的话,那么父组件里就要有5个visible变量。

这个对于业务开发是非常不友好的。

问题5:子组件的数据组装转换细节,保留在父组件 ?(子组件数据应该在自

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端开发中常用的设计模式包括单例模式、外观模式、工厂模式和装饰器模式。 单例模式是一种保证一个类只有一个实例的设计模式。在前端开发中,常用于管理全局状态或资源,例如全局的状态管理器、全局的配置对象等。通过单例模式,可以确保全局状态的一致和避免重复创建实例。 外观模式是将多个子系统的复杂逻辑进行抽象和封装,提供一个更统一、更简洁、更易用的接口。在前端开发中,常用于封装复杂的原生DOM操作、封装与后端API的交互逻辑等。通过外观模式,可以简化代码的调用和维护,提高开发效率。 工厂模式是用来创建对象的一种常见设计模式。在前端开发中,常用于创建大量相似的对象,避免重复的构造函数代码。通过工厂模式,可以快速创建对象,并且可以在工厂函数中封装一些创建对象的逻辑,提高代码的可维护和可扩展。 装饰器模式是一种动态地给对象添加额外功能的设计模式。在前端开发中,常用于给已有的对象或函数添加一些额外的功能,例如给组件添加日志记录、给函数添加能监控等。通过装饰器模式,可以灵活地扩展对象或函数的功能,而不需要修改原有的代码。 以上是前端开发中常用的设计模式,通过使用这些设计模式,可以提高代码的可复用、可扩展、可维护和灵活。 #### 引用[.reference_title] - *1* *3* [浅谈Vue项目中用到的设计模式](https://blog.csdn.net/Model_yc/article/details/127425717)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [9种前端常见的设计模式](https://blog.csdn.net/php_martin/article/details/125890194)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kingsaj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值