前言

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

更多推荐

QML中导入JavaScript文件