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

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

Существует два разных типа JavaScript-ресурсов, поддерживаемых в QML: файлы реализации кода-за-сценой и файлы общего пользования (библиотеки). Оба типа 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;
}

Декларация pragma должна появляться перед любым 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 могут передаваться в качестве параметров функции.