一些算法和封装的代码

介绍

前端开发中，算法和封装是不可或缺的技术。本文将讨论一些常用的算法和封装的代码，并提供详细的解释和示例。

算法

1. 手写 debounce 函数

Debounce 函数可以防止在短时间内多次触发同一事件（如窗口大小变化），从而减少无谓的计算。下面是一个基于 JavaScript 的简单实现：

function debounce(func, timeout) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), timeout);
  };
}

这个函数接受两个参数：需要延迟执行的函数和延迟时间（毫秒）。 每次调用时，它会清除之前的计时器并设置一个新的计时器，以确保在延迟时间后只执行一次函数。

2. 二分查找

二分查找是一种高效的搜索算法，适用于已排序的数组。它通过比较中间元素来缩小搜索范围，直到找到目标元素或确定其不存在为止。以下是一个基于 JavaScript 的简单实现：

// www.javascriptcn.com code example
function binarySearch(array, target) {
  let left = 0;
  let right = array.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);

    if (array[mid] === target) {
      return mid;
    } else if (array[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1; // 目标元素不存在
}

这个函数接受两个参数：需要搜索的已排序数组和目标元素。它使用一个 while 循环来不断缩小搜索范围，直到找到目标元素或确定其不存在为止。

封装

1. 模态框组件

模态框是常用的对话框形式之一，它可以在当前屏幕上弹出一个浮动窗口，通常用于展示重要信息或进行用户交互。以下是一个基于 React 的简单实现：

// www.javascriptcn.com code example
import { useState } from 'react';

function Modal({ isOpen, onClose, children }) {
  const [isRendered, setIsRendered] = useState(isOpen);

  function handleClose() {
    setIsRendered(false);
    onClose();
  }

  return isRendered ? (
    <div className="modal">
      <div className="modal__overlay" onClick={handleClose} />
      <div className="modal__content">{children}</div>
    </div>
  ) : null;
}

这个组件接受三个属性：isOpen 表示模态框是否显示，onClose 表示关闭模态框时的回调函数，children 表示模态框内部的内容。 它使用了 React 的 useState 钩子来管理组件状态，当组件需要显示时，设置 isRendered 为 true，并在关闭模态框时触发 onClose 回调函数。

2. 表单验证组件

表单验证是前端开发中的一个重要方面，可以减少用户输入错误并提高用户体验。以下是一个基于 React 的简单实现：

// www.javascriptcn.com code example
import { useState } from 'react';

function Input({ label, value, onChange }) {
  const [error, setError] = useState(null);

  function handleChange(event) {
    const newValue = event.target.value;
    onChange(newValue);
    setError(null); // 每次输入时清除错误信息

    if (newValue.trim() === '') {
      setError(`${label}不能为空`);
    } else if (label === '邮箱' && !/^\S+@\S+$/.test(newValue)) {
      setError('请输入有效的电子邮件地址');
    }
    // 还可以添加其他验证规则
  }

  return (
    <div className="form__input

> Source: [FunTeaLearn](https://funteas.com/post/5152),Please indicate the source for reprints
[https://funteas.com/post/5152](https://funteas.com/post/5152)