对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下!

开发
我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

 [[334363]]

我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。

有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它。

这里有6个不同级别的可重用性概念,大家先来体会体会,后续更新会一个一个的讲。

1.模板化

通过模板化,我们将一些重复性高的代码包装在其自己的组件中,而不是在周围到处复制和粘贴代码。

  • 当我们重用该组件(而不是直接使用代码)时,它为我们带来了两个好处:
  • 将来进行更改就会容易得多,因为我们只需要在一个地方更改

我们不必记住每个重复代码被复制到了哪些地方

这是最基本的,也是最经常谈论的可重用性形式。

2. 可配置

对于某些组件,我们需要根据需求对它们的工作方式进行修改,如:

Button组件默认有一个主版本,也有一个带有图标版本。但我们没有为每个版本创建全新的组件,而是指定 props 做到不同类型之间切换。

添加这些props通常不会给组件增加很大的复杂度,同时,又能给我们在使用组件方面带来更多在的灵活性。

注意:这不同于使用prop来保存状态或数据,比如loading prop 或disabled prop。

3.适应性

可配置的最大问题是缺乏远见。我们需要预见将来的需求,并通过放置对应的 prop 将它们构建到组件中。

但是,如果你的组件具有足够适应性,则无需更改组件即应对未来的需求。

为了让我们的组件具有足够的适应性,我们可以使用 插槽 来实现。

例如,我们可以使用默认的插槽来代替在传入Button组件的 text :

  1. <!-- Button.vue --> 
  2. <template> 
  3.   <button 
  4.     class="btn btn--default" 
  5.     @click="$emit('click')" 
  6.   > 
  7.     <slot /> 
  8.   </button> 
  9. </template> 

现在我们不局限于传入的类型是 string 还是 number。

如果我们想在不修改 Button 组件的情况下添加loading ,我们可以这样做:

  1. <template> 
  2.   <Button> 
  3.     <img 
  4.       v-if="loading" 
  5.       src="spinner.svg" 
  6.     /> 
  7.     Click Me 
  8.   </Button> 
  9. </template> 

4.反转性

除了通过插槽传递完整的标记块给我们的子组件,我们还可以传递一组有关如何渲染的指令。

这就像我们根据食谱来做菜,而不是叫外卖。当我们遵循食谱时,需要做更多的工作,但是我们完全可以按自己的节奏来制制作, 我们可以随时进行调整,也可以完全放弃不按食谱的流程来。

我们使用作用域插槽来为我们的组件增加更大的灵活性。

5. 扩展

通过适应性和反转性,我们拥有必要的一些技术基础,这些技能可以最大限度地提高组件的可重用性。

下一步是将这些技术应用于整个组件,以便我们更轻松地扩展其行为。

我们使用命名插槽在组件中添加一个或多个扩展点。仅适应性和反转性本身给我们提供了扩展行为的一种选择,而拥有多个扩展点则为我们提供了许多不同的选择。

这里,我们有一个Modal组件,其中包含header,default和footer:

  1. <template> 
  2.   <div class="modal"
  3.     <slot name="header"
  4.       <h2>{{ title }}</h2> 
  5.     </slot> 
  6.  
  7.     <!-- Default slot for main content --> 
  8.     <slot /> 
  9.  
  10.     <slot name="footer"
  11.       <Button @click="closeModal"
  12.         Close 
  13.       </Button> 
  14.     </slot> 
  15.   </div> 
  16. </template> 

这是一个相当简单的扩展示例,其中我们已经有几个扩展该组件的选项:

  1. 只需覆盖default slot即可添加我们的内容
  2. 可以通过插槽名来覆盖 header 的内容
  3. 可以通过插槽名来覆盖 footer 的内容,其内容还是以不同风格按钮为主
  4. header和 footer的插槽更多是用于自定义

你不必扩展此组件的行为,但也可以扩展其一部分。无论哪种方式,我们都能获得很大的灵活性和大量的代码重用性。

6. 嵌套

在扩展之上更高级重用性就是嵌套, 我们可以多个基本组件为基础, 一层嵌套一层,一开始可能听起来很疯狂,但它非常有用,特别是在大中型应用程序中。

我们从一个通过基础组件开始,该组件的功能相当普遍。下一个组件就更加具体,以几种方式扩展了基础组件。然后不断以前面基础组件为底往上扩展,直到我们拥有完成实际工作的最终组件。

这类似我们从非常普通的动物(Animal )到更特定的哺乳动物(Mammal ),然后是狗(Dog ),最后止于贵宾犬(Poodle)的方式。如果我们需要的只是贵宾犬(Poodle)组件,看上去,我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了,我们需要在相同的基本概念上进行多次更改,来满足不同的个性化需求,这时这种以基础组件嵌套的思想就很重要。

我们可以扩展犬类(Dog)组件来获得柯基犬(Corgi )和比格犬(Beagle)组件。或者扩展哺乳动物(Mammal )组件以获得猫(Cat )组件,这样就可以添加老虎(Tiger)和狮子(Lion)组件。

总结

以上是6个可重用性级别一些概述,当然很有可能会错过一些内容,但基本是可以为我们封装组件提供了一个大致思路,也是很不错的方式。

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。

作者:Michael Thiessen 译者:前端小智 来源:news

原文:https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss

江南一点雨 本文转载自微信公众号「 大迁世界」,可以通过以下二维码关注。转载本文请联系 大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2023-06-30 08:27:20

2019-01-31 07:16:06

2022-08-29 07:48:27

文件数据参数类型

2022-12-02 14:20:09

Tetris鸿蒙

2020-07-23 07:51:51

Python编程语言工具

2023-06-05 14:14:21

腾讯索引面试

2022-11-14 08:32:51

CSS组件Box

2022-12-01 09:59:57

内核观测性方法

2023-02-02 13:18:22

2024-01-03 08:00:00

Java软件开发代码

2011-07-21 13:24:14

java

2023-10-17 07:23:00

Vue组件代码

2023-04-11 07:48:32

WebGLCanvas

2020-12-04 18:44:29

KubernetesHTTPS Wordpress

2021-09-14 17:16:21

Java 同步工具类

2022-08-16 07:49:48

云原生数据库系统

2022-06-29 11:01:05

MySQL事务隔离级别

2022-05-05 12:57:40

架构

2024-01-24 07:24:18

物联网通信协议IOT

2011-07-12 15:45:29

java
点赞
收藏

51CTO技术栈公众号