Qt Quick编程(1)——QML的宗旨部分ECMAScript

探究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 属性的用处。

给数组对象添加再次回到数组中最大元素值的主意。要达成这点,声Bellamy个函数,将它插足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