在 QML 中导入 JavaScript 资源

QML 文档和其他 JavaScript 资源均可导入JavaScript 资源。JavaScript 资源可通过相对 URL 或绝对 URL 进行导入。 对于相对 URL，其位置将相对于包含该导入的QML 文档或JavaScript 资源的位置进行解析。如果无法访问脚本文件，则会引发错误。如果需要从网络资源获取 JavaScript，则组件的 `status ` 属性将设置为“Loading”，直到脚本下载完成。

JavaScript 资源还可以导入 QML 模块和其他 JavaScript 资源。JavaScript 资源中的 import 语句语法与 QML 文档中的 import 语句略有不同，下文将对此进行详细说明。

从 QML 文档导入 JavaScript 资源

QML 文档可以使用以下语法导入 JavaScript 资源：

import "ResourceURL" as Qualifier

例如：

import "jsfile.js" as Logic

导入的 JavaScript 资源必须使用 "as" 关键字进行限定。 JavaScript 资源的限定符必须以大写字母开头，并且必须是唯一的，因此限定符与 JavaScript 文件之间始终存在一对一的映射关系。（这也意味着限定符不能与内置的 JavaScript 对象（如Date 和Math ）重名）。

通过"Qualifier.functionName(params)" 语法，导入的 QML 文档中定义的对象可以访问在被导入的 JavaScript 文件中定义的函数。JavaScript 资源中的函数可以接受参数，这些参数的类型可以是任何 QML 值类型或对象类型，以及常规的 JavaScript 类型。从 QML 调用此类函数时，参数和返回值将遵循常规的数据类型转换规则。

JavaScript 资源内的导入

在QtQuick 2.0 中，已新增支持，允许 JavaScript 资源使用标准 QML 导入语法的变体（其中所有前述规则和限定条件均适用）来导入其他 JavaScript 资源以及 QML 类型命名空间。

由于在QtQuick 2.0 中，JavaScript资源能够以这种方式导入另一个脚本或QML模块，因此定义了一些额外的语义：

• 包含 import 语句的脚本不会继承自导入它的 QML 文档中的导入内容（例如，访问 Component.errorString 将失败）
• 不包含 import 语句的脚本将继承其所在 QML 文档的导入项（例如，访问 Component.errorString 将成功）
• 共享脚本（定义为 .pragma library）不会继承自导入它的 QML 文档中的导入项，即使该脚本本身未导入其他脚本或模块也是如此

考虑到某个脚本可能被任意数量的 QML 文件导入，第一种语义在概念上是正确的。第二种语义是为了保持向后兼容性而保留的。 第三种语义与当前共享脚本的语义保持一致，但在此针对新出现的情况（即脚本导入其他脚本或模块）进行了澄清。

从另一个 JavaScript 资源导入 JavaScript 资源

JavaScript 资源可通过以下方式导入另一个资源：

import * as MathFunctions from "factorial.mjs";

或者：

.import "filename.js" as Qualifier

前者是用于导入 ECMAScript 模块的标准 ECMAScript 语法，仅在以mjs 文件扩展名标识的 ECMAScript 模块内部有效。后者是QML 引擎为 JavaScript 提供的扩展，也适用于非模块。由于该扩展已被 ECMAScript 标准取代，因此不建议使用。

当以这种方式导入 JavaScript 文件时，该文件会带有一个限定符。随后，导入脚本可通过该限定符访问该文件中的函数（即以Qualifier.functionName(params) 的形式）。

有时，我们希望在导入上下文中直接访问函数，而无需使用限定符。在这种情况下，应使用 ECMAScript 模块以及不带as 限定符的 JavaScriptimport 语句。

例如，左侧的 QML 代码在script.mjs 中调用了showCalculations() ，而该文件又可以调用factorial.mjs 中的factorial() ，因为它已通过import 引入了factorial.mjs 。

import QtQuick
import "script.mjs" as MyScript

Item {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: {
            MyScript.showCalculations(10)
            console.log("Call factorial() from QML:",
                MyScript.factorial(10))
        }
    }
}

// script.mjs
import { factorial } from "factorial.mjs"
export { factorial }

export function showCalculations(value) {
    console.log(
        "Call factorial() from script.js:",
        factorial(value));
}

// factorial.mjs
export function factorial(a) {
    a = parseInt(a);
    if (a <= 0)
        return 1;
    else
        return a * factorial(a - 1);
}

Qt.include() 函数在不使用 ECMAScript 模块且不指定导入修饰符的情况下，从另一个文件中引入一个 JavaScript 文件。它会将另一个文件中的所有函数和变量引入到当前文件的命名空间中，但会忽略该文件中定义的所有预处理指令和导入语句。这种做法并不妥当，因为函数调用绝不应修改调用者的上下文。

Qt.include() 已被废弃，应避免使用。它将在 Qt 的未来版本中被移除。

从 JavaScript 资源导入 QML 模块

JavaScript 资源可以以下列方式导入 QML 模块：

.import TypeNamespace MajorVersion.MinorVersion as Qualifier

下面是一个示例，同时展示了如何在 JavaScript 中使用从模块导入的 QML 类型：

.import Qt.test 1.0 as JsQtTest

var importedEnumValue = JsQtTest.MyQmlObject.EnumValue3

特别是，这在访问通过单例类型提供的功能时可能非常有用；更多信息请参阅QML_SINGLETON 。

默认情况下，您的 JavaScript 资源可以访问导入该资源的组件的所有导入项。如果该组件被声明为无状态库（使用.pragma library ），或者包含显式的.import 语句，则该 JavaScript 资源无法访问该组件的导入项。