QML参考指南07：在QML中导入JavaScript资源

JavaScript资源可以由QML文档和其他JavaScript资源导入。JavaScript资源可以通过相对或绝对URL导入。如果是相对URL，则相对于包含导入的QML文档或JavaScript资源的位置来解析位置。如果脚本文件不可访问，将发生错误。如果需要从网络资源中获取JavaScript，则在下载脚本之前，组件的状态将设置为“正在加载”。

JavaScript资源也可以导入QML模块和其他JavaScript资源。JavaScript资源中的import语句的语法与QML文档中的import语句略有不同，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资源使用标准QML导入语法的变体（适用所有先前描述的规则和限定条件）来导入其他JavaScript资源以及QML类型的名称空间。

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

具有导入的脚本不会继承导入该脚本的QML文档的导入（例如，访问Component.errorString将失败）。

没有导入的脚本将继承导入该脚本的QML文档的导入（例如，访问Component.errorString将成功）。

共享脚本（即定义为.pragma库）不会继承任何QML文档的导入，即使它不导入其他脚本或模块也是如此

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

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

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

 .import "filename.js" as Qualifier

例如：

 import * as MathFunctions from "factorial.mjs";

后者是用于导入ECMAScript模块的标准ECMAScript语法，并且仅在ECMAScript模块内部工作，如mjs文件扩展名所示。前者是QML引擎提供的JavaScript的扩展，也可用于非模块。

通过这种方式导入JavaScript文件时，将使用限定符将其导入。然后可以通过限定符（即as Qualifier.functionName(params)）从导入脚本访问该文件中的功能。

有时，需要使功能在导入上下文中可用而无需限定它们。在这种情况下，import应使用ECMAScript模块和JavaScript 语句而不使用as限定符。

例如，下面左侧呼叫的QML代码showCalculations()中script.mjs，这反过来又可以调用factorial()在factorial.mjs的，因为它包括了factorial.mjs使用import。

 import QtQuick 2.0
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.js
import { factorial } from "factorial.mjs"
 
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（）函数包括从另一个JavaScript文件而不使用ECMAScript模块和，而不必限定进口。它使另一个文件中的所有函数和变量在当前文件的名称空间中可用，但忽略该文件中定义的所有杂用和导入。这不是一个好主意，因为函数调用永远不要修改调用者的上下文。

不推荐使用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

特别是，这对于访问通过单例类型提供的功能可能很有用；有关更多信息，请参见qmlRegisterSingletonType（）。

注意： .import语法不适用于WorkerScript中使用的脚本