Определение JavaScript-ресурсов в QML

Логика программы для приложения QML может быть определена на языке JavaScript. Код JavaScript может быть определен непосредственно в документах QML или разделен на файлы JavaScript (известные как JavaScript Resources в QML).

В QML поддерживаются два разных типа JavaScript-ресурсов: файлы реализации "за кулисами" и общие (библиотечные) файлы. Оба типа JavaScript-ресурсов могут быть импортированы другими JavaScript-ресурсами или включены в модули QML.

Ресурс реализации "за кулисами"

Большинство файлов JavaScript, импортированных в документ QML, являются состоятельными реализациями для документа QML, их импортирующего. В этих случаях каждый экземпляр типа QML-объекта, определенного в документе, требует отдельной копии JavaScript-объектов и состояния, чтобы правильно работать.

По умолчанию при импорте файлов JavaScript предоставляется уникальная, изолированная копия для каждого экземпляра компонента QML. Если этот файл JavaScript не импортирует никаких ресурсов или модулей с инструкцией .import, его код будет выполняться в том же контексте, что и экземпляр компонента QML, и, следовательно, он может получать доступ к и изменять объекты и свойства, объявленные в этом компоненте QML. В противном случае он будет иметь собственный уникальный контекст, и объекты и свойства компонента QML должны передаваться функциям файла JavaScript в качестве параметров, если они необходимы.

Пример ресурса реализации "за кулисами":

// MyButton.qml
import QtQuick 2.0
import "my_button_impl.js" as Logic // A new instance of this JavaScript resource
                                    // is loaded for each instance of Button.qml.

Rectangle {
    id: rect
    width: 200
    height: 100
    color: "red"

    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: Logic.onClicked(rect)
    }
}

// my_button_impl.js
var clickCount = 0;   // this state is separate for each instance of MyButton
function onClicked(button) {
    clickCount += 1;
    if ((clickCount % 5) == 0) {
        button.color = Qt.rgba(1,0,0,1);
    } else {
        button.color = Qt.rgba(0,1,0,1);
    }
}

В общем случае простая логика должна быть определена непосредственно в файле QML, но более сложная логика должна быть разделена на ресурсы реализации "за кулисами" для обеспечения поддержки и удобочитаемости.

Общие JavaScript-ресурсы (библиотеки)

По умолчанию файлы JavaScript, импортированные из QML, совместно используют свой контекст с компонентом QML. Это означает, что файлы JavaScript имеют доступ к тем же объектам QML и могут их изменять. Вследствие этого каждый импорт должен иметь уникальную копию этих файлов.

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

// factorial.js
.pragma library

var factorialCount = 0;

function factorial(a) {
    a = parseInt(a);

    // factorial recursion
    if (a > 0)
        return a * factorial(a - 1);

    // shared state
    factorialCount += 1;

    // recursion base-case.
    return 1;
}

function factorialCallCount() {
    return factorialCount;
}

Декларация пragma должна появиться перед любым кодом JavaScript, за исключением комментариев.

Обратите внимание, что несколько документов QML могут импортировать "factorial.js" и вызывать предоставляемые им функции factorial и factorialCallCount. Состояние импорта JavaScript совместно используется между документами QML, которые его импортируют, и, следовательно, значение возврата функции factorialCallCount может быть ненулевым при вызове в документе QML, который никогда не вызывал функцию factorial.

Например:

// Calculator.qml
import QtQuick 2.0
import "factorial.js" as FactorialCalculator // This JavaScript resource is only
                                             // ever loaded once by the engine,
                                             // even if multiple instances of
                                             // Calculator.qml are created.

Text {
    width: 500
    height: 100
    property int input: 17
    text: "The factorial of " + input + " is: " + FactorialCalculator.factorial(input)
}

Поскольку они общие, файлы .pragma library не могут напрямую обращаться к объектам или свойствам экземпляров компонентов QML, хотя значения QML могут передаваться в качестве параметров функций.