1. 程式人生 >實用技巧 >其它 >在 QML 中匯入 JavaScript 資源

在 QML 中匯入 JavaScript 資源


JavaScript 資源可能由 QML 文件和其他 JavaScript 資源匯入。JavaScript 資源可以通過相對或絕對 URL 匯入。在相對 URL 的情況下,該位置相對於包含匯入的 QML 文件或 JavaScript 資源的位置進行解析。 如果指令碼檔案不可訪問,則會發生錯誤。 如果需要從網路資源中獲取 JavaScript,則元件的狀態將設定為“Loading”,直到指令碼下載完畢。

JavaScript 資源還可以匯入 QML 模組和其他 JavaScript 資源。 JavaScript 資源中的 import 語句的語法與 QML 文件中的 import 語句略有不同。

在 QML 文件匯入 JavaScript 資源

import "ResourceURL" as Qualifier

匯入的 JavaScript 資源始終使用“as”關鍵字進行限定。 JavaScript 資源的限定符必須以大寫字母開頭,並且必須是唯一的,因此限定符和 JavaScript 檔案之間始終存在一對一的對映關係。 (這也意味著限定符不能與內建 JavaScript 物件(如 Date 和 Math)命名相同。

通過“Qualifier.functionName(params)”語法,匯入的 JavaScript 檔案中定義的函式可用於匯入 QML 文件中定義的物件。

在一個 JavaScript 資源導另入一個 JavaScript 資源

import * as MathFunctions from "factorial.mjs";

用於匯入 ECMAScript 模組的標準 ECMAScript 語法,並且只能在由 mjs 檔案擴充套件名錶示的 ECMAScript 模組內工作。

.import "filename.js" as Qualifier

是 QML 引擎提供的 JavaScript 擴充套件。作為被 ECMAScript 標準取代的擴充套件,不鼓勵使用它。

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

export function showCalculations(value) 
{
    console.log(
        "Call factorial() from script.js:",
        factorial(value));
}
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))
        }
    }
}	

在 JavaScript 資源匯入 QML 模組

.import TypeNamespace MajorVersion.MinorVersion as Qualifier

例如:

.import Qt.test 1.0 as JsQtTest

var importedEnumValue = JsQtTest.MyQmlObject.EnumValue3