QML中定义JavaScript资源

前言

可以用JavaScript定义QML应用程序的程序逻辑。JavaScript代码可以在QML文档中在线定义，也可以分成JavaScript文件。

QML支持两种不同类型的JavaScript资源：代码隐藏实现文件和共享（库）文件。两种JavaScript资源都可以由其他JavaScript资源导入，或包含在QML模块中。

代码隐藏实现资源的方式

导入QML文档的大多数JavaScript文件都是导入它们的QML文档的有状态实现。在这些情况下，文档中定义的QML对象类型的每个实例都需要JavaScript对象和状态的单独副本才能正常运行。

导入JavaScript文件时的默认行为是为每个QML组件实例提供唯一的隔离副本。通常，简单逻辑应该在QML文件中内联定义，但是更复杂的逻辑应该被分成代码隐藏实现资源以实现可维护性和可读性。

示例如下，每个MyButton实例都对应一个独立的js副本：

  // MyButton.qml
  import QtQuick 2.0

  //为MyButton的每个实例加载次 js 资源的新实例
  import "my_button_impl.js" as Logic 

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

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

  // my_button_impl.js
  //对于每个MyButton，此变量是独立的
  var clickCount = 0;   

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

共享库的方式

一些JavaScript文件更像是库 - 它们提供了一组辅助函数，它们接受输入和计算输出，但从不直接操作QML组件实例。

由于每个QML组件实例拥有这些库的唯一副本会很浪费，因此JavaScript程序员可以通过使用pragma指示特定文件是共享库，编译指示声明必须出现在除注释之外的任何JavaScript代码之前。

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

  // factorial.js
  //指定该文件是共享库
  .pragma library

  var factorialCount = 0;

  //阶乘
  function factorial(a) {
      a = parseInt(a);
      if (a > 0)
          return a * factorial(a - 1);

      //共享状态
      factorialCount += 1;
      return 1;
  }

  function factorialCallCount() {
      return factorialCount;
  }

  // Calculator.qml
  import QtQuick 2.0

  //该资源只被加载一次，即时创建了多个 Calculator 实例
  import "factorial.js" as FactorialCalculator 

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

 

参考

文档：Qt/Qt5.9.7/Docs/Qt-5.9.7/qtqml/qtqml-javascript-resources.html