QML에서 JavaScript 리소스 가져오기

QML 문서 및 다른 자바스크립트 리소스에서자바스크립트 리소스를 가져올 수 있습니다. 자바스크립트 리소스는 상대 URL이나 절대 URL을 통해 가져올 수 있습니다. 상대 URL의 경우, 위치는 가져오기 문구가 포함된 QML 문서나 JavaScript 리소스의 위치를 기준으로 해결됩니다. 스크립트 파일에 접근할 수 없는 경우 오류가 발생합니다. JavaScript를 네트워크 리소스에서 가져와야 하는 경우, 스크립트가 다운로드될 때까지 컴포넌트의 ` status ` 속성이 "Loading"으로 설정됩니다.

자바스크립트 리소스는 QML 모듈이나 다른 자바스크립트 리소스를 가져올 수도 있습니다. 자바스크립트 리소스 내의 import 문 구문은 QML 문서 내의 import 문 구문과 약간 다르며, 이에 대해서는 아래에서 자세히 설명합니다.

QML 문서에서 자바스크립트 리소스 가져오기

QML 문서는 다음 구문을 사용하여 JavaScript 리소스를 임포트할 수 있습니다.

import "ResourceURL" as Qualifier

예를 들어:

import "jsfile.js" as Logic

임포트된 자바스크립트 리소스는 항상 "as" 키워드를 사용하여 한정됩니다. 자바스크립트 리소스의 식별자는 대문자로 시작해야 하며 고유해야 하므로, 식별자와 자바스크립트 파일 간에는 항상 일대일 대응 관계가 성립합니다. (이는 또한 식별자의 이름이 ` Date `이나 ` Math`과 같은 내장 자바스크립트 객체와 동일할 수 없음을 의미합니다.)

가져온 자바스크립트 파일에 정의된 함수는 "Qualifier.functionName(params)" 구문을 통해 가져오는 QML 문서에서 정의된 객체에서 사용할 수 있습니다. 자바스크립트 리소스의 함수는 일반 자바스크립트 유형은 물론, 모든 QML 값 유형이나 객체 유형을 매개변수로 받을 수 있습니다. QML에서 이러한 함수를 호출할 때 매개변수와 반환 값에는 일반적인 데이터 유형 변환 규칙이 적용됩니다.

JavaScript 리소스 내의 임포트

QtQuick 2.0 에서는 표준 QML 임포트 구문의 변형(앞서 설명한 모든 규칙과 조건이 적용됨)을 사용하여 JavaScript 리소스가 다른 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 모듈이나 JavaScript의 ` import ` 문을 ` as ` 한정자 없이 사용해야 합니다.

예를 들어, 아래 왼쪽의 QML 코드는 script.mjs 에서 ` showCalculations() `를 호출하며, 이 코드는 import 를 사용하여 factorial.mjs 를 포함했기 때문에 factorial.mjs 에 있는 ` factorial() `를 호출할 수 있습니다.

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 모듈을 사용하지 않고, import를 명시하지 않은 채 다른 파일의 JavaScript 파일을 포함합니다. 이 함수는 다른 파일의 모든 함수와 변수를 현재 파일의 네임스페이스에서 사용할 수 있게 하지만, 해당 파일에 정의된 모든 프래그마와 import는 무시합니다. 함수 호출은 호출자의 컨텍스트를 절대 수정해서는 안 되므로, 이는 바람직하지 않은 방식입니다.

Qt.include()는 더 이상 사용되지 않는 기능이며 사용을 피해야 합니다. 향후 Qt 버전에서 제거될 예정입니다.

JavaScript 리소스에서 QML 모듈 가져오기

자바스크립트 리소스는 다음과 같은 방식으로 QML 모듈을 가져올 수 있습니다:

.import TypeNamespace MajorVersion.MinorVersion as Qualifier

아래 예제에서는 자바스크립트로 임포트된 모듈의 QML 타입을 사용하는 방법도 함께 보여줍니다:

.import Qt.test 1.0 as JsQtTest

var importedEnumValue = JsQtTest.MyQmlObject.EnumValue3

특히, 이는 싱글톤 유형을 통해 제공되는 기능에 접근하는 데 유용할 수 있습니다. 자세한 내용은 QML_SINGLETON 를 참조하십시오.

기본적으로 JavaScript 리소스는 해당 리소스를 임포트하는 컴포넌트의 모든 임포트에 접근할 수 있습니다. 단, 컴포넌트가 무상태 라이브러리로 선언된 경우( .pragma library 사용) 또는 명시적인 .import 문이 포함된 경우에는 컴포넌트의 임포트에 접근할 수 없습니다.