Qt Quick編程(1)——QML的核心部分ECMAScript
說道QML，不得不先說一下ECMAScript：javascript
ECMAScript語言的標準是由Netscape、Sun、微軟、Borland等公司基於JavaScript和JScript錘鍊、定義出來的。html
ECMAScript能夠爲不一樣種類的宿主環境提供核心的腳本編程能力。ECMAScript僅僅是一個描述，定義了腳本語言的全部屬性、方法和對象。它描述了一下內容：java
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象
其餘語言能夠以它爲基礎拓展出新特性，好比QML引入了Qt對象系統中的信號與槽等特點功能。c++
QML有三個核心：正則表達式
- ECMAScript
- Qt對象系統
- Qt Quick標準庫
因此說學號QML，瞭解ECMAScript必不可少。在開始瞭解ECMAScript的基本特性以前，要知道qmlscene能夠加載QML文檔以達到測試的目的，好比以下測試代碼，就能夠在Qt命令行界面中以「qmlscene text.qml」的方式顯示界面效果：express
/*
* 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值強制類型轉換能夠生成字符串而不發生錯誤：
- Boolean(value)
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能夠是數字、字符串、布爾值、對象等，它用於替換髮出調用的字符串對象內的%一、%二、%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中數組都是動態的，其大小能夠隨時變化，並且數組中的元素類型能夠不一樣。
下面咱們來看看對數組的基本操做：
一、數組的建立
var arrayObj = new Array(); //建立一個數組
var arrayObj = new Array([size]); //建立一個數組並指定長度，注意不是上限，是長度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //建立一個數組並賦值
要說明的是，雖然第二種方法建立數組指定了長度，但實際上全部狀況下數組都是變長的，也就是說即便指定了長度爲5，仍然能夠將元素存儲在規定長度之外的，注意：這時長度會隨之改變。
二、數組的元素的訪問
var testGetArrValue=arrayObj[1]; //獲取數組的元素值
arrayObj[1]= "這是新值"; //給數組元素賦予新的值
三、數組元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾，並返回數組新長度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始，數組中的元素自動後移，返回數組新長度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置，插入位置的元素自動後移，返回""。
四、數組元素的刪除
arrayObj.pop(); //移除最後一個元素並返回該元素值
arrayObj.shift(); //移除最前一個元素並返回該元素值，數組中元素自動前移
arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素，數組形式返回所移除的元素
五、數組的截取和合並
arrayObj.slice(start, [end]); //以數組的形式返回數組的一部分，注意不包括 end 對應的元素，若是省略 end 將複製 start 以後的全部元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //將多個數組（也能夠是字符串，或者是數組和字符串的混合）鏈接爲一個數組，返回鏈接好的新的數組
六、數組的拷貝
arrayObj.slice(0); //返回數組的拷貝數組，注意是一個新的數組，不是指向
arrayObj.concat(); //返回數組的拷貝數組，注意是一個新的數組，不是指向
七、數組元素的排序
arrayObj.reverse(); //反轉元素（最前的排到最後、最後的排到最前），返回數組地址
arrayObj.sort(); //對數組元素排序，返回數組地址
八、數組元素的字符串化
arrayObj.join(separator); //返回字符串，這個字符串將數組的每個元素值鏈接在一塊兒，中間用 separator 隔開。
//toLocaleString 、toString 、valueOf：能夠看做是join的特殊用法，不經常使用
數組對象的3個屬性：
一、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;
二、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();
三、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("控制檯計時器一");
好，路還在繼續，只不過本節到此結束吧！
- 1. Qt Quick QML
- 2. Qt Quick學習一（核心編程）
- 3. Qt quick核心編程學習(一)
- 4. 《Qt Quick核心編程》目錄
- 5. Qt Quick核心編程 上市了
- 6. 《Qt Quick核心編程》勘誤
- 7. Qt Quick入門教程(1): Qt Quick與QML介紹
- 8. qt quick中qml編程語言
- 9. Qt Widgets、QML、Qt Quick 的區別
- 10. Qt Widgets、QML、Qt Quick的區別
- 更多相關文章...
- • Hibernate的核心接口 - Hibernate教程
- • MyBatis的核心組件 - MyBatis教程
- • Git五分鐘教程
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。