组件可重用性，6个层次的洞察力！

作者：MichaelThiessen译者：FrontendXiaozhi没有大厂背景，但有积极心态的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...我们都想少写代码，多做事。为实现这一点，我们构建组件以便它们可以被多次重用。有些组件只需要基本的可重用性，而另一些组件则需要更复杂的重构技术才能完全重用。这里有6个不同级别的可重用性概念。先体验一下吧，在后续的更新中我们会一一说到。1.模板使用模板，我们将一些高度重复的代码包装在它自己的组件中，而不是到处复制和粘贴代码。当我们重用那个组件（而不是直接使用代码）时，它给我们带来了两个好处：以后进行更改要容易得多，因为我们只需要更改一个地方，而不必记住每次重复的代码重复。它在哪里被复制？这是最基本也是最常谈论的可重用性形式。2.可配置对于一些组件，我们需要根据需求修改它们的工作方式。例如，Button组件默认有主版本和图标版本。但是我们不是为每个版本创建一个全新的组件，而是指定props以在不同类型之间切换。添加这些props通常不会给组件增加很多复杂度，同时也能给我们带来使用组件的更多灵活性。注意：这不同于使用props来保存状态或数据，例如加载props或禁用props。3、自适应配置最大的问题是缺乏前瞻性。我们需要预见未来的需求，并通过放置相应的道具将其构建到组件中。但是，如果您的组件具有足够的适应性，您可以在不更改它们的情况下处理未来的需求。为了使我们的组件具有足够的适应性，我们可以使用插槽来做到这一点。例如，我们可以使用默认槽而不是传递给Button组件的文本：现在我们不局限于传入的类型是字符串还是数字。如果我们想在不修改Button组件的情况下添加加载，我们可以这样做：>4.可逆性除了通过插槽将完整的标记块传递给我们的子组件外，我们还可以传递一组关于如何渲染的指令。这就像我们根据食谱做饭而不是叫外卖。当我们按照食谱去做时，需要更多的工作，但我们可以按照自己的节奏来做，可以随时进行调整，也可以完全放弃非食谱的过程。我们使用scopedslots来为我们的组件增加更多的灵活性。5.可扩展性通过适应性和可逆性，我们有一些必要的技术基础，这些技能可以最大限度地提高组件的可重用性。下一步是将这些技术应用于整个组件，以便我们可以更轻松地扩展其行为。我们使用命名插槽在组件中添加一个或多个扩展点。仅适应性和反转就为我们提供了扩展行为的一种选择，而拥有多个扩展点则为我们提供了许多不同的选择。在这里，我们有一个包含页眉、默认和页脚的模态组件：这是一个相当简单的扩展示例，其中我们已经有几个扩展此组件的选项：只需覆盖默认插槽即可添加我们的内容可以通过插槽名称覆盖页眉的内容页脚的内容，其内容仍然以按钮为主不同的风格。页眉和页脚的插槽更多用于自定义此组件的行为。您不必扩展它，但您也可以扩展它的一部分。无论哪种方式，我们都获得了很大的灵活性和大量的代码重用。6.嵌套在扩展之上更高级的复用性是嵌套，我们可以基于多个基本组件，一次嵌套一层，乍一听可能很疯狂，但它非常有用，尤其是在大中型应用程序中。我们从一个pass基础组件开始，它在功能上相当通用。下一个组件更具体，以多种方式扩展基本组件。然后从前面的基本组件继续扩展，直到我们拥有完成实际工作的最终组件。这类似于我们从非常一般的动物(Animal)到更具体的哺乳动物(Mammal)，然后是狗(Dog)，最后停在贵宾犬(Poodle)的方式。如果我们只需要Poodle组件，那么我们似乎是在浪费时间处理这些基本组件。但是在大规模应用中就不一样了。我们需要对同一个基本概念进行多次修改，以满足不同的个性化需求。这时候用基础组件嵌套的思路就很重要了。我们可以扩展Dog组件以获取Corgi和Beagle组件。或者扩展Mammal组件以获得Cat组件，这将添加Tiger和Lion组件。总结以上是6个可重用性级别的概述。当然，很可能会遗漏一些内容，但基本上可以为我们提供一个封装组件的大概思路，也是一个很好的方式。达人的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://news.knowledia.com/US...交流文章每周更新。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。