可重用性的六个级别

2020-06-27 02:10:05

为了实现这一点,我们构建我们的组件,以便它们可以多次重用。

我已经确定了6个不同的可重用性级别,但我可能错过了更多。

以下是这些级别的基本概述。我接下来的课程“可重用组件”将探讨每一种组件以及如何最大限度地利用它们。

不是到处复制并粘贴代码,而是使用这种技术将其包装在它自己的组件中。

当我们重用组件(而不是直接重用代码)时,它给我们带来两个好处:

在未来做改变要容易得多,因为我们只需要在一个地方做就可以了。

我们不必记住我们已经将代码复制到的几十个(或数百个)位置。

Button组件可能有主版本,也可能有仅图标版本。但是,我们使用道具在不同类型之间切换,而不是为每个版本创建全新的组件。

添加这些道具通常不会给组件增加太多内容,但在如何使用组件方面给了我们更大的灵活性。干净利落。

注意:这与为状态或数据使用道具(如加载道具或禁用道具)不同。

配置的最大问题是缺乏远见。您需要预测未来的需求,并通过添加这些道具将其构建到组件中。

但是,如果您使您的组件具有自适应能力,那么它就可以考虑到从未想过的用例--而不需要更改组件。

我们通过使用插槽将标记块从父级传递到组件来实现这一点。

例如,我们可以使用默认插槽,而不是在Button组件中使用文本道具:

如果我们希望在不修改Button组件的情况下添加加载微调器,我们可以这样做:

我们可以传递一组如何呈现的指令,而不是将完整的标记块传递给子组件。

这就像是按照食谱行事,而不是点外卖。当你按照食谱做的时候,工作量会增加一些,但你完全可以控制你正在做的东西。你可以边吃边调整,或者干脆把食谱扔掉。

通过适应性和反转,我们拥有必要的技术来最大限度地提高组件的可重用性。

下一步是在整个组件中应用这些技术,这样我们就可以更容易地扩展它的行为。

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

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

(如果不使用默认插槽,我们可以添加更多内容,但在这里不太可能)。

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

我们将通过通过一个或多个组件层传递这些扩展点来扩展它的结论。

一开始可能听起来很疯狂,但它非常有用,特别是在中型到大型应用程序中。

您可以从一个基本组件开始,该组件在功能上相当通用。下一个组件更具体一些,它以几种方式扩展了基本组件。然后一遍又一遍,直到你有了做实际工作的最后一个组件。

这正是我们如何从一种非常普通的动物到一种更具体的哺乳动物,然后是狗,最后落在贵宾犬身上的过程。如果我们所需要的只是一个贵宾犬组件,那么我们在这里就是在浪费时间,但是在大型应用程序中,我们需要在相同的基本概念上有很多不同的变体。

我们可以扩展Dog组件以获得Corgi和Beagle组件。或者扩展哺乳动物组件以获得一个Cat组件,这样我们就可以添加Tiger和Lion组件。

这是我遇到的最高级的可重用性应用。我在自己的工作中经常使用这种技术。

我可能遗漏了一些,当然我也不会说这是一份详尽的清单,但它已经足够完整,可以派上用场了。

像这样的一篇短小的文章并不能很好地描述它们,但是在我接下来的课程“可重用组件”中,我将对它们进行更深入的研究。

订阅我的电子邮件列表,以便获得课程的每周更新和预览!

如果Reaction比Vue受欢迎得多,那么坚持下去不是更好吗?这里我想具体谈三件事:1.框架本身的成长(创新)2.职业机会3.易学/变得更好。

我以前说过,我再说一遍:计算属性是Vue中最重要的特性。当然,作用域插槽允许您创建一些很好的抽象,观察器也很有用。但我认为没有任何东西能与电脑道具的价值相提并论。

在编写Vue应用程序时,当我们本来可以从一开始就以正确的方式来做事情的时候,我们却把时间浪费在以错误的方式做事情上。这就是为什么我把这26篇文章整理在一起,教你如何避免一些常见的时间浪费,从而帮助你节省时间。