最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 详解6个不同级别的组件可重用性概念

    正文概述 六哥   2021-05-13   60

    本篇文章给大家详细介绍一下6个不同级别的组件可重用性概念。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

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

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

    1.模板化

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

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

    • 将来进行更改就会容易得多,因为我们只需要在一个地方更改

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

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

    2. 可配置

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

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

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

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

    3.适应性

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

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

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

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

    <!-- Button.vue -->
    <template>
      <button
        class="btn btn--default"
        @click="$emit('click')"
      >
        <slot />
      </button>
    </template>

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

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

    <template>
      <Button>
        <img
          v-if="loading"
          src="spinner.svg"
        />
        Click Me
      </Button>
    </template>

    4.反转性

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

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

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

    5. 扩展

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

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

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

    这里,我们有一个Modal组件,其中包含headerdefaultfooter

    <template>
      <div class="modal">
        <slot name="header">
          <h2>{{ title }}</h2>
        </slot>
    
        <!-- Default slot for main content -->
        <slot />
    
        <slot name="footer">
          <Button @click="closeModal">
            Close
          </Button>
        </slot>
      </div>
    </template>

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

    • 只需覆盖default slot即可添加我们的内容

    • 可以通过插槽名来覆盖 header 的内容

    • 可以通过插槽名来覆盖 footer 的内容,其内容还是以不同风格按钮为主

    • headerfooter的插槽更多是用于自定义

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

    6. 嵌套

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

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

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

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

    总结

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

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

    作者:Michael Thiessen

    译文地址:https://segmentfault.com/a/1190000039699016

    更多编程相关知识,请访问:编程教学!!

    以上就是详解6个不同级别的组件可重用性概念的详细内容,更多请关注网站无忧资源网其它相关文章!


    网站无忧 » 详解6个不同级别的组件可重用性概念

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者
    升级SVIP尊享更多特权立即升级