typescript 避免污染JavaScript全局范围/顶级文件范围

wkyowqbh  于 2023-03-24  发布在  TypeScript
关注(0)|答案(2)|浏览(121)

我想避免污染我的文件的顶级作用域--我试图将变量封装到闭包中。

当前代码:

// global scope - I want to keep track fo these variables between function calls
const timeInMsToReleaseNotification = 1000 * 15; // 15 seconds
let queuedNotifications: Notification[] = [];
let timeoutId: NodeJS.Timeout | null = null;

const trackNotifications = (data: Notification) => {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  queuedNotifications.push(data);

  timeoutId = setTimeout(() => {
    const foundData = queuedNotifications[0];

    if (foundData) {
      displayNotification(
        foundData,
        queuedNotifications.length > 1
          ? 'nearbyBatch'
          : 'nearbySingle',
      );
      queuedNotifications = [];
      timeoutId = null;
    }
  }, timeInMsToReleaseNotification);
};

我希望它如何工作:

const trackNotifications = (data: Notification) => {
  const timeInMsToReleaseNotification = 1000 * 15; // 15 seconds
  let queuedNotifications: Notification[] = [];
  let timeoutId: NodeJS.Timeout | null = null;
  
  return () => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    queuedNotifications.push(data);

    timeoutId = setTimeout(() => {
      const foundData = queuedNotifications[0];

      if (foundData) {
        displayNotification(
          foundData,
          queuedNotifications.length > 1
            ? 'nearbyBatch'
            : 'nearbySingle',
        );
        queuedNotifications = [];
        timeoutId = null;
      }
    }, timeInMsToReleaseNotification);
  }
};

// calling fn like this
trackNotifications(data)()

这台取款机坏了我做错什么了

xe55xuns

xe55xuns1#

每次调用trackNotifications()时,都会创建一个新的空queuedNotifications数组。您需要将所有代码 Package 在IIFE中以创建闭包,因此queuedNotifications的声明在trackNotifications()函数之外。

((data) => {
  const timeInMsToReleaseNotification = 1000 * 15; // 15 seconds
  let queuedNotifications: Notification[] = [];
  let timeoutId: NodeJS.Timeout | null = null;

  const trackNotifications = (data: Notification) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    queuedNotifications.push(data);

    timeoutId = setTimeout(() => {
      const foundData = queuedNotifications[0];

      if (foundData) {
        displayNotification(
          foundData,
          queuedNotifications.length > 1 ?
          'nearbyBatch' :
          'nearbySingle',
        );
        queuedNotifications = [];
        timeoutId = null;
      }
    }, timeInMsToReleaseNotification);
  };

  trackNotifications(data);
})(data);

然而,在ES6中,你不需要闭包。用letconst声明的变量是块作用域的,所以你可以简单地把所有代码放在一个块中。

{
  const timeInMsToReleaseNotification = 1000 * 15; // 15 seconds
  let queuedNotifications: Notification[] = [];
  let timeoutId: NodeJS.Timeout | null = null;

  const trackNotifications = (data: Notification) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    queuedNotifications.push(data);

    timeoutId = setTimeout(() => {
      const foundData = queuedNotifications[0];

      if (foundData) {
        displayNotification(
          foundData,
          queuedNotifications.length > 1 ?
          'nearbyBatch' :
          'nearbySingle',
        );
        queuedNotifications = [];
        timeoutId = null;
      }
    }, timeInMsToReleaseNotification);
  };

  trackNotifications(data);
}
ua4mk5z4

ua4mk5z42#

你可以做的一件事是把所有的东西都 Package 在一个IIFE中,这样就限制了变量的作用域,只有trackNotifications可以访问它们。

const trackNotifications = (function () {
  const timeInMsToReleaseNotification = 1000 * 15; // 15 seconds
  let queuedNotifications: Notification[] = [];
  let timeoutId: NodeJS.Timeout | null = null;

  return (data: Notification) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    queuedNotifications.push(data);

    timeoutId = setTimeout(() => {
      const foundData = queuedNotifications[0];

      if (foundData) {
        displayNotification(
          foundData,
          queuedNotifications.length > 1
            ? 'nearbyBatch'
            : 'nearbySingle',
        );
        queuedNotifications = [];
        timeoutId = null;
      }
    }, timeInMsToReleaseNotification);
  };
})();

// call the function like this
trackNotifications(data);

相关问题