在 QML 中导入 JavaScript 资源

JavaScript资源可由 QML 文档和其他 JavaScript 资源导入。JavaScript 资源可通过相对或绝对 URL 导入。在相对 URL 的情况下，位置是相对于包含导入内容的QML 文档或JavaScript 资源的位置解析的。如果无法访问脚本文件，则会出现错误。如果 JavaScript 需要从网络资源获取，组件的status 会被设为 "正在加载"，直到脚本下载完毕。

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

从 QML 文档导入 JavaScript 资源

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

import "ResourceURL" as Qualifier

例如

import "jsfile.js" as Logic

导入的 JavaScript 资源总是使用 "as "关键字限定。JavaScript 资源的限定符必须以大写字母开头，而且必须是唯一的，因此限定符和 JavaScript 文件之间总是一一对应。(这也意味着限定符不能与内置 JavaScript 对象（如Date 和Math ）的名称相同）。

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

JavaScript 资源内的导入

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

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

• 有导入语句的脚本不会继承导入它的 QML 文档的导入（例如，访问 Component.errorString 将失败）。
• 没有导入语句的脚本将从导入它的 QML 文档中继承导入（例如，访问 Component.errorString 将成功）。
• 共享脚本（定义为 .pragma 库）不会继承 QML 文档的导入，即使该脚本没有导入其他脚本或模块。

第一个语义在概念上是正确的，因为一个特定的脚本可能被任意数量的 QML 文件导入。为了向后兼容，我们保留了第二个语义。第三个语义与当前共享脚本的语义保持不变，但在此针对新的可能情况（脚本导入其他脚本或模块）进行了说明。

从其他 JavaScript 资源导入 JavaScript 资源

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

import * as MathFunctions from "factorial.mjs";

或者：

.import "filename.js" as Qualifier

前者是导入 ECMAScript 模块的标准 ECMAScript 语法，并且仅适用于 ECMAScript 模块内部，如mjs 文件扩展名所示。后者是由QML 引擎提供的 JavaScript 扩展，也适用于非模块。作为一种被 ECMAScript 标准所取代的扩展，我们不鼓励使用它。

当以这种方式导入 JavaScript 文件时，会使用限定符。文件中的函数可以通过限定符（即Qualifier.functionName(params) ）从导入脚本中访问。

有时，我们需要在导入上下文中提供函数，而无需对其进行限定。在这种情况下，ECMAScript 模块和 JavaScriptimport 语句应在没有as 限定符的情况下使用。

例如，下面左侧的 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 声明，则无法访问组件的导入。