在 QML 中定义 JavaScript 资源

QML 应用程序的程序逻辑可以在 JavaScript 中定义。JavaScript 代码可以在 QML 文档中内嵌定义，也可以分成 JavaScript 文件（在 QML 中称为 JavaScript 资源）。

导入 JavaScript 文件时的默认行为是为每个 QML 组件实例提供一个唯一的、独立的副本。

如果 JavaScript 文件没有使用 .import 语句导入任何资源或模块，则其代码将在与 QML 组件实例相同的范围内运行，因此JavaScript 文件可以访问和操作在该 QML 组件中声明的对象和属性。

否则，它将拥有自己唯一的作用域，如果需要，QML 组件的对象和属性应作为参数传递给 JavaScript 文件的函数。

内嵌定义示例

// MyButton.qml
import QtQuick 2.0
import "my_button_impl.js" as Logic //为 MyButton.qml 的每个实例加载此 JavaScript 资源的一个实例

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;   // 此状态对于 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 资源（库）

一些 JavaScript 文件是无状态的，更像是可重用的库，例如提供了不需要导入的的辅助函数。

如果使用特殊的编译指示标记此类库，则可以节省大量内存并加速 QML 组件的实例化。

// fun.js
.pragma library

var pai = 3.1415926
function getπ() 
{
    return pai;
}

pragma 声明必须出现在除注释之外的任何 JavaScript 代码之前。

请注意，多个 QML 文档可以导入“fun.js”并调用它提供的 getπ()。 JavaScript 导入的状态在导入它的 QML 文档之间共享。

由于它们是共享的，所以尽管 QML 值可以作为函数参数传递，但.pragma 库文件不能直接访问 QML 组件实例对象或属性。