将项目从传统脚本模式升级为模块化脚本模式

442次阅读
没有评论

共计 3042 个字符,预计需要花费 8 分钟才能阅读完成。

将项目从传统脚本模式升级为模块化脚本模式

当 Construct 的 JavaScript 编码功能在 2019 年推出时,项目中的所有脚本都以经典模式脚本运行。这是自从 1990 年代 JavaScript 引入以来在网页上运行 JavaScript 的方式。然而,现代 JavaScript 现在使用模块——这是一种组织脚本及其依赖项的新方法,也是更好的方法。

Construct 3 r226 增加了对项目 JavaScript 代码使用模块的支持。在 Construct 3 r251 中,对经典模式的支持被移除。本教程将指导您了解发生了什么变化以及如何更新您的代码,以防您有任何仍在使用经典模式的旧项目。

# 如果您仅使用“经典”模式与第三方插件兼容,请联系插件开发者,他们应该会提供一个很小且快速的更新,如 ** 以下 ** 所述。

经典模式与模块

在经典模式中:

  • 您的项目所有脚本文件在启动时都会自动加载。
  • 您无法控制脚本文件加载的顺序。
  • 全局变量和函数可以在任何地方使用,包括在其他脚本中,以及在事件块中的脚本中。

在模块模式中:

  • 只有在启动时自动加载项目主脚本。
  • 除非您 导入 它们,否则其他脚本文件不会被使用。
  • 您可以通过导入它们的顺序来控制脚本文件被加载的顺序。
  • 每个模块都有自己的作用域。这意味着顶层变量和函数不能在模块外部使用,除非:
    • 它们被导出,并在使用的地方导入(推荐)
    • 它们被显式地添加到全局对象上作为属性(不推荐)

使用模块可以帮助您更好地组织代码。例如,将所有变量和函数设置为全局通常被认为是一种较差的设计,容易产生命名冲突等问题,并使代码的重用变得更加困难。模块允许您编写干净、自包含的代码片段,这些代码片段具有明确定义的依赖项,并为其他代码提供了一个明确定义的接口供其使用。然后可以轻松地将单个模块用于不同的地方。

您可以 在 MDN 关于 JavaScript 模块的指南中 了解更多关于模块如何工作的信息。

更改模式

在项目属性中的高级部分有一个脚本类型设置。您可以使用此设置在经典模式和模块模式之间切换。您应该将项目切换到使用模块模式。这将影响您的项目中的脚本文件如何加载,您可能需要根据以下步骤进行更改。

更改模式仅影响脚本文件。如果您 仅在事件块中使用脚本,并且没有脚本文件,则不需要做任何事情。Construct 将自动将项目切换到使用模块,一切将继续像以前一样工作。

步骤 1:指定主脚本

一旦切换到模块模式,您需要做的第一件事是告诉 Construct 哪个是您的主脚本。这是在启动时唯一会加载的脚本。所有其他脚本都需要由这个脚本导入。

在项目栏中找到您想要用作主脚本的脚本。通常这是包含 runOnStartup 调用的脚本。在项目栏中选择脚本,然后在属性栏中会出现一些属性。将 目的 属性更改为 主脚本。主脚本在项目栏中也以粗体显示。

# 一个项目只能有一个主脚本。如果您想使用其他脚本,请将它们导入到主脚本中。

步骤 2:添加导出

接下来,对于项目中使用的每个其他脚本文件,查看它并确定哪些函数、类和对象需要可供其他脚本文件使用。这些需要使用 export 关键字导出。

例如,考虑一个名为 utilities.js 的 JavaScript 文件,它定义了一个名为 add 的函数:

将项目从传统脚本模式升级为模块化脚本模式

此函数可以通过添加 export 关键字来导出:

将项目从传统脚本模式升级为模块化脚本模式

现在,此模块导出了一个名为 add 的函数。您可以添加许多导出,包括默认导出。

您可以 在 MDN 关于 export 语句的指南中 了解更多关于 export 语法的信息。

步骤 3:添加导入

现在从主脚本开始,添加导入以加载其他脚本文件,并使它们导出的内容可用。继续前面的例子,主脚本可能以前依赖于调用全局函数 add,因为它是在顶层定义的:

将项目从传统脚本模式升级为模块化脚本模式

现在您可以让主脚本加载 utilities.js 并使用它导出的内容,使用 import 语句:

将项目从传统脚本模式升级为模块化脚本模式

请注意:

  • *表示“从此脚本导入所有内容”
  • 脚本导出被命名为 Utils,因此导出的方法 add 通过Utils.add() 访问。
  • 脚本的 URL 必须以 ./ 开头

您可能需要考虑如何安排所有脚本及其导入和导出,以便将所有内容组织并分组到相关的模块中。

您可以 在 MDN 关于 import 语句的指南中 了解更多关于 import 语法的信息。有许多导入脚本的方法,包括只导入某些内容、重命名导入、只导入默认导出等。

步骤 4:更新事件中的脚本

如果您不在事件块中使用脚本,您可以跳过此步骤。

假设您在事件表中有一个脚本块,它也调用了add,将其作为全局函数使用。一旦您将脚本文件更改为模块,这种方法就不再全局可用——它必须导入。但是您不能在脚本块中使用import。(内部每个脚本块都是其自己的函数,您不能在函数内部导入。)

为了解决这个问题,您可以添加另一个脚本,其目的是 为事件添加导入 。添加一个新的脚本文件,命名为 importsForEvents.js。在项目栏中选择它,然后在属性栏中,将 目的 属性设置为Imports for events。现在您可以在此文件中导入任何内容,所有事件中的脚本都可以访问。

# 与主脚本一样,您只能指定一个脚本用于事件导入。如果您想使用多个脚本,请将它们导入到此脚本中。

例如,您也可以像主脚本那样导入 utilities.js:

将项目从传统脚本模式升级为模块化脚本模式

现在您的事件表中的脚本也可以使用Utils.add()

您还可以在此文件中定义函数和变量,它们将可供事件中的所有脚本使用(但不能用于其他脚本文件)。

有用的模式

实用程序 / 辅助函数

通常,有一系列辅助或实用函数,这些函数在多个脚本中使用。前面的例子演示了导入一个实用程序脚本。您可以在多个地方导入脚本,例如使用import * as Utils from "./utilities.js"; 在几个脚本中,并在所有地方重用相同的辅助函数集。即使多次导入,模块也只会加载一次,确保一切工作得高效。

全局模块

记住,模块有自己的作用域。如果您声明一个顶层变量,它不是全局的——它只在模块内部可用。因此,类似于实用程序脚本,您可能想要创建一个模块来表示代码使用的所有全局变量,并将其导入到每个脚本中。

但是模块导出是只读的。这意味着如果您像这样导出一个变量:

将项目从传统脚本模式升级为模块化脚本模式

… 那么 myGlobalVariable 不能被任何导入它的脚本更改,就像它实际上是用 const 声明的。因此,这种方法只适用于常量。

相反,您可以将全局导出为具有属性的对象,如下所示:

将项目从传统脚本模式升级为模块化脚本模式

现在脚本可以像这样访问全局状态:

将项目从传统脚本模式升级为模块化脚本模式

注意此示例使用默认导出。import Globals from ...语句只导入默认导出,在这种情况下是包含所有我们的全局变量的对象。

这种方法比使用全局变量更好,因为它可以更好地组织一切,避免了与浏览器自己的全局命名空间中的数百个名称冲突,并使调试更容易,因为您可以轻松查看您自己的全局变量而不是一切。

访问全局作用域

前面的全局模块示例是管理游戏中的全局状态的首选方法。但是,如果您真的需要打破模块的作用域并访问完整的全局作用域,您可以通过访问 globalThis 上的属性来实现,例如:

将项目从传统脚本模式升级为模块化脚本模式

只要您一致地使用它们作为 globalThis 的属性,这些可以在任何地方访问。

导入主脚本

在您的 Imports for events 脚本中,您还可以导入主脚本,如下所示:

将项目从传统脚本模式升级为模块化脚本模式

现在您的事件中的脚本也可以调用主脚本中导出的函数,例如 Main.myFunction()。请记住,在主脚本中添加export 关键字到那些函数,否则它们不会被导入。

结论

经典模式脚本的支持现已移除,因此任何旧项目都需要更新。使用模块是 Construct 中管理脚本的现代化和更好的组织方式。您可能需要更改一些代码,但结果应该是更干净、更容易管理和在其他项目中重用的代码。

正文完
 0
评论(没有评论)