一、概述

QML应用程序的一部分程序逻辑可以用 JavaScript 定义。JavaScript代码可以在QML文档中内联定义，也可以分离到单独的 JavaScript 文件中(在QML中称为JavaScript资源)。
QML支持两种不同类型的JavaScript资源：后台代码实现文件和共享(库)文件。这两种JavaScript资源都可以被其他JavaScript资源导入，或者包含在QML模块中。

二、后台代码实现文件

导入到QML文档中的大多数JavaScript文件都是导入它们的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资源(库)

默认情况下，从QML导入的JavaScript文件与QML组件共享它们的上下文。这意味着JavaScript文件可以访问相同的QML对象并可以修改它们。因此，每次导入都必须有这些文件的唯一副本。

前一节介绍了JavaScript文件的有状态导入。然而，有些JavaScript文件是无状态的，更像是可重用库，因为它们提供了一组helper函数，不需要从导入它们的地方获取任何东西。如果使用特殊的pragma标记此类库，可以节省大量内存并加速QML组件的实例化，如下面的示例所示。

// 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文档之间共享，因此在从不调用 factorial 函数的QML文档中调用 factorialCallCount 函数时，它的返回值可能是非零。

例如:

// 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)
}