对于组件的可重用性,大佬给出来6个级别的见解,一起过目一下!
作者:Michael Thiessen 译者:前端小智 来源:news
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文
GitHub
https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
我们所有人都希望编写更少的代码,同时也要做更多的事情。为了实现这一点,我们构建了组件,以便可以多次重用它们。
有些组件只需要基本的可重用性,而另一些则需要更复杂的重构技术,我们才能充分复用它。
这里有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
组件,其中包含header
,default
和footer
:
<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
的内容,其内容还是以不同风格按钮为主 -
header
和footer
的插槽更多是用于自定义
你不必扩展此组件的行为,但也可以扩展其一部分。 无论哪种方式,我们都能获得很大的灵活性和大量的代码重用性。
6. 嵌套
在扩展之上更高级重用性就是嵌套, 我们可以多个基本组件为基础, 一层嵌套一层,一开始可能听起来很疯狂,但它非常有用,特别是在大中型应用程序中。
我们从一个通过基础组件开始,该组件的功能相当普遍。 下一个组件就更加具体,以几种方式扩展了基础组件。 然后不断以前面基础组件为底往上扩展,直到我们拥有完成实际工作的最终组件。
这类似我们从非常普通的动物(Animal )
到更特定的哺乳动物(Mammal )
,然后是狗(Dog )
,最后止于贵宾犬(Poodle)
的方式。 如果我们需要的只是贵宾犬(Poodle)
组件,看上去,我们整这么基础组件就是浪费时间。但是在大型应用程序中就不一样了,我们需要在相同的基本概念上进行多次更改,来满足不同的个性化需求,这时这种以基础组件嵌套的思想就很重要。
我们可以扩展犬类(Dog)组件
来获得柯基犬(Corgi )
和比格犬(Beagle)
组件。或者扩展哺乳动物(Mammal )
组件以获得猫(Cat )
组件,这样就可以添加老虎(Tiger)
和狮子(Lion)
组件。
总结
以上是6个可重用性级别一些概述,当然很有可能会错过一些内容,但基本是可以为我们封装组件提供了一个大致思路,也是很不错的方式。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://news.knowledia.com/US...
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- IDEA 连接数据库
- 图解面试题:如何找到破产玩家?
- python面向对象学习(一)
- playbook中when的使用
- 当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)
- 你想要的Android性能优化系列:内存优化 !
- phabricator介绍与搭建
- nginx反向代理与负载均衡
- APP | edxposed框架+trustmealredy模块抓包小程序
- nginx动态添加模块
- 曾经豪言“指哪爬哪”,如今被一个JS狠狠教做人
- mysql主从复制延迟问题记录
- linux下设置locale
- 宜信OCR技术探索与实践|直播速记
- keepalived结合lvs实现双机热备