如何正确使用全局变量？

Question

我有一个分页脚本，我正在努力增加当前页面，以便我可以通过 AJAX 调用下一页...

在我的初始打字稿文件中，我像这样声明全局 VAR；

declare var getCurrentPage: number;

然后在 same 文件中，我从最初的 AJAX 调用中定义了这个值

globalThis.getCurrentPage = data && data.startPage;
currentPage: getCurrentPage || 0,

这样定义是因为 currentPage 也可以是另一个值，或者如果 getCurrentPage 失败或不存在则设置为零。

现在在我的分页文件中，它与上面的文件是分开的（这是因为初始值是从 AJAX 请求派生的），我像这样增加我的值，然后将它们发送回全局 VAR

const nextPage = this.currentPage + 1;
globalThis.getCurrentPage = nextPage;

然而，这给了我

nextPage

值为 1，

currentPage

值为 0，每次我按下

Next Page

按钮时，它都会不断给我

nextPage

值 1 和

currentPage

值为 0，因为 0 + 1 是 1...

我做错了什么？

Answer 1

您对全局变量的处理方式似乎存在误解

getCurrentPage

。根据您的描述，看起来变量

currentPage

在开始时被设置为

getCurrentPage

的值。然后，当您递增

currentPage

时，您将递增的值分配给

getCurrentPage

，这不是您想要的。

让我澄清您需要采取的步骤：

1. 首先，确保全局变量

   getCurrentPage

   已定义并且可从初始 TypeScript 文件和分页文件访问。

2. 在初始 TypeScript 文件中，收到初始 AJAX 调用的数据后，根据从 AJAX 响应收到的值设置

   currentPage

   变量：

    declare var getCurrentPage: number;
    
    // After your AJAX call
    globalThis.getCurrentPage = data && data.startPage;
    const currentPage = getCurrentPage || 0;

3. 在分页文件中，增加

   currentPage

   值，然后使用新值更新全局变量

   getCurrentPage

   ：

    // In the pagination file
    const nextPage = currentPage + 1;
    globalThis.getCurrentPage = nextPage;

通过这样做，您将正确增加

currentPage

值并使用最新值更新全局变量

getCurrentPage

。下次单击“下一页”按钮时，它应该正确增加该值。

确保检查代码中可能影响行为的任何其他部分，并确保您不会意外地在代码中的其他位置重新初始化

currentPage

变量。另外，请记住，应谨慎使用全局变量，因为它们可能会导致意外行为并使代码更难以维护。考虑使用适当的封装和范围界定技术来更有效地管理状态。