2.2 vc-align源码分析 -- ant-design-vue系列

news2024/11/18 11:48:28

vc-align源码分析

源码地址：https://github.com/vueComponent/ant-design-vue/tree/main/components/vc-align

1 基础代码

1.1 名词约定

需要对齐的节点叫source，对齐的目标叫target。

1.2 props

提供了两个参数：

  1. align：对齐的配置
  2. target：一个函数，用于获取对齐的目标dom

1.3 主要逻辑

  1. 增加了一个dom，用来挂载source节点，同时拿到它的引用。
  2. 提供了一个方法align，在组件初始化/定位方式改变/对齐目标改变的时候，重新执行对齐方法。

代码如下：

import { defineComponent, ref, onMounted, watch, PropType } from 'vue';
import { alignElement } from 'dom-align';
import { AlignType, TargetType } from './interface';

export default defineComponent({
	name: 'Align',
	props: {
		align: {
			type: Object as PropType<AlignType>,
			required: true
		},
		target: {
			type: [Object, Function] as PropType<TargetType>,
			required: true
		}
	},
	setup(props, { slots }) {
		const nodeRef = ref<HTMLElement | null>(null);

    /**
    * 用来对齐的方法
    */
		const align = () => {
			if (!nodeRef.value) return;

			const { align: latestAlign, target: latestTarget } = props;

			let result: any;
			let targetElement: HTMLElement | null = null;

			if (typeof latestTarget === 'function') {
				targetElement = latestTarget();
			}

			if (targetElement && targetElement.nodeType === Node.ELEMENT_NODE) {
        /**
        * 调用对齐的库方法
        */
				result = alignElement(nodeRef.value, targetElement, latestAlign);
			}
		};

		onMounted(() => {
			align();
		});

    /**
    * 监控对齐方式和target的改变，重新执行对齐
    */
		watch(
			() => [props.align, props.target],
			() => {
				align();
			},
			{ immediate: true, deep: true, flush: 'post' }
		);

		return () => {
			const child = slots.default?.();
			if (child) {
				return <div ref={nodeRef}>{child}</div>;
			}
			return null;
		};
	}
});

1.4 补充：dom-align 库

官方地址：https://yiminghe.me/dom-align/

1.4.1 基础用法
import domAlign from 'dom-align';

// use domAlign
// sourceNode's initial style should be position:absolute;left:-9999px;top:-9999px;

const alignConfig = {
  points: ['tl', 'tr'],        
  offset: [10, 20],           
  targetOffset: ['30%','40%'], 
  overflow: { adjustX: true, adjustY: true },
};

domAlign(sourceNode, targetNode, alignConfig);
1.4.2 alignConfig对象的详细配置
NameTypeDescription
pointsString[2]source元素和targer元素的对齐方式，比如 [‘tr’, ‘cc’]，意思是source元素的右上角和target元素的中心对齐。点的取值可以是t, b, c, l, r。
offsetNumber[2]source元素的偏移量，offset[0] 是x轴，offset[1]是y轴。如果数组中包含了百分比，这个也是相对应source区域来说的。
targetOffsetNumber[2]和上面一致，只不过都是针对target元素来说的。
overflowObject: { adjustX: boolean, adjustY: boolean, alwaysByViewport:boolean }如果adjustX是true，那么如果source元素在x轴方向不可见，会自动调整位置。比如指定source元素在target右边，但是右边区域不足以放得下source，则会自动修改到做左边展示。adjustY同理。如果alwaysByViewport是true，那么当source不在视口中时，会自动调整。
useCssRightBoolean是否使用css的right属性代替left属性去定位。
useCssBottomBoolean是否使用css的bottom属性代替top属性去定位。
useCssTransformBoolean是否使用css的transform属性代替 left/top/right/bottom来定位。

2 源码解析

2.1 可以优化的点

  1. 我们给source增加了一个div，用来获取引用，这个dom节点是不必要，可以去掉。
  2. 只监控了 对齐方式/target引用 的变化，没有监控source和target大小的变化，需要在这些属性变化时，重新对齐。
  3. 需要监控窗口大小的变化，重新对齐。

2.2 实现

2.2.1 监控window变化

这个有resize事件，直接组册即可。

组件需要接受一个props，表示是否需要监控window变化。

export const alignProps = {
  monitorWindowResize: Boolean,
};

代码如下，flush: post是为了保证页面已经渲染结束，可以拿到dom引用。

/**
* 用来记录监控事件的id
*/
const winResizeRef = ref<{ remove: Function }>(null);

watch(
  () => props.monitorWindowResize,
  (monitorWindowResize) => {
    if (monitorWindowResize) {
     /**
	 * 需要监控window大小变化，但是以前没有注册过监控事件
	 */
      if (!winResizeRef.value) {
        winResizeRef.value = window.addEventListener('resize', forceAlign);
      }
    } else if (winResizeRef.value) {
     /**
	 * 如果不需要监控，但是已经监控过了，那就取消监控
	 */
      winResizeRef.value.remove();
      winResizeRef.value = null;
    }
  },
  { immediate: true, flush: 'post' }
);
2.2.2 监控source和target的变化
  • 需要手写一个监控的函数

这里需要一个新的接口：ResizeObserver https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

使用这个接口，可以监听一个DOM节点的变化，这种变化包括但不仅限于：

  1. 某个节点的出现和隐藏
  2. 某个节点的大小变化

我们用它来观察指定的元素，如果元素变化，执行指定的回调。

export function monitorResize(element: HTMLElement, callback: Function) {
  /**
   * 1 初始化一个观察器
   * onResize 是元素变化后的回调
   */
  const resizeObserver = new ResizeObserver(onResize);

  /**
   * 2 观察指定的DOM元素 element
   */
  if (element) {
    resizeObserver.observe(element);
  }
  
  // ......

  /**
   * 3 返回一个函数，用于取消观察
   */
  return () => {
    resizeObserver.disconnect();
  };
}

每次都用当前大小和上次的大小比较，如果不一致，执行callback回调。

export function monitorResize(element: HTMLElement, callback: Function) {
  
  // ......
  
  let prevWidth: number = null;
  let prevHeight: number = null;

  /**
   * 4 当元素大小变化时，调用用户传入的 callback 方法
   */
  function onResize([{ target }]: ResizeObserverEntry[]) {
    if (!document.documentElement.contains(target)) return;
    const { width, height } = target.getBoundingClientRect();
    const fixedWidth = Math.floor(width);
    const fixedHeight = Math.floor(height);

    if (prevWidth !== fixedWidth || prevHeight !== fixedHeight) {
      // https://webkit.org/blog/9997/resizeobserver-in-webkit/
      Promise.resolve().then(() => {
        callback({ width: fixedWidth, height: fixedHeight });
      });
    }

    prevWidth = fixedWidth;
    prevHeight = fixedHeight;
  }
}
  • 在页面挂载的时候，注册监控事件；在页面属性更新的时候（比如source或者target变化时），需要清除旧的事件，注册新的事件
onMounted(() => {
  nextTick(() => {
    /**
    * goAlign 用来维护监控事件，同时执行对齐方法
    * 实现在下面。
    */
    goAlign();
  });
});

 onUpdated(() => {
   nextTick(() => {
     goAlign();
   });
 });

因为要清除旧的事件，所以需要需要保存 注册方法返回的 resizeObserver.disconnect()，方便执行清除的时候调用；同时记录下来当前引用的dom节点，来判断是否需要注册新的监听事件。

interface MonitorRef {
  element?: HTMLElement; // 当前`dom`节点的引用
  cancel: () => void;    // 监控事件的取消方法
}

// Listen for target updated
const targetResizeMonitor = ref<MonitorRef>({
  cancel: () => {},
});
// Listen for source updated
const sourceResizeMonitor = ref<MonitorRef>({
  cancel: () => {},
});

goAlign()的实现

const goAlign = () => {
  const target = props.target;
  const element = getElement(target);
  const point = getPoint(target);

  /**
  * onMounted 的时候，必定执行；onUpdated 的时候，只有source的引用变了才会执行
  * 清除旧的监听事件，注册新的
  */ 
  if (nodeRef.value !== sourceResizeMonitor.value.element) {
    sourceResizeMonitor.value.cancel();
    sourceResizeMonitor.value.element = nodeRef.value;
    sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value, forceAlign);
  }

  /**
  * 如果缓存的target和当前的target不一致，或者对齐方式不一致，就执行对齐方法
  * 同时如果target变了，清除旧的监听事件，注册新的
  */
  if (
    cacheRef.value.element !== element ||
    !isSamePoint(cacheRef.value.point, point) ||
    !isEqual(cacheRef.value.align, props.align)
  ) {
    forceAlign();

    // Add resize observer
    if (resizeMonitor.value.element !== element) {
      resizeMonitor.value.cancel();
      resizeMonitor.value.element = element;
      resizeMonitor.value.cancel = monitorResize(element, forceAlign);
    }
  }
};
2.2.3 重写对齐的方法

因为我们监控了元素大小的变化，触发频率很高，也就是说对齐方法执行的频率也会非常高。

所以需要一个方法，这个方法需要实现类似防抖的功能。源码是使用useBuffer实现的，我们先看一下这个方法。

export const alignProps = {
  monitorBufferTime: Number,
};

/**
* 返回了一个强制执行的方法和一个取消执行的方法
*/
const [forceAlign, cancelForceAlign] = useBuffer(
  () => {
  	// ...... 对齐的方法
  },
  computed(() => props.monitorBufferTime),
);
  • useBuffer的实现
/**
 * 这个函数设计用于控制一个基于时间缓冲的触发逻辑，确保在一定时间间隔内（由buffer参数指定）
 * 即使多次尝试触发，也只有一次实际执行callback的机会，除非通过强制执行（force参数为true）来绕过这个缓冲逻辑。
 *
 * 提供了执行的方法和取消执行的方法
 */
export default (callback: () => boolean, buffer: ComputedRef<number>) => {
  let called = false;
  let timeout = null;

  function cancelTrigger() {
    clearTimeout(timeout);
  }

  function trigger(force?: boolean) {
   // ......
  }

  return [
    trigger,
    () => {
      called = false;
      cancelTrigger();
    },
  ];
};

执行方法trigger的实现如下：

  1. 不在回调过程中：直接设置定时
  2. 如果是强制触发：取消旧的定时，设置新的定时
  3. 在回调过程中：取消旧的定时，设置新的定时
function trigger(force?: boolean) {
  // 如果不在回调过程中 || 强制触发，则
  if (!called || force === true) {
    // 执行一遍callback，如果返回了false，就不需要延迟
    if (callback() === false) {
      // Not delay since callback cancelled self
      return;
    }

    called = true;
    // 取消上次的定时，重新定时
    cancelTrigger();
    timeout = setTimeout(() => {
      called = false;
    }, buffer.value);
  } else {
    // 在回调过程中：取消上次的定时，重新定时
    cancelTrigger();
    timeout = setTimeout(() => {
      called = false;
      trigger();
    }, buffer.value);
  }
}

当buffer时间结束后，会执行对齐函数。

  • 对齐的方法
const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>({});
const nodeRef = ref();
const [forceAlign, cancelForceAlign] = useBuffer(
  () => {
    const {
      disabled: latestDisabled,
      target: latestTarget,
      align: latestAlign,
      onAlign: latestOnAlign,
    } = props;
    if (!latestDisabled && latestTarget && nodeRef.value) {
      const source = nodeRef.value;

      /**
      * 获取了目标元素或者对齐点。
      */
      let result: AlignResult;
      const element = getElement(latestTarget);
      const point = getPoint(latestTarget);

      /**
      * 缓存目标元素的信息和对齐方式
      */
      cacheRef.value.element = element;
      cacheRef.value.point = point;
      cacheRef.value.align = latestAlign;

      // 🚁 IE浏览器在元素对齐后会失去焦点，所以需要在对齐后重新聚焦
      /**
      * 记录了当前文档中的活动元素（activeElement），以便在对齐操作后恢复焦点
      */
      const { activeElement } = document;
      // 只有元素可见才需要对齐
      if (element && isVisible(element)) {
        result = alignElement(source, element, latestAlign);
      } else if (point) {
        result = alignPoint(source, point, latestAlign);
      }
      restoreFocus(activeElement, source);

      /**
      * 如果调用者需要在对齐后做一些事情，就执行props传进来的回调方法
      */
      if (latestOnAlign && result) {
        latestOnAlign(source, result);
      }

      return true;
    }

    return false;
  },
  computed(() => props.monitorBufferTime),
);

target节点为啥要缓存下来？

在onUpdated中，调用了goAlign()。 props中的target是一个函数，可能对于同一个target节点，引用发生变化（调用者每次都给target一个新的函数），引起不必要的重新对齐操作。

2.2.4 给插槽元素增加ref引用

这里的实现比较简单，先看代码。主要逻辑就是cloneElement，在复制的时候重写了他的属性。

return () => {
  const child = slots?.default();
  if (child) {
    return cloneElement(child[0], { ref: nodeRef }, true, true);
  }
  return null;
};

看一下这个函数的实现。调用了vue的cloneVNode方法，把{ ref: nodeRef }加入到虚拟节点的属性中。

import { cloneVNode } from 'vue';

export function cloneElement<T, U>(
  vnode: VNode<T, U> | VNode<T, U>[],
  nodeProps: Record<string, any> &
    Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject } = {},
  override = true,
  mergeRef = false,
): VNode<T, U> {
  let ele = vnode;
  if (Array.isArray(vnode)) {
    ele = filterEmpty(vnode)[0];
  }
  if (!ele) {
    return null;
  }
  const node = cloneVNode(ele as VNode<T, U>, nodeProps as any, mergeRef);

  // cloneVNode内部是合并属性，这里改成覆盖属性
  node.props = (override ? { ...node.props, ...nodeProps } : node.props) as any;
  return node;
}

3 效果演示

3.1 resize变化

当窗口大小变化时，对自适应对齐方式。以纵向为例。

在这里插入图片描述

3.2 source 和target大小变化

分别修改二者大小，都可以重新触发对齐操作。

在这里插入图片描述

3.3 插槽引用

source节点没有增加一个div包裹，同时也拿到了它的引用进行定位。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2133052.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华为ensp中vlan与静态路由技术的实现

华为ensp中vlan与静态路由技术的实现

vlan 同一网段的设备&#xff0c;可以互通&#xff1b; 虚拟局域网&#xff1a;将局域网从逻辑上划分为多个局域网&#xff0c;不同通过vlan编号区分&#xff1b; 实现网络隔离。提高了网络安全性&#xff1b; vlan编号为12位&#xff1b; 范围1-4094可以用来配置 默认处于…
阅读更多...
3.2 Upload源码分析 -- ant-design-vue系列

3.2 Upload源码分析 -- ant-design-vue系列

Upload源码分析 – ant-design-vue系列 源码地址&#xff1a;https://github.com/vueComponent/ant-design-vue/blob/main/components/upload/Upload.tsx 1 概述 本篇是对Upload组件的分析&#xff0c;这个组件调用了vc-upload&#xff0c;是对vc-upload的封装。 作用包括&…
阅读更多...
【【通信协议之ICMP协议】】

【【通信协议之ICMP协议】】

【【通信协议之ICMP协议】】 下面先展示出ICMP协议的数据格式 用户数据打包在 ICMP 协议中&#xff0c;ICMP 协议又是基于 IP 协议之上的&#xff0c;IP 协议又是走 MAC 层发送的&#xff0c;即从包含关系来说&#xff1a;MAC 帧中的数据段为 IP 数据报&#xff0c;IP 报文中…
阅读更多...
LCSS—最长回文子序列

LCSS—最长回文子序列

思路分析 关于”回文串“的问题&#xff0c;是面试中常见的&#xff0c;本文提升难度&#xff0c;讲一讲”最长回文子序列“问题&#xff0c;题目很好理解&#xff1a; 输入一个字符串 s&#xff0c;请找出 s 中的最长回文子序列长度。 比如输入 s"aecda"&#xff0c…
阅读更多...
【数据结构】字符串与JSON字符串、JSON字符串及相应数据结构（如对象与数组）之间的相互转换

【数据结构】字符串与JSON字符串、JSON字符串及相应数据结构（如对象与数组）之间的相互转换

前言&#xff1a; 下面打印日志用的是FastJSON依赖库中的 Log4j2。依赖&#xff1a; <!-- Alibaba Fastjson --> <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.80</version> …
阅读更多...
prometheus 集成 grafana 保姆级别安装部署

prometheus 集成 grafana 保姆级别安装部署

前言 本文 grafana 展示效果只需要 prometheus node_exporter grafana 其他的选择安装 环境和版本号 系统: CentOS 7.9 prometheus: 2.54.1 pushgateway: 1.9.0 node_exporter: 1.8.2 alertmanager: 0.27.0 grafana:11.2.0 官网:https://prometheus.io/ 下载地址:h…
阅读更多...
算法基础-二分查找

算法基础-二分查找

左闭右闭 [ left&#xff0c;right ] [1,1]可以 while( left < right ) if( a[mid] > target ) right mid - 1 else if( a[mid] < target ) left mid 1 左闭右开 [ left&#xff0c;right ) …
阅读更多...
工业平板电脑轻薄与耐用并存

工业平板电脑轻薄与耐用并存

在现代工业环境中&#xff0c;工业平板电脑的应用越来越广泛。它们不仅需要具备轻薄的设计以便于携带和操作&#xff0c;还必须具备耐用性以应对恶劣的工作条件。 一、工业平板电脑的定义与特点 工业平板电脑是一种专为工业环境设计的计算设备&#xff0c;通常具备防尘、防水、…
阅读更多...
MySQL分页查询（DQL）

MySQL分页查询（DQL）

因DataGrip我的激活到期&#xff0c;也没太多精力去破解&#xff0c;最后换了Navicat&#xff0c;实际上操作是一样的&#xff0c;不变。 先看我的表数据&#xff0c;以我的数据作为例子 基本语法 select 字段列表 from 表名 起始索引&#xff0c;查询记录数。 1.查询第1页员…
阅读更多...
[数据集][目标检测]车油口挡板开关闭合检测数据集VOC+YOLO格式138张2类别

[数据集][目标检测]车油口挡板开关闭合检测数据集VOC+YOLO格式138张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;138 标注数量(xml文件个数)&#xff1a;138 标注数量(txt文件个数)&#xff1a;138 标注类别…
阅读更多...
期权组合策略有什么风险？期权组合策略是什么？

期权组合策略有什么风险？期权组合策略是什么？

今天期权懂带你了解期权组合策略有什么风险&#xff1f;期权组合策略是什么&#xff1f;期权组合策略是通过结合不同期权合约&#xff08;如看涨期权和看跌期权&#xff09;&#xff0c;以及标的资产&#xff08;如股票&#xff09;来实现特定投资目标的策略。 期权组合策略市…
阅读更多...
2024.9.13 重拾数据库，不用就忘T-T

2024.9.13 重拾数据库，不用就忘T-T

在之前学习Web的时候&#xff0c;电脑安装过mysql和navicate&#xff0c;所以安装步骤跳过 直接使用navicate创建一个新的连接&#xff0c;然后在这个连接里面新建数据库 新建数据库弹出要求如下图 一般的数据库学习教程都是字符集选择utf-8&#xff08;有中文&#xff09;&a…
阅读更多...
PyTorch安装指南：轻松上手深度学习框架（CUDA）

PyTorch安装指南：轻松上手深度学习框架（CUDA）

PyTorch 是一个非常流行的开源深度学习框架&#xff0c;它支持动态图&#xff0c;这使得开发者能够更容易地构建和调试复杂的模型。PyTorch 可以运行在 CPU 上&#xff0c;也可以利用 NVIDIA 的 CUDA 平台加速计算&#xff0c;从而在 GPU 上执行。下面是如何在你的系统上安装 P…
阅读更多...
JS面试真题 part5

JS面试真题 part5

JS面试真题 part5 21、说说对事件循环的理解22、JavaScript本地存储方式有哪些&#xff1f;区别及应用场景&#xff1f;23、大文件上传如何断点续传&#xff1f;24、ajax原理是什么&#xff1f;如何实现&#xff1f;25、什么是防抖和节流&#xff1f;有什么区别&#xff1f;如何…
阅读更多...
如何在Windows10系统安装docker？

如何在Windows10系统安装docker？

1.wsl安装 Windows Subsystem for Linux（简称WSL）是一个在Windows 10\11上能够运行原生Linux二进制可执行文件（ELF格式）的兼容层。它是由微软与Canonical公司合作开发，开发人员可以在 Windows 计算机上同时访问 Windows 和 Linux 的强大功能。 通过适用于 Linux 的 Window…
阅读更多...
UE5 阴影通道

UE5 阴影通道

Shadow Pass Switch节点中 Default代表模型遮罩的效果 Shadow代表阴影的生成遮罩效果
阅读更多...
Web开发：使用C#创建、安装、调试和卸载服务

Web开发：使用C#创建、安装、调试和卸载服务

目录 一、创建服务 1.创建项目&#xff08;.NET Framework&#xff09; 2.重命名 3.编写逻辑代码 二、安装服务 1.方案一&#xff1a;利用VS2022安装文件的配置 选择添加安装程序 安装文件的介绍及配置 ​编辑​ 重新编译 工具安装 2.方案二&#xff1a;编写bat脚本安…
阅读更多...
SCRM电商管理后台Axure高保真原型 源文件

SCRM电商管理后台Axure高保真原型 源文件

在电商行业蓬勃发展的今天&#xff0c;企业急需一个全面的客户关系管理&#xff08;CRM&#xff09;系统来优化他们的电商运营。我们的Scrm电商管理后台应运而生&#xff0c;它不仅是一个集中化的管理平台&#xff0c;更是企业提升客户互动和销售业绩的得力助手。 预览地址 ht…
阅读更多...
yolo8训练自己的模型

yolo8训练自己的模型

1.数据源准备 1.1 准备图片资源 1.2 对图片资源标注&#xff0c;生成 对应的 .txt 文件&#xff0c;里面的数字表示 物体被标注的 x或y 等坐标点信息 1.2.1 标注工具下载以及使用教程参考 Windows 10下安装labelImg标注工具&#xff01;_labelimg windows exe 1.5版本-…
阅读更多...
YOLOv5 Detect.py 改变检测框box线条的粗细，隐藏检测框的检测信息，只显示检测框box

YOLOv5 Detect.py 改变检测框box线条的粗细，隐藏检测框的检测信息，只显示检测框box

Ctrl F 搜索 line_thickness 修改值 值越小 线条越细 hide-labels 隐藏检测框的类别信息 hide-conf 隐藏检测框的置信度信息
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023