提高代码质量的高级 JavaScript 函数

朴灿烈づ我的快乐病毒、 2023-09-26 21:24 143阅读 0赞

介绍  
JavaScript 是一种功能强大且用途广泛的编程语言，它具有许多内置功能，可以帮助您编写更高效、可维护和可读的代码。

在这篇博文中，我将解释如何使用一些内置功能来创建一些最强大的功能来提高性能并使代码看起来更漂亮。我将介绍 Debounce、Throttle、Once、Memoize、Curry、Partial、Pipe、Compose、Pick、Omit 和 Zip，您可以将它们保存在实用程序文件/类中以优化代码质量。

虽然这些功能是使用 JavaScript 解释的，但它们可以很容易地用任何编程语言实现。一旦理解了不同功能的概念，就可以在任何地方应用它。

此外，这篇文章中描述的功能（或概念）经常在技术面试中被问及。

无论您是初学者还是经验丰富的高级开发人员，这些功能都将优化您的代码和编码体验。它们将使使用 JavaScript 变得更加愉快和高效。  
去抖动  
去抖功能是一种防止快速系列事件重复激活功能的方法。它的工作原理是将函数执行推迟到某个时间段过去而事件没有被触发。Debounce 功能是一种有用的解决方案，可应用于实际应用程序，通过在用户快速单击按钮时阻止功能执行来提高性能。

以下代码段将展示如何在 JavaScript 中实现去抖功能：  
function debounce(func, delay) \{  
let timeout;  
return function() \{  
const context = this;  
const args = arguments;  
clearTimeout(timeout);  
timeout = setTimeout(() => func.apply(context, args), delay);  
\};  
\}  
在此 JavaScript 片段中，该debounce函数将返回一个新函数，该函数在先前定义的delay. 如果再次调用该函数，timeout将重置，并推迟调用该函数。

如果您具有在调整窗口大小时更新网页布局的功能，则此功能将很有用。如果没有 Debounce 函数，该函数将在用户调整窗口大小时快速连续调用多次，这可能会导致性能问题。通过 Debounce 功能，可以限制布局更新的速率，使页面响应更快、效率更高。

此代码段显示了如何在此用例中使用 Debounce 函数：  
// Define the function that updates the layout  
function updateLayout() \{  
// Update the layout…  
\}

// Create a debounced version of the function  
const debouncedUpdateLayout = debounce(updateLayout, 250);

// Listen for window resize events and call the debounced function  
window.addEventListener(“resize”, debouncedUpdateLayout);  
在此示例中，updateLayout当调整窗口大小时，该函数最多每 250 毫秒调用一次。此功能确保布局仅在用户完成调整窗口大小后 250 毫秒更新，从而使网页更加高效和响应迅速。

风门  
Throttle 函数类似于 Debounce 函数，但行为略有不同。Throttle 函数不是限制函数调用的速率，而是限制函数执行的速率。这意味着如果函数在给定时间段内之前被调用过，它将禁止执行。它保证某个功能以一致的速率运行并且不会被过于频繁地触发。

Throttle函数的实现：

function throttle(func, delay) \{  
let wait = false;

return (…args) => \{  
if (wait) \{  
return;  
\}

func(...args);
    wait = true;
    setTimeout(() => {
      wait = false;
    }, delay);

\}  
\}  
在此代码段中，该throttle函数将执行提供的函数func，将wait变量更新为true，然后启动一个计时器，该计时器将在传递wait后重置参数。delay如果throttle再次调用该函数，它将调用提供的函数，或者如果wait参数仍然是则简单地返回true。

如果您想在滚动时执行更新布局的功能，则可以在网页上使用此 Throttle 功能。如果没有throttle函数，当用户在页面上滚动时，这个更新函数将被调用多次，从而导致严重的性能问题。使用该throttle函数，您可以确保它每 X 毫秒只执行一次。这将导致网页的响应速度更快、更高效。

在以下代码片段中，您可以看到如何throttle使用该函数：

// Define the function that updates the layout  
function updateLayout() \{  
// Update the layout…  
\}

// Create a throttled version of the function  
const throttledUpdateLayout = throttl