perf: 优化 avatar 组件 💚💚💚

CHANGELOG.md

@@ -13,6 +13,8 @@
 - 优化 `f-avatar` 加载细节处理
 - `f-avatar` 组件新增 `load-animation` 配置项
 - 优化掉 `f-drawer` 部分导致文档打包报错的逻辑
+- 增加了 `hooks` 对部分类和函数的参数抽离，性能优化了 `f-image` `f-avatar` `f-button` `f-watermark` 组件
+- `f-button` 对于涟漪效果做了单例模式的优化
 
 ## 0.6.0-bate.2 (2022-08-11)
 

packages/fighting-components/_hooks/useFilterProps.ts

@@ -3,37 +3,43 @@ import type { ordinaryFunctionInterface as a } from '../_interface'
 
 /**
  * 过滤 props 需要使用的 props
- * 
+ *
+ * hooks 提出者：https://github.com/OnlyShadows
+ * hooks 开发者：https://github.com/Tyh2001
+ *
  * 需要传入两个泛型参数
  * @type { FPropsType } 传入的 props 类型
  * @type { needPropsType } 需要的 props 类型 / 返回值类型
  * @param props 原始 props
  * @param need 需要的键集合
  * @returns 需要的 props
  */
-export const useFilterProps = <FPropsType, needPropsType>(props: FPropsType, need: string[]) => {
-  // 结果
-  const needProps: needPropsType = reactive({})
+export const useFilterProps = <FPropsType, needPropsType>(
+  props: FPropsType,
+  need: string[]
+) => {
+  type objectAny = Record<string, unknown>
 
-  /**
-   * 过滤 props
-   */
+  interface getPropsInterface {
+    (): needPropsType
+  }
+
+  const needProps: needPropsType | objectAny = reactive({} as const)
+
+  //  过滤 props
   const filterProps: a = (): void => {
     for (const key of need) {
-      if (Object.hasOwn(props, key)) {
-        needProps[key] = props[key]
+      if (Object.hasOwn(props as unknown as object, key)) {
+        needProps[key] = (props as unknown as objectAny)[key]
       }
     }
   }
 
-  /**
-   * 获取结果
-   * @returns 
-   */
-  const getProps = (): needPropsType => {
+  //  获取结果
+  const getProps: getPropsInterface = (): needPropsType => {
     filterProps()
-    return needProps
+    return needProps as needPropsType
   }
 
-  return { getProps }
+  return { getProps } as const
 }

packages/fighting-components/_utils/change-color.ts

@@ -5,7 +5,8 @@ import type { changeColorInterface } from '../_interface'
  */
 export class ChangeColor implements changeColorInterface {
   color: string
-  constructor(color: string) {
+
+  constructor (color: string) {
     this.color = color
   }
   /**

packages/fighting-components/avatar/src/avatar.vue

@@ -3,9 +3,14 @@
   import { computed, ref, onMounted } from 'vue'
   import { loadImage, isNumber, isString } from '../../_utils'
   import FIcon from '../../icon'
+  import { useFilterProps } from '../../_hooks'
   import type { ComputedRef, Ref, CSSProperties } from 'vue'
   import type { FPropsType } from './avatar'
   import type { callbackInterface as a } from './interface'
+  import type {
+    LoadNeedImagePropsInterface as b,
+    ordinaryFunctionInterface as c
+  } from '../../_interface'
 
   const prop: FPropsType = defineProps(Props)
   const emit = defineEmits(Emits)
@@ -30,6 +35,7 @@
     null as unknown as HTMLImageElement
   )
 
+  // img 元素的类名集合
   const nodeClassList: ComputedRef<object | string[]> = computed(
     (): object | string[] => {
       const { round, size, fit } = prop
@@ -45,6 +51,7 @@
     }
   )
 
+  // 类名集合
   const classList: ComputedRef<object | string[]> = computed(
     (): object | string[] => {
       const { size, round, src, loadAnimation } = prop
@@ -60,6 +67,7 @@
     }
   )
 
+  // 图片尺寸样式
   const imageSizeStyleList: ComputedRef<CSSProperties> = computed(
     (): CSSProperties => {
       const { background, size } = prop
@@ -71,6 +79,7 @@
     }
   )
 
+  // 文字头像的文字颜色
   const textStyleList: ComputedRef<CSSProperties> = computed(
     (): CSSProperties => {
       const { fontColor, fontSize } = prop
@@ -79,14 +88,25 @@
     }
   )
 
+  // 开始加载图片
+  const loadAction: c = (): void => {
+    const node: HTMLImageElement = FAvatarImg.value as HTMLImageElement
+    const callback: a = (params: boolean): void => {
+      isSuccess.value = params
+      isShowNode.value = params
+    }
+    const needProps: b = useFilterProps<FPropsType, b>(prop, [
+      'src',
+      'errSrc',
+      'rootMargin',
+      'lazy'
+    ]).getProps()
+    loadImage(node, needProps, emit, callback)
+  }
+
   onMounted((): void => {
     if (!prop.icon && !prop.text) {
-      const node: HTMLImageElement = FAvatarImg.value as HTMLImageElement
-      const callback: a = (params: boolean): void => {
-        isSuccess.value = params
-        isShowNode.value = params
-      }
-      loadImage(node, prop, emit, callback)
+      loadAction()
     }
   })
 </script>

packages/fighting-components/image/src/image.vue

@@ -19,23 +19,28 @@
 
   // 是否加载成功
   const isSuccess: Ref<boolean> = ref<boolean>(true)
+  // 大图预览是否展示
   const isPreviewListShow: Ref<boolean> = ref<boolean>(false)
+  // 描述信息的宽度
   const captionWidth: Ref<number> = ref<number>(0)
   const FImageImg: Ref<HTMLImageElement> = ref<HTMLImageElement>(
     null as unknown as HTMLImageElement
   )
 
+  // 点击图片时候 开启大图预览
   const handleClick: b = (): void => {
     if (prop.previewList && prop.previewList.length) {
       isPreviewListShow.value = true
     }
   }
 
+  // 关闭大图预览
   const handleClose: b = (): void => {
     isPreviewListShow.value = false
   }
 
-  onMounted((): void => {
+  // 开始加载图片
+  const loadAction: b = (): void => {
     const node: HTMLImageElement = FImageImg.value as HTMLImageElement
     const callback: a = (params: boolean, width: number): void => {
       isSuccess.value = params
@@ -50,6 +55,10 @@
     ]).getProps()
 
     loadImage(node, needProps, emit, callback)
+  }
+
+  onMounted((): void => {
+    loadAction()
   })
 </script>