QML概念及框架--继承JavaScript

    QML推荐使用属性绑定和现有的QML元素来创建界面。为了允许执行更高级的行为，QML紧密集成了必要的JavaScript代码。QML中提供的JavaScript环境比在网页浏览器中的更严格。在QML中不可以添加或者修改JavaScript全局对象的成员，因为这样做可能会使一个没有经过声明的变量。在QML中会抛出一个异常，所以所有的局部变量都应该明确的声明。除了标准的JavaScript属性，在QML全局对象中还包含了一些很有用的函数，可以用来简化创建界面以及和QML环境进行交互。

1. 内联JavaScript

    较小的JavaScript函数可以和其他QML声明一起写在QML组件中。这些内联函数会像一般的函数一样添加到QML元素中：

import QtQuick 2.4

Item {
    function factorial(a) {
        a = parseInt(a)
        if(a <= 0)
            return 1;
        else
            return a * factorial(a-1)
    }
    MouseArea {
        anchors.fill: parent
        onClicked: console.log(factorial(10))
    }
}

    像一般函数一样，在一个QML组件根元素中的内联函数可以在组件外被调用。如果不想被被外部调用，那么这个函数可以添加到一个根元素以外的其他元素中，或者编写进一个外部的JavaScript文件中。

2. 分离的JavaScript文件

   大块的JavaScript代码需要写在一个独立的文件中，这些文件可以通过使用import语句导入QML文件中，就像导入QML模块一样。

前面代码中国的factorial()函数可以移动到一个外部名为“factorial.js”的文件中，然后进行访问：

import QtQuick 2.4
import "factorial.js" as MathFunctions

Item {
    MouseArea {
        anchors.fill: parent
        onClicked: console.log(MathFunctions.factorial(10))
    }
}

    相对和绝对的JavaScript路径都可以被导入。如果脚本文件不可访问，那么将发生错误。如果JavaScript需要从赢网络资源中获取，那么组件的状态会被设置为Loading，直到脚本被下载完毕。被导入的JavaScript文件总是使用as关键在来进行限定，每一个JavaScript文件的限定符必须是唯一的，在限定符合JavaScript文件之间是一对一映射的。

3. 代码隐藏（Code-Behind）实施文件

    大多数的JavaScript文件被导入一个QML是有状态的，它们经常作为该QML文件的逻辑实现。在这种情况下，为了使QML组件的实例有正确的行为，每个实例都需要JavaScript对象和状态的一个独立备份。导入一个JavaScript文件时的默认行为死为每一个QML组件实例提供一个唯一的、独立的备份。JavaScript代码和QML组件实例运行在相同的范围，因此可以访问和操作对象和声明的属性。

   一个QML中对JS文件中的值作了修改，再次调用时，这个值发生了变化。。。。。。

4. 无状态的JavaScript库

   一些JavaScript文件的行为更像库文件，它们提供了一组无状态的辅助函数来提供输入和计算输出，但是从来不直接操作QML组件实例。如果每一个QML组件实例都有一个这些库的拷贝，那么就会造成浪费。JavaScript程序员可以使用一个pragma来致命一个特定的文件是一个没有状态的库。

.pragma library

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

    这个prama声明必须出现在除了注释以外的所有JavaScript代码以前。虽然QML值可以作为函数的参数进行传递。不过这些共享的、无状态的库文件不能直接访问QML组件实例对象或属性。

5. 从其他JavaScript文件进行导入

    如果一个JavaScript文件需要使用定义在其他JavaScript文件中的函数，可以通过使用Qt.include()函数来导入其他的文件。这样会将其他文件中的所有函数导入到当前文件的命名空间中。例子：

import QtQuick 2.4
import "script.js" as MyScript

Item {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: {
            MyScript.showCalculations(10)
            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))
}

factorial.js文件的内容：

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

    注意，调用Qt.include()将会从factorial.js导入所有的函数到MyScript命名空间，这就意味着QML组件可以直接使用MyScript.factorial()来访问factorial()函数。

6. 在启动时运行JavaScript

    有时需要在应用程序（或者组件实例）启动时运行一些命令代码，但如果仅仅包含启动脚本作为全局代码，因为QML环境还没有完全建立起来，所以这样会有严重的局限，例如一些对象可能还没有被创建或者一些属性绑定还没有被运行。后面讲述的QML JavaScript限制一段中涵盖了全局脚本代码的确切限制。QMLComponent元素提供了一个附加的onCompleted属性可以用来在QML环境完全建立后切换到启动脚本代码的执行。

Rectangle {
    function startFunction(){
        //...startup code
    }
    
    Component.onCompleted: startupFunction();
}

    任何在QML文件中的元素，包含嵌套的元素和嵌套的QML组件实例，都可以使用这个附加属性。如果有多个onCompleted()处理器在启动时执行，它们会以未定义的顺序依次执行。类似的，Component::onDestruction附加属性会在组件销毁时触发。

7. 属性赋值与属性绑定

   当同时使用QML和JavaScript时，区分QML属性绑定和JavaScript赋值是很重要的。在QML中，使用“属性:值”语法来创建一个属性绑定。

Rectangle {
    width: otherItem.width //属性绑定，Rectangle的值会随otherItem.width的更改而更新
    
    Component.onCompleted: {
        width: otherItem.width  //属性赋值，不会调用QML的属性绑定
    }
}

8. 在JavaScript中接收QML信号

    要接收一个QML信号，可以使用信号的connect()函数将它关联到一个JavaScript函数上。

Item {
    id: item
    width: 200; height: 200
    
    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    
    Component.onCompleted: {
        mouseArea.clicked.connect(MyScript.jsFunction)  //MouseArea的信号关联到script.js中的jsFunction()上
    }
}

9. QML JavaScript限制

    QML执行标准的JavaScript代码，会有下面的限制：

    (1) JavaScript代码不能修改全局对象

     在QML中，全局对象是一个常量，现有的属性不能够被修改和删除，也不能够创建新的属性。大多数的JavaScript程序并不是有意修改全局对象的，然而，JavaScript自动生成一个为声明的变量是全局对象的隐式修改，在QML中是非法的：

//a在作用链中不存在
//非法修改未声明的变量
a = 1;
for(var ii = 1; i < 10; ++ii)
    a = a * ii
console.log("Result: " + a)

    它可以简单修改为合法的代码：

a = 1;
for(var ii = 1; i < 10; ++ii)
    a = a * ii
console.log("Result: " + a);

    无论隐式的或者显式的对全局对象的修改都会导致一个异常

    (2) 全局代码运行在一个缩小的范围

    在启动时，如果QML文件包含一个外部的JavaScript文件和“全局”代码，它会只包含该外部文件和这个全局对象的范围内执行。也就是说，它不会像通常那样访问QML对象和属性。全局代码只访问脚本中的局部变量是允许的。

//有效的全局代码
var colors = ["red", "blue", "green", "orange", "purple"]

    非法的全局代码--“rootObject”变量未定义

var initialPosition = {rootObject.x, rootObject.y}

    存在此限制是因为QML环境尚未被完全建立。要宰环境完全启动后运行后运动代码。

    (3) 目前在QML中this值是未定义的，要引用任何元素，可以使用其id。

Item {
    width: 200; height: 200

    function mouseAreaClicked(area) {
        console.log("Clicked in area at: " + area.x + "," + area.y)
    }
    //因为this未定义，所以下面的代码不会工作
    MouseArea{
        height: 50; width: 200
        onClicked: mouseAreaClicked(this)
    }
    //这样可以将area2传递给函数
    MouseArea {
        id: area2
        y: 50; height: 50; width: 200
        onClicked: mouseAreaClicked(area2)
    }
}