Qt Quick presenta un lenguaje de secuencias de comandos llamado QML (Qt Meta/Modeling Language) para Qt, que es la implementación del estándar ECMAScript. Entonces, la sintaxis QML se implementa sobre la base de la sintaxis ECMAScript.

El estándar de lenguaje ECMAScript está templado y definido por Netscape, Sun, Microsoft, Borland y otras compañías basadas en JavaScript y JScript.

ECMAScript es solo una descripción que define todas las propiedades, métodos y objetos del lenguaje de secuencias de comandos. Otros lenguajes pueden implementar ECMAScript como base para la funcionalidad, tal como lo hace JavaScript. Esta implementación se puede ampliar para incluir nuevas funciones específicas del entorno del host. Por ejemplo, QML introduce señales y ranuras en el sistema de objetos Qt, y agrega nuevas funciones muy distintivas, como el enlace dinámico de propiedades.

Como lenguaje de programación completamente nuevo, QML tiene tres núcleos:

ECMAScript
Sistema de objetos Qt
Biblioteca estándar Qt Quick

Los beneficios de este artículo, la tarifa para recibir el paquete de materiales de aprendizaje de desarrollo Qt, video técnico, el contenido incluye (base del lenguaje C++, introducción a la programación Qt, mecanismo de ranura y señal QT, dibujo de imagen de desarrollo de interfaz QT, red QT, programación de base de datos QT, combate de proyecto QT, QSS, OpenCV, módulo rápido, preguntas de entrevista, etc.) ↓↓↓↓↓↓ Vea a continuación

1. Gramática

Veamos la sintaxis de ECMAScript una por una. (QML es la implementación del estándar ECMAScript, por lo que la sintaxis de los dos es básicamente la misma)

1. Sensibilidad de mayúsculas y minúsculas

Como en C++, las variables, los nombres de las funciones, los operadores y todo lo demás distingue entre mayúsculas y minúsculas, es decir, las variables area y Area son diferentes.

2. Escritura débil

A diferencia de C++, las variables en ECMAScript no tienen un tipo específico. Al definir una variable, solo se usa el operador var, y se puede inicializar a cualquier valor. Puede cambiar el tipo de datos almacenado por la variable en cualquier momento (de hecho, debe intentar evitar hacer esto). Por ejemplo:

var i = 0
console.log(i)
i = "hello"
console.log(i)

Aunque no hay ningún problema sintáctico para hacerlo, una buena práctica de codificación es que una variable siempre contenga un valor del mismo tipo.

3. El punto y coma después de la declaración es opcional

Los lenguajes como C, C++ y Java requieren que cada declaración termine con un punto y coma (;). ECMAScript permite a los desarrolladores decidir si terminar una línea de código con un punto y coma. Sin el punto y coma, ECMAScript trata el final de la línea como el final de la declaración (similar a Lua, Python, Visual Basic). En cuanto a agregar un punto y coma, depende de su preferencia. Las dos líneas de código siguientes son sintácticamente correctas:

var background = "white"
var i = 0

2. Variables

El operador var se usa para declarar variables en ECMAScript.Al igual que en C++, los nombres de las variables deben seguir ciertas reglas.

1. Declaración de variables

Las variables se definen mediante el operador var seguido del nombre de la variable. Por ejemplo:

var i = 0

En este ejemplo, la variable i se declara y se inicializa a 0. Tampoco puede inicializarlo y luego inicializarlo cuando se usa.

Una instrucción var puede definir múltiples variables. Por ejemplo:

var i = 0 , name = "j"

Este ejemplo define la variable i, inicializada en un número; también define el nombre de la variable, inicializado en una cadena. Verá, a diferencia de C++ o Java, múltiples variables definidas por una instrucción var pueden tener diferentes tipos.

2. Reglas de nomenclatura de variables

La denominación de variables debe seguir dos reglas simples:

El primer carácter debe ser una letra, un guión bajo (_) o un signo de dólar ($).
Los caracteres restantes pueden ser guiones bajos, signos de dólar o cualquier carácter alfanumérico.

Los siguientes nombres de variables son legales:

var test
var objectName
var —phone
var $1

Para facilitar la lectura del código, también se debe seguir un cierto estilo de nomenclatura al nombrar variables. Debido a que Qt es un marco de aplicación basado en C++, y QML es parte del marco Qt, se recomienda usar el mismo estilo de nomenclatura que el código Qt C++: mayúsculas y minúsculas.

Para las variables (incluidos los nombres de funciones), comience con una letra minúscula y use mayúsculas y minúsculas entre palabras. Para los nombres de las clases, comience con una letra mayúscula y use mayúsculas y minúsculas entre las palabras.

Tres, el tipo original

ECMAScript tiene 5 tipos primitivos, a saber, Indefinido, Nulo, Booleano, Número y Cadena. Cada tipo primitivo define el rango de valores que contiene y su representación literal.

ECMAScript proporciona el operador typeof para determinar el tipo de un valor. Si el valor es un tipo primitivo, typeof devolverá su nombre de tipo específico; y si el valor es un valor de referencia, typeof devolverá uniformemente "objeto" como nombre de tipo. Los ejemplos son los siguientes:

import QtQuick 2.2

Rectangle {
	Component.onCompleted:{
		var name = "Zhang San Feng"
        console.log(typeof name) // 输出：qml:string
        console.log(typeof 60) // 输出：qml:number
	}
}

El tipo del nombre de la variable es cadena y el tipo del literal 60 es número. Entre ellos, "qml:" es el prefijo que se lleva cuando se usa console.log para generar información.

1. Tipo indefinido

El tipo Undefined solo tiene un valor, undefined. Cuando una variable declarada no se inicializa, el valor predeterminado de la variable no está definido. Por ejemplo:

var temp

El código anterior declara la variable temp pero no la inicializa explícitamente, su valor se establecerá en indefinido, que es diferente de C++. Esta característica de ECMAScript: las variables no inicializadas también tienen un valor inicial fijo, podemos comparar una variable con undefined para implementar alguna lógica comercial. Por ejemplo:

var runOnce;
...
if(runOnce == undefined) {
    runOnce = true
}
else {
    ...
}

Cuando la función no tiene un valor de retorno claro, el valor devuelto tampoco está definido, como se muestra a continuación:

function blankFunc(){}
console.log(blankFunc() == undefined) // 输出：true

2. Tipo nulo

El tipo Nulo también tiene un solo valor, nulo.

Puede inicializar explícitamente una variable en nulo e implementar alguna lógica en consecuencia.

3. tipo booleano

Boolean es uno de los tipos más utilizados en ECMAScript, tiene dos valores verdadero y falso.

4. Tipo de número

El tipo Número es el más especial, puede representar tanto números enteros de 32 bits como números de punto flotante de 64 bits. Cualquier número que ingrese directamente en el código QML se trata como literales de tipo Número.

El siguiente código declara una variable que contiene un valor entero:

var integer = 10

El valor máximo del tipo de número es Number.MAX_VALUE y el valor mínimo es Number.MlN_VALUE, que definen el límite exterior del valor de Number, y todos los números de ECMAScript deben estar entre estos dos valores.

5. Tipo de cadena

El tipo String en ECMAScript existe como un tipo primitivo, que almacena caracteres Unicode, y el tipo Qt C++ correspondiente es QString. Cuando combina programación C++ y QML, todas las variables de tipo QString se asignarán a String en ECMAScript.

Los literales de cadena se pueden declarar con comillas dobles (") o comillas simples ('). En Qt, solo se usan comillas dobles y simples para representar caracteres. Para mantener la coherencia, se recomienda no usar comillas simples para representar cadenas. No hay ningún tipo de carácter en ECMAScript, por lo que puede usar comillas simples para representar cadenas. Las siguientes dos líneas de código son válidas:

var name = 'Lv Bu'
var name = "Guan Yu"

Cuatro, conversión de tipo

Es inimaginable que un lenguaje de programación no admita la conversión de tipos. En ECMAScript, la conversión de tipos es muy simple.

1. Convertir a cadena

Los tres tipos primitivos Boolean, Number y String tienen métodos toString(), que pueden convertir sus valores en cadenas. Por ejemplo, el siguiente código puede ejecutarse normalmente en Qt:

var name = "Zhang San Feng"
console.log(name.toString())
console.log(true.toString())
var visible = false
console.log(visible.toString())
var integer = 3.14159
console.log(integer.toString())

El método toString() del tipo Número también se puede convertir por base, por ejemplo:

var integer = 13
console.log (integer.toString(16)) // 输出： D

Si no especifica la base numérica, toString() generará una salida en decimal sin importar en qué forma se declaró originalmente el tipo de Número.

2. Convertir a Número

parselnt() y parseFloat() pueden convertir valores originales no numéricos en números, el primero convierte el valor en un número entero y el segundo convierte el valor en un número de coma flotante. Estos dos métodos solo se pueden usar para el tipo String, si los llama para otros tipos, el valor de retorno será extraño NaN.

parselnt() y parseFloat() escanearán la cadena hasta que se encuentre el primer carácter no numérico y devolverán el resultado de la conversión. Por ejemplo, parselnt("2014") devolverá 2014. Para parseFloat(), el primer punto decimal se considera un carácter válido, mientras que parselnt() no.

Aquí hay unos ejemplos:

var numl = parselnt ("2014 年") // 输出：2014
var num2 = parselnt ("OxC") // 输出：12
var num3 = parselnt ("3.14") // 输出：3
var num4 = parselnt ("green") // 输出：NaN_
var num5 = parseFloat ("3.14159") // 输出：3.14159
var num7 = parseFloat ("Am I Float") // 输出：NaN

parselnt() también admite patrones base, aquí hay algunos ejemplos:

var numl = parselnt ("AK47", 16) // 输出：10
var num2 = parselnt ("AK47", 10) // 输出：NaN
var num3 = parselnt ("010", 8) // 输出：8
var nun4 = parselnt ("010", 10) // 输出：10

Cabe señalar que la cadena que representa el número de punto flotante debe expresarse en formato decimal, como parseFloat("OxFE"), devolviendo NaN.

3. Conversión de tipo obligatoria

Si es un programador de C/C++, debe tener una relación de amor y odio con los moldes. ECMAScript también admite conversión de tipo obligatoria, hay tres conversiones:

Booleano (valor), convertir valor a tipo booleano.
Número (valor), convierte el valor en un número (entero o coma flotante).
Cadena (valor), convierte el valor en una cadena.

Cinco, función

Las funciones en ECMAScript son bloques de código reutilizables y con nombre. Además, ECMAScript no admite la sobrecarga de funciones.

1. Sintaxis de la función

La sintaxis de la función es la siguiente:

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

función es una palabra clave que debe usarse al definir una función. functionName se puede elegir arbitrariamente, siempre que se ajuste a las reglas de nomenclatura de variables. arg1 a argN son los parámetros de la función, por supuesto no puede haber parámetros. Dentro de las llaves hay un bloque de código a ejecutar.

Ejemplo de una función sin parámetros:

function quitApp(){
	Qt .quit ();
}

Ejemplo de una función con parámetros:

function showError(msg){
	console.log("error - ", msg);
}

function travel(country, city){
	console.log("Welcome to ", city, " , ", country);
}

Cuando usamos parámetros de funciones, los parámetros son como declaraciones de variables sin el operador var. Esto contrasta con C++, donde se deben escribir los parámetros de función.

2. El valor de retorno de la función

Las funciones en ECMAScript tienen un valor de retorno por defecto, incluso si no usas explícitamente la declaración de retorno, devolverá indefinido. Si desea devolver el resultado de la operación de una función al lugar donde se llamó, puede utilizar la declaración de devolución. Aquí hay un ejemplo simple:

function add(numberl, number2){
	var result = number1 + number2;
	console.log(number1, "+" ,number2, result);
	return result;
}

Puede llamar a la función add() de esta manera: var ret = add(100, 34);.

6. Operadores

Los operadores de ECMAScript son similares a los de C++, Java y otros lenguajes, y el contenido específico no se repetirá aquí. Aquí sólo se resaltan los operadores de palabras clave . void, typeof, instanceof, new, delete Estos son operadores de palabras clave.

El operador void es especial, se coloca antes de una expresión, descarta el valor de la expresión y devuelve indefinido.
Como se mencionó anteriormente, typeof devuelve el tipo original para un valor primitivo y devuelve el objeto para un valor de referencia. Esto hace que no pueda determinar con precisión el tipo de referencia de un objeto, por lo que ECMAScript introduce el operador instanceof.
instanceof se usa para probar el tipo real de un objeto, debe especificar explícitamente el tipo para probar. Por ejemplo:
var str = new String ("hola mundo"); console.log (str instancia de String); // 输出：verdadero
El operador new se usa para crear un objeto, que se ha usado muchas veces antes, así que no lo repetiré aquí. El operador de eliminación es bastante especial.En QML, generalmente solo puede eliminar las propiedades definidas por usted en un objeto, pero la mayoría de las propiedades centrales definidas por el marco no pueden ser eliminadas por usted. Cuando llamamos a delete en ECMAScript, eliminamos la referencia del objeto la mayor parte del tiempo, para que alguien no siga haciendo referencia a un objeto y se salga con la suya.

Siete, usa la consola

La consola proporciona funciones como la salida de información de registro, aserciones, temporizadores, contadores y análisis de rendimiento. Aquí solo presentamos las primeras tres funciones que usamos con frecuencia.

1. Información de registro de salida

El objeto de consola proporciona varios métodos para imprimir información de depuración:

consola.log();
consola.depuración();
consola.info(); consola.advertencia();
consola.error();

2. Afirmaciones

console.assert() proporciona una función de aserción, acepta una expresión, cuando el valor de la expresión es falso, generará información de depuración e imprimirá la línea donde se encuentra el QML. Por ejemplo: console.assert (falso).

Si pasa argumentos adicionales a console.assert(), los enviará a la consola. Ejemplo:

var years = 0;

for (; years < 18; years++){
	console.log("I\'m minor"); 
    continue;
	console.log ("You shoult not see me"};
}

console.assert(years < 18, years);

La declaración de afirmación anterior generará la siguiente información:

18
onCompleted (file:///F:/projects/qtquick/qmls/show_type.qml:187)

Cabe señalar que en QML, al usar console.assert(), si la aserción falla, el programa no se cerrará.

3. Temporizador

La consola proporciona una función de temporizador, lo que nos resulta conveniente para medir el consumo de tiempo de algunos códigos.

console.time(tag) Inicie el temporizador, se requiere la etiqueta de tipo cadena. console.timeEnd(tag) Detiene el temporizador y muestra la información que requiere mucho tiempo correspondiente a una determinada etiqueta en la consola. se requiere etiqueta. Aquí hay un ejemplo simple:

console.time("regexp");

var str = "We are dogs;\nYour dogs;\nWe want meat.\nPlease.";
var lines = str.match(/^We.*/mg);
console.log(lines.length);
console.log(lines);
console.timeEnd("regexp");

// 输出：regexp: 7ms

El artículo se transfiere desde el jardín del blog (fengMisaka): [QML Quick Start] QML Grammar - Basics