說道QML，不得不先說一下ECMAScript：

ECMAScript語言的標準是由Netscape、Sun、微軟、Borland等公司基於JavaScript和JScript錘煉、定義出來的。

ECMAScript可以為不同種類的宿主環境提供核心的腳本編程能力。ECMAScript僅僅是一個描述，定義了腳本語言的所有屬性、方法和對象。它描述了一下內容：

• 語法
• 類型
• 語句
• 關鍵字
• 保留字
• 運算符
• 對象

其他語言可以以它為基礎拓展出新特性，比如QML引入了Qt對象系統中的信號與槽等特色功能。

QML有三個核心：

• ECMAScript
• Qt對象系統
• Qt Quick標準庫

所以說學號QML，了解ECMAScript必不可少。在開始了解ECMAScript的基本特性之前，要知道qmlscene可以加載QML文檔以達到測試的目的，比如如下測試代碼，就可以在Qt命令行界面中以“qmlscene text.qml”的方式顯示界面效果：

/*
 * text.qml
 */
import QtQuick 2.2
Rectangle {
    Component.onCompleted: {
        // 這裏放測試代碼
    }
}

下面開始簡單介紹ECMAScript：

1.語法

與C、C++或者Java類似。如果你有這幾種語言的基礎，那學習ECMAScript簡直就是“張飛吃豆芽，小菜一碟”。需要註意的幾點是：

• 區分大小寫

知道變量area和Area不一樣就行了，無需多言。

• 弱類型

ECMAScript語言是弱類型語言，變量沒有特定的類型，在定義變量的時候都用var定義，可以用任意值初始化變量，而且可以隨時改變變量所存儲的數據類型，當然了，最好是不要這麽做。

• 分號可寫可不寫

ECMAScript中，如果沒有以分號結尾，它就會把本行的末尾當做是該語句的結束。之後需要QML與C++混合編程，為了不思想分裂，故而還是與c++風格保持一致的好啊，你說是也不是。

2.變量

與c++中變量聲明以及定義是類似的，這裏不必多言。在ECMAScript中，變量可以存放兩種類型的值，即原始值和引用值。原始值一般存放在棧上，引用值是一個指針，指向存儲在堆中的對象，如果你熟悉c++的話，那麽很容易就能理解這個概念。

3.原始類型

在ECMAScript中，原始類型有5種：

• Undefined
• Null
• Boolean
• Number
• String

typeof運算符可以判斷一個值的類型，是原始類型會返回類型的名字，是引用類型則統一返回“object”作為類型名字。以下為簡單的示例：

/*
 * typeof value
 */
import QtQuick 2.2
Rectangle {
    Component.onCompleted: {
        var name = "matao";
        console.log(typeof name);
        console.log(typeof 60);
    }
}

Undefined類型和Null類型都只有一個值，即undefined、null。

數字類型的最大值是Number.MAX_VALUE，最小值是Number.MIN_VALUE，它們定義了Number值的外邊界，所有的ECMAScript數都必須在這兩個值之間。不過，由表達式的值可以不落在這兩個數之間。大於最大值，它將被賦值為Number.POSITIVE_INFINITY，即正無窮大；當生成的數值小於Number.MIN_VALUE時，將被賦值為Number.NEGATIVE_INFINITY，即負無窮大。其實，ECMAScript也有專門表示無窮大的值，即Infinity，而-Infinity表示負無窮大。

isFinit()方法可以判斷一個數是否是又窮的。

還有一個特殊值NaN，表示非數。isNaN判斷一個數是否是非數。

4.類型轉換

• toString()
  • Boolean、Number、String三種原始類型，都有toString()方法，可以把它們的值變為字符串；
• parseInt()和parseFloat()
  • 這兩種方法只適用於String類型，而且只轉換無效字符之前的部分，見如下示例：

        parseInt("2014年");                   //2014
        parseInt("3.14");                       //3
        parseFloat("3.13.1");                 //3.13
        parseInt("INGI");                       //NaN        

• 強制類型轉換
  • Boolean(value)
    • value是非空字符串、非0數字或對象時，Boolean()返回true；
    • value是空字符串、0、undefined或null，Boolean()返回false；
  • Number(value)
    • Number()轉換的是整個值！ 這是與parseInt()和parseFloat()不同的地方。
  • String(value)
    • 它與調用tostring()方法的唯一不同在於：對null或undefined值強制類型轉換可以生成字符串而不發生錯誤：

            var null2String = String(null);         // “null”
            var oNull = null
            var s2 = oNull.toString();               // error   

5.對象

首先聲明，其實在ECMAScript中並沒有“類”這個詞，與其對應的是“對象定義”，這裏的“類”代指的就是這個意思，區別於C++、Java中的類。前面提到的引用值，指向的就是對象。

對象是由new運算符加上要實例化的類型的名字創建的。比如：

var a = new Array();

　　如果類的構造函數沒有參數，括號可以省略。

幾個基本的對象：

• Object

　　Object類是所有ECMAScript類的基類，Object類的所有屬性和方法都會出現在其他類中：

• Object類中的屬性：
  • constructor，指向創建對象的函數，對於Object類，它只想object()函數；
  • prototype，對該對象的對象原型的引用；
• Object類中的方法：
  • hasOwnProperty(property)，判斷對象是否有某個屬性，property為字符串；
  • isPrototypeOf(object)，判斷該對象是否為另一個對象的原型；
  • propertyIsEnumerable(property)，判斷給定的屬性是否可以用for...in語句進行枚舉（一般自定義的對象屬性都是可以枚舉的）；
  • toString()，返回對象的字符串表示。
  • valueOf()，返回最適合該對象的原始值。對於許多類，該方法返回的值都與toString()一樣。

以上的每種屬性和方法都可以被object的派生類覆蓋。

關於對象有以下幾點需要說明：

1.動態增加屬性

在ECMAScript中，對象的屬性可以動態地增刪，比如下面的示例：

            var person = new Object();
            person.name = "LingXiaoMo";
            person.year = 20;

2.動態增加方法

對象的方法就是一個函數，也可以動態地增加，然後按函數的方式調用，比如下面的示例：

            person.printInfo = function printInfo() {
                console.log("name-" , this.name , "year-" , this.year);
            }
            person.printInfo();

3.使用數組下標訪問屬性和方法

對象的屬性和方法居然可以使用數組下標的形式來訪問。比如這樣：

            console.log(person["name"]);             // ->person.name
            person["printInfo"]();                         // ->person.printInfo()

　　[]中的東西叫“索引”，這裏的索引是字符串，而不是我們常見的整數。是不是想到了Key-Value（鍵值對）？

4.使用for...in枚舉對象屬性

前面我們提過propertyIsEnumerable()方法可以判斷一個對象的屬性是否可以枚舉。多數自定義屬性和方法都是可以枚舉的，而內置對象或宿主對象的多數核心屬性是不能枚舉的。枚舉對象屬性時我們使用數組下標法訪問對象屬性。看如下的示例：

            for(var prop in person) {
                console.log(prop,",",person[prop]);
            }

5.對象的字面量表示法

前面已經用過數字字面量、字符串字面量：

• • 所有QML代碼中直接輸入的數字被看作是數字字面量；
  • 字符串字面量可以用雙引號（”）或單引號（‘)來聲明；

其實對象也能用字面量表示：

            var person = {
                "name": "LingXiaoMo",
                "year": 20
            }

　　上面的代碼和前面先構造Object再添加屬性的方式，得到的是一樣的對象。

　　對象的字面量表示法，語法是這樣的：使用一對花括號表示一個對象，其屬性以Key:Value對的形式放在其括號內，多個屬性之間使用 逗號 分隔；如果一個屬性本身是對象，還可以使用字面量表示法來嵌套描述。

• String

String、Boolean、Numble都有自己的對象表示法，一般都使用原始值。

你可以這樣構造一個String對象：

        var str = new String("I\‘m a string");

　　對字符串有以下基本操作：

1.字符串長度

length屬性返回字符串中的字符個數：

            console.log(str.length);

　　對於String的原始值，同樣可以通過length屬性獲知字串長度。比如：

            console.log("I\‘m a string".length);

2.訪問單個字符

charAt()方法可以訪問指定索引位置的字符；

可以通過數組下標法訪問指定位置的字符；

而charCodeAt()方法返回指定位置字符對應的Unicode編碼;

下面是簡單的示例：

            console.log(str.charAt(2));               // 輸出m
            console.log(str[0]);                        // 輸出I
            console.log(str.charCodeAt(1));        // 輸出39

3.查找字串

indexOf()方法從字符串的開頭檢索子串，lastInderOf()方法從字符串的結尾開始檢索子串，它們返回子串在字符串中的位置，如果找不到則返回-1.這兩個方法有一個可選參數，指定開始查找的位置；

search()方法用於檢索字符串中指定的字符串，或檢索與正則表達式相匹配的子字符串。區分大小寫，且只能從字符串的開始進行查找；

match()方法可在字符串內檢索指定的值，或者尋找匹配指定正則表達式的一個或多個子串。返回一個存放所有符合規則的子串的數組；

註：

上面4種方法都區分大小寫。以一個忽略大小寫的正則表達式為參數調用search()或match()方法，可實現忽略大小寫的查找。

簡單的示例：

            console.log(str.indexOf("ing",4));         // 輸出9
            console.log(str.search(/String/));          // 輸出-1
            console.log(str.search(/String/i));         // 忽略大小寫，輸出6
            console.log(str.match("tri"));               // 輸出[tri]
            var numberSource = new String("2014-08-18, I got 96");
            var results = numberSource.match(/\d+/g);
            console.log(results.length);                  // 輸出4
            console.log(results);                             // 輸出[2014,08,18,96]

4.字符串比較

使用大於(>)、小於(<)、等於(==)三個運算符比較字符串，使用的是字符的Unicode編碼進行比較，忽略了與本地語言環境相關的語義和排序規則。

localeCompare()方法在比較字符串時，默認采用底層操作系統提供的排序規則。等於時返回0，大於時返回1，小於時返回-1。

示例代碼片段：

            var str1 = "Qt";
            var str2 = "qt";
            var str3 = "ok";
            console.log(str1<str2);                // true
            console.log(str1.localeCompare(str2));           // 1
            console.log(str3.localeCompare(str2));           // -1

　　可以看到第3行和第4行的結果不一致，真令人意外。

5.連接字符串

concat()方法用於連接兩個或多個字符串，返回一個新的字符串。

實際中，使用”+“號可能會更方便一些，效果一樣。

6.提取子串

提取子串的方法有三個：

• • • slice(): 兩個參數，第一個參數表示起始位置，第二個參數表示結束位置（截取的子串不包括此位置上字符）；
    • substring(): 兩個參數，與slice()類似，此方法總是把較小的參數作為起始位置，比如substring(1,3)和substring(3,1)效果一樣；
    • substr(): 兩個參數，第一個參數表示其實位置，第二個表示待提取子串的長度；

註：

上述三個方法都可以不指定第二個參數，如不指定則返回從起始位置到結束的所有字符；

slice()和substring()兩個方法的不同之處在於對負數參數的處理：前者遇到負數時，會應用”從串尾倒數“這種策略，而後者則是把負數當作0來處理。

7.大小寫轉換

　　實現大小寫轉換的有四個方法：

• 大寫->小寫
  • toLowerCase()
  • toLocaleLowerCase()
• 小寫->大寫
  • toUpperCase()
  • toLocaleUpperCase()

8.字符串替換

replace方法可以實現這個功能。它的第一個參數是一個字符串原始值或者正則表達式，第二個參數是新字符串。

9.使用arg()進行值替換

arg()是Qt C++中的東西，在這裏是QML對實現ECMAScript時做的擴充。

arg()的語法是：string arg(value)。其中value可以是數字、字符串、布爾值、對象等，它用於替換發出調用的字符串對象內的%1、%2、%N等占位符；布爾值會被替換為1或0；對於對象，則使用toString()方法轉換後的結果來替換對應的占位符。arg()會返回一個新的字符串對象。

示例代碼片段：

            var expression = "%1 < %2 = %3";
            var result = expression.arg(7).arg(8).arg("true");

需要註意的是，String類型的對象是只讀的，凡是牽涉到修改的動作，母串本身不會改變。另外，字符串原始值是偽對象，它可以使用String類的所有屬性和方法。

String類說到這裏，不再多言。

• RegExp

在Qt C++中有QRegExp，在QML中有RegExp，它們是對字符串執行模式匹配的強大工具。

在ECMAScript中支持的兩種構造正則表達式的方法：

• • 字面量語法：/pattern/attributes
  • 創建RegExp對象：new RegExp(pattern,attributes)

或RegExp(pattern,attributes)。

關於正則表達式的修飾符、元字符等其他內容，這裏暫且略過。

• Array

在ECMAScript中數組都是動態的，其大小可以隨時變化，而且數組中的元素類型可以不同。

下面我們來看看對數組的基本操作：

1、數組的創建

        　　var arrayObj = new Array();　//創建一個數組

       　　 var arrayObj = new Array([size]);　//創建一個數組並指定長度，註意不是上限，是長度

       　　 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//創建一個數組並賦值 

　　 要說明的是，雖然第二種方法創建數組指定了長度，但實際上所有情況下數組都是變長的，也就是說即使指定了長度為5，仍然可以將元素存儲在規定長度以外的，註意：這時長度會隨之改變。

2、數組的元素的訪問

            var testGetArrValue=arrayObj[1]; //獲取數組的元素值

            arrayObj[1]= "這是新值";              //給數組元素賦予新的值

3、數組元素的添加

            arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾，並返回數組新長度

            arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始，數組中的元素自動後移，返回數組新長度

            arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置，插入位置的元素自動後移，返回""。

4、數組元素的刪除

            arrayObj.pop(); //移除最後一個元素並返回該元素值

            arrayObj.shift(); //移除最前一個元素並返回該元素值，數組中元素自動前移

            arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素，數組形式返回所移除的元素

5、數組的截取和合並

            arrayObj.slice(start, [end]); //以數組的形式返回數組的一部分，註意不包括 end 對應的元素，如果省略 end 將復制 start 之後的所有元素

            arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //將多個數組（也可以是字符串，或者是數組和字符串的混合）連接為一個數組，返回連接好的新的數組

6、數組的拷貝

            arrayObj.slice(0); //返回數組的拷貝數組，註意是一個新的數組，不是指向

            arrayObj.concat(); //返回數組的拷貝數組，註意是一個新的數組，不是指向

7、數組元素的排序

            arrayObj.reverse(); //反轉元素（最前的排到最後、最後的排到最前），返回數組地址

            arrayObj.sort(); //對數組元素排序，返回數組地址   

8、數組元素的字符串化

            arrayObj.join(separator); //返回字符串，這個字符串將數組的每一個元素值連接在一起，中間用 separator 隔開。

            //toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

數組對象的3個屬性：

1、length 屬性

　　Length屬性表示數組的長度，即其中元素的個數。因為數組的索引總是由0開始，所以一個數組的上下限分別是：0和length-1。和其他大多數語言不同的是，ECMAScript數組的length屬性是可變的，這一點需要特別註意。當length屬性被設置得更大時，整個數組的狀態事實上不會發生變化，僅僅是length屬性變大；當length屬性被設置得比原來小時，則原先數組中索引大於或等於length的元素的值全部被丟失。下面是演示改變length屬性的例子：

            var arr=[12,23,5,3,25,98,76,54,56,76];

            //定義了一個包含10個數字的數組

             //顯示數組的長度10

            arr.length=12; //增大數組的長度


             //顯示第9個元素的值，為56

            arr.length=5; //將數組的長度減少到5，索引等於或超過5的元素被丟棄

             //顯示第9個元素已經變為"undefined"

            arr.length=10; //將數組長度恢復為10

             //雖然長度被恢復為10，但第9個元素卻顯示"undefined"

　　由上面的代碼我們可以清楚的看到length屬性的性質。但length對象不僅可以顯式的設置，它也有可能被隱式修改。ECMAScript中可以使用一個未聲明過的變量，同樣，也可以使用一個未定義的數組元素（指索引超過或等於length的元素），這時，length屬性的值將被設置為所使用元素 索引的值加1。例如下面的代碼：

            var arr=[12,23,5,3,25,98,76,54,56,76];

            arr[15]=34;

2、prototype 屬性

返回對象類型原型的引用。prototype 屬性是 object 共有的。

objectName.prototype

objectName 參數是object對象的名稱。

說明：用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。

對於數組對象，以以下例子說明prototype 屬性的用途。

給數組對象添加返回數組中最大元素值的方法。要完成這一點，聲明一個函數，將它加入 Array.prototype， 並使用它。

　　　　　　function array_max()
 　　　　　　{
    　　　　　　var i,
  　　　　　　  max = this[0];
   　　　　　　 for (i = 1; i < this.length; i++)
   　　　　　　 {
      　　　　　　  if (max < this[i])
       　　　　　　 max = this[i];
  　　　　　　  }
  　　　　　　  return max;
　　　　　　}
　　　　　　Array.prototype.max = array_max;
　　　　　　var x = new Array(1, 2, 3, 4, 5, 6);
　　　　　　var y = x.max();

3、constructor 屬性

表示創建對象的函數。

object.constructor //object是對象或函數的名稱。

說明：constructor 屬性是所有具有 prototype 的對象的成員。constructor 屬性保存了對構造特定對象實例的函數的引用。

例如：

　　　　　　x = new String("Hi");

　　　　　　if (x.constructor == String) // 進行處理（條件為真）。

　　或

　　　　　　function MyFunc {
  　　　　　　 // 函數體。
　　　　　　}
　　　　　　y = new MyFunc;
　　　　　　if (y.constructor == MyFunc){} // 進行處理（條件為真）。

　　對於數組來說：

            y = new Array();

關於Math、Data等類型請移駕到Qt幫助模式下，以關鍵字檢索即可！

6.函數

首先，ECMAScript不支持函數重載，然後我們再說函數語法。

函數語法如下：

　　　　function functionName(arg1,arg2,...,argN) {
   　　　　 // 要執行的代碼
　　　　}

• function是定義函數時必須使用的關鍵字；
• 小括號內arg參數可以不加；
• functionName可以任意取，符合變量命名規則即可；
• 花括號內是要執行的代碼塊；
• 函數要返回值時，可以用return語句；

　其他的一些運算符、優先級以及循環語句和條件控制語句，這裏一概不論，下面說說這個console。

7.使用console

console是和實現ECMAScript的宿主環境相關的一個對象，提供了輸出日誌信息、斷言、計時器、計數器、性能分析等功能。

前面一直使用的console.log()是用來輸出調試信息的，console對象提供了多個打印調試信息的方法：

• console.log();
• console.debug();
• console.info();
• console.warn();
• console.error();

這些方法是調試QML的利器，我們以console.log()為例來說明，它可以打印下列信息：

• 字符串
• 數字
• 數組
• 任意實現toString()方法的對象

示例代碼片段：

　　　　console.log("I\‘m minor,^_^");
　　　　console.log("I\‘m ", 16);
　　　　var array = new Array(10,12,8,"Anna");
　　　　console.debug("print array:",array);

　　還有一個常用的功能就是計時器：

• console.time(tag)啟動定時器，字符串類型的tag是必須的；
• console.timeEnd(tag)停止計時器；

簡單示例如下：

　　　　console.time("控制臺計時器一");
　　　　for(var i=0;i<1000;i++){
　　　　　　for(var j=0;j<1000;j++){}
　　　　}
　　　　console.timeEnd("控制臺計時器一");

好，路還在繼續，只不過本節到此結束吧！

轉載請註明博客來源：http://www.cnblogs.com/lxmwb/p/6291220.html

Qt Quick編程(1)