QML编程杂谈

1.约定俗成的规则 

1.id
2.对象属性
3.属性声明
4.信号声明
5.JavaScript函数
6.子对象
7.状态
8.状态切换

2.断言的使用方法

//断言功能。就是判断其内的条件是否成立，就跟C++的断言一样的用法
function test_assert() {
       var x = 12
       console.assert(x == 12, "This will pass");
       console.assert(x > 12, "This will fail");
     }



输出如下：
This will fail
test_assert (qrc:/main.qml:15)
onCompleted (qrc:/main.qml:18)

 

3.计算函数执行时间

    function calcRunTime() {
        console.time("wholeFunction");


        console.time("firstPart");
        // first part
        for (var i=0 ; i<1000*1000 ; i++)
            ;

        console.timeEnd("firstPart");
        // second part
        for (var i=0 ; i<100 *1000; i++)
            ;
        console.timeEnd("wholeFunction");
    }

运行如下：
firstPart: 27ms
wholeFunction: 30ms

4.计算函数执行次数 

 

    function calcExeTimes() {
        console.count("fun called")
    }

    Component.onCompleted: {
        //test_assert();
        //calcRunTime();

        for (var i=0 ; i<10 ; i++)
            calcExeTimes();
    }

运行结果：
fun called: 1
fun called: 2
fun called: 3
fun called: 4
fun called: 5
fun called: 6
fun called: 7
fun called: 8
fun called: 9
fun called: 10

5.字符编解码

    function  characterCode() {
        var uri = "http://www.baidu.com/"
        var encodeUri = encodeURI(uri)
        var encodeUriCompoent = encodeURIComponent(uri)
        console.log(encodeUri)
        console.info(encodeUriCompoent)

        var decodeUri = decodeURI(encodeUri)
        var decodeUriCompoent = decodeURIComponent(encodeUriCompoent)
        console.info(decodeUri)
        console.info(decodeUriCompoent)
    }
运行结果：
qml: http://www.baidu.com/
qml: http%3A%2F%2Fwww.baidu.com%2F
qml: http://www.baidu.com/
qml: http://www.baidu.com/

6.解析JSON

    property var jsonList:{
            "name":"BeJson",
        "url":"http://www.bejson.com",
        "page":88,
        "isNonProfit":true,
        "address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},
        "links":[{"name":"Google","url":"http://www.google.com"},
                 {"name":"Baidu","url":"http://www.baidu.com"},
                 {"name":"SoSo","url":"http://www.SoSo.com"}
                ]
           }


        function parseJson(json) {
            console.log(json["name"])
            console.log(json["url"])
            console.log(json["page"])
            console.log(json["isNonProfit"])
            console.log(json.address["street"])
            console.log(json.address["city"])
            console.log(json.address["country"])
            console.log(json.links[0].name)
            console.log(json.links[0].url)
            console.log(json.links[1].name)
            console.log(json.links[1].url)
            console.log(json.links[2].name)
            console.log(json.links[2].url)
        }

运行结果：
qml: BeJson
qml: http://www.bejson.com
qml: 88
qml: true
qml: 科技园路.
qml: 江苏苏州
qml: 中国
qml: Google
qml: http://www.google.com
qml: Baidu
qml: http://www.baidu.com
qml: SoSo
qml: http://www.SoSo.com

 7.创建json

        function createJson() {
            var myObj = { "name":"Bill Gates",  "age":62, "city":"Seattle" };
            myObj.sex = "man";
            var myJSON = JSON.stringify(myObj);
            return myJSON;
        }
运行结果：
qml: -0-- {"name":"Bill Gates","age":62,"city":"Seattle","sex":"man"}