QML - Підручник 033. Підключення файлів JavaScript до інших файлів JavaScript у проекті Qt / QML

QML, JavaScript, import

В рамках проекту на QML є можливість не тільки підключати JavaScript файли в QML файлах, а й інших JavaScript файлах. При цьому синтаксис підключення цих файлів буде аналогічним тому, що використовується в QML файлах.

Наприклад, варіант підключення JavaScript файлу в QML файлі

import "first.js" as FirstJs

Тоді, як підключення JavaScript файлу в іншому JavaScript файлі буде відрізнятися лише наявністю точки перед цим рядком

.import "first.js" as FirstJs

Приклад

Нам дано невеликий проект, у якому є такі файли

• main.qml
• first.js
• second.js

Завдання наступне, підключити first.js у main.qml та викликати функцію з цього JavaScript файлу, в якій буде викликатися функція з second.js , який буде підключений до файлу first. js .

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import "first.js" as FirstJs // Подключение first.js

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Button {
        anchors.centerIn: parent
        text: qsTr("Click Me")

        // По клику кнопки вызовем функцию из first.js файла
        onClicked: FirstJs.func()
    }
}

second.js

Цей файл має лише функцію для виведення в консоль рядка Second. Цю функцію потрібно буде викликати у файлі first.js.

.pragma library

function func() {
    console.log("Second")
}

first.js

.pragma library
.import "second.js" as Second // Подключение second.js

function func() {
    console.log("First")
    Second.func() // Вызов функции из файла second.js
}

Висновок

В результаті при натисканні кнопки буде викликана функція з файлу first.js , яка виведе в консоль своє повідомлення та викличе функцію із файлу second.js .

У консоль буде виведено таке повідомлення

qml: First
qml: Second