前端算法与封装
介绍
前端开发中，算法和封装是不可或缺的技术。本文将讨论一些常用的算法和封装的代码，并提供详细的解释和示例。
算法
1. 手写 debounce 函数
Debounce 函数可以防止在短时间内多次触发同一事件（如窗口大小变化），从而减少无谓的计算。下面是一个基于 JavaScript 的简单实现：
-------- -------------- -------- -
--- ------
------ --------- -- -
--------------------
----- - ------------- -- -------------- ---------
--
-这个函数接受两个参数：需要延迟执行的函数和延迟时间（毫秒）。 每次调用时，它会清除之前的计时器并设置一个新的计时器，以确保在延迟时间后只执行一次函数。
2. 二分查找
二分查找是一种高效的搜索算法，适用于已排序的数组。它通过比较中间元素来缩小搜索范围，直到找到目标元素或确定其不存在为止。以下是一个基于 JavaScript 的简单实现：
-------- ------------------- ------- -
--- ---- - --
--- ----- - ------------ - --
----- ----- -- ------ -
----- --- - ---------------- - ------ - ---
-- ----------- --- ------- -
------ ----
- ---- -- ----------- - ------- -
---- - --- - --
- ---- -
----- - --- - --
-
-
------ --- -- -------
-这个函数接受两个参数：需要搜索的已排序数组和目标元素。它使用一个 while 循环来不断缩小搜索范围，直到找到目标元素或确定其不存在为止。
封装
1. 模态框组件
模态框是常用的对话框形式之一，它可以在当前屏幕上弹出一个浮动窗口，通常用于展示重要信息或进行用户交互。以下是一个基于 React 的简单实现：
------ - -------- - ---- --------
-------- ------- ------- -------- -------- -- -
----- ------------ -------------- - -----------------
-------- ------------- -
---------------------
----------
-
------ ---------- - -
---- ------------------
---- -------------------------- --------------------- --
---- -------------------------------------------
------
- - -----
-这个组件接受三个属性：isOpen 表示模态框是否显示，onClose 表示关闭模态框时的回调函数，children 表示模态框内部的内容。 它使用了 React 的 useState 钩子来管理组件状态，当组件需要显示时，设置 isRendered 为 true，并在关闭模态框时触发 onClose 回调函数。
2. 表单验证组件
表单验证是前端开发中的一个重要方面，可以减少用户输入错误并提高用户体验。以下是一个基于 React 的简单实现：
------ - -------- - ---- --------
-------- ------- ------ ------ -------- -- -
----- ------- --------- - ---------------
-------- ------------------- -
----- -------- - -------------------
-------------------
--------------- -- -----------
-- ---------------- --- --- -
-------------------------
- ---- -- ------ --- ---- -- ---------------------------- -
-------------------------
-
-- -----------
-
------ -
---- ----------------------
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------