Significado da Função Javascript

Front-end JavaScript
#1

Gostaria de saber como funciona a função abaixo que extrai determinado parâmetro do url do html, porém gostaria de uma explicação das variáveis e termos dentro desta função.

Se puderem me ajudar eu agradeceria

Segue descrição:

URL: http://127.0.0.1:9090/portal.cgi/PP_FILE_STORE/Public/HYBRIDReport.html?reportid=58cef1dcc40e004b0000005e

Função:

function getUrlVars() {
	var vars = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
            function(m,key,value) {
     	    vars[key] = value;
          	});
       return vars;
}
#2

function getUrlVars() { declaração da função
var vars = {}; declaração da variável vars como um objeto.
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { aqui tem algumas coisas concatenadas.
Da esquerda para a direita (não que seja a ordem de execução)
Declara-se a variável parts.
Obtém-se o conteúdo da url (window.location.href)
Utiliza a regex para quebrar o que vem após o '?" ou “&” da url (ou seja, os parâmetros passados) e transforma-os em um vetor, como chave e valor
vars[key] = value; preenche o objeto vars com a combinação chave/valor obtida a partir dos parâmetros da url
});finaliza a função interna
return vars; retorna o objeto vars
} finaliza a função

#3

Obrigado Luis pelas explicações!
Porém ainda estou em dúvida sobre o argumento m na função. O que ele faria nesse contexto…??

#4

O argumento m simplesmente retorna o match, ou seja, a porção integral da string que foi encontrada pela expressão regular fornecida. Neste contexto, retorna ?reportid=58cef1dcc40e004b0000005e, mas como você está interessado apenas nos parâmetros da url (neste caso, a chave reportid e o valor 58cef1dcc40e004b0000005e), o argumento é ignorado pela função.

Você pode ler mais sobre a função replace na documentação da Mozilla, sempre um bom recurso para entender melhor o javascript!

2 curtidas
#5

Ok!

Mas como o sistema sabe que o resultado da regex vai compor um objeto com propriedade…?

Quando coloco vars[key] = value ele já leva em consideração que o grupo 1 derivado da regex é a propriedade e o grupo 2 será seu valor…??

Ainda não ficou muito claro pra mim…
Desculpe.

Obrigado.

#6

Ele não sabe. A construção da função interna é baseada na possibilidade. Caso saia fora do esperado, lança-se um erro.

#7

Como o Luis disse, o sistema não sabe. Eu não sou expert em regex, mas basicamente a expressão regular dessa função vai retornar todo o(s) texto(s) depois dos caracteres ‘?’ ou ‘&’, separados em duas “partes”, uma antes e uma depois do sinal ‘=’. É assim que se espera que uma url com parâmetros seja construida, e se uma url correta for alimentada à função, retornará os valores corretos.

Um site como regex101 pode te ajudar a visualizar isso melhor. Coloca a regex e a sua url nos campos indicados e dá uma olhada no painel da direita, ele te explica passo a passo como o match é feito. Experimenta incluir um novo parâmetro ao final da url, como &teste=123, e você vai ver que a expressão retorna os valores corretos, dois parâmetros e seus respectivos valores. Agora, se você adicionar o novo parâmetro no inicio da url, ou em algum outro lugar não esperado, nada garante que a função retorne corretamente a lista de propriedades e valores respectivos.

1 curtida
#8

Além do que o @pedrosbmartins disse, tenha em mente que o javascript é uma linguagem poderosíssima e, como diria o tio Ben, “com grandes poderes, vêm grandes responsabilidades”.
Assim sendo, você consegue fazer coisas incríveis e, ao mesmo tempo, pode cometer atrocidades horríveis com isso.

1 curtida