QML中导入JavaScript文件

前言

JavaScript文件可以由QML文件和其他JavaScript文件导入。可以通过相对或绝对URL导入JavaScript文件。JavaScript资源也可以导入QML模块和其他JavaScript文件。

QML文件中导入JavaScript文件

语法格式： import  "ResourceURL"  as  Qualifier ，如下，

//导入
import "jsfile.js" as Logic

//使用变量和函数
console.log( Logic.str );
Logic.method();

导入的JavaScript资源始终使用“as”关键字进行限定。JavaScript资源的限定符必须以大写字母开头，并且必须是唯一的，因此限定符和JavaScript文件之间始终存在一对一的映射。（这也意味着限定符的名称不能与内置的JavaScript对象相同，如Date和Math）。

JavaScript文件中导入别的文件

文档说，在QtQuick2.0中，添加了标准QML导入语法的变体来导入其他JavaScript资源以及QML类型命名空间。

由于JavaScript资源能够以这种方式导入另一个脚本或QML模块，因此QtQuick2.0定义了一些额外的语义：

• 带导入的脚本不会从导入它的QML文档继承导入（如访问Component.errorString会失败）
• 没有导入的脚本将从导入它的QML文档继承导入（如访问Component.errorString会成功）
• 共享脚本（即定义为.pragma library）不会从任何QML文档继承导入，即使它不导入其他脚本或模块

导入js语法格式： .import "filename.js" as Qualifier  （前面有个点），可以看到用法同QML导入JavaScript差不多，

//导入
.import "factorial.js" as MathFunctions

//使用变量和函数
console.log( MathFunctions.str );
MathFunctions.method();

导入qml语法格式： .import TypeNamespace MajorVersion.MinorVersion as Qualifier （前面有个点），如下 ，

.import Qt.test 1.0 as JsQtTest

JavaScript文件中包含别的Javascript文件

导入JavaScript文件时，必须使用限定符导入该文件。有时需要在导入上下文中使用这些函数而不需要对它们进行限定，并且在这种情况下，Qt.include() 函数可以用于包含来自另一个的一个JavaScript文件。这会将其他文件中的所有函数复制到当前文件的命名空间中，但会忽略该文件中定义的所有编译指示和导入。

文档的示例如下：

  import QtQuick 2.0
  import "script.js" as MyScript

  Item {
      width: 100; height: 100

      MouseArea {
          anchors.fill: parent
          onClicked: {
              //可以调用import的js的函数
              MyScript.showCalculations(10)
              //可以调用import的include的js的函数
              console.log("Call factorial() from QML:",MyScript.factorial(10))
          }
      }
  }

  // script.js
  Qt.include("factorial.js")

  function showCalculations(value) {
      console.log(
          "Call factorial() from script.js:",
          factorial(value)); //没有使用限定符就是用的另一个js文件的函数
  }

  // factorial.js
  function factorial(a) {
      a = parseInt(a);
      if (a <= 0)
          return 1;
      else
          return a * factorial(a - 1);
  }

参考

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