说道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值强制类型转换可以生成字符串而不发生错误:
- 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可以是数字、字符串、布尔值、对象等,它用于替换发出调用的字符串对象内的%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