Aqui ele criou uma especie de classe, na verdade um objeto com funções. Assim ele pode centralizar o que o projeto
pode fazer e utilizar em qualquer outro lugar.
var projeto = {
methods: {
funcao1: function() {
},
funcao2: function() {
},
init: function() {
this.funcao1(), this.funcao2()
},
init_ajax: function() {}
},
ajax: function() {
return this.methods.init_ajax()
},
mounted: function() {
return this.methods.init()
}
};
Isso $(document)
pega o documento propriamente dito, o que for lido pelo navegador. O que ele faz com o .ready()
e ajaxStop()
é pegar os eventos disparados pelo document nos momentos que o documento é lido e alguma chamada ajax é finalizada, respectivamente.
Com isso, ele definiu metodos que devem ser executados nesses momentos.
Quando o documento for lido (pagina carregada) executar projeto.mounted()
$(document).ready(function() {
projeto.mounted()
})
Quando o carregamento ajax parar, execute projeto.ajax()
$(document).ajaxStop(function() {
projeto.ajax()
});
Perceba que projeto
é a variável que possui os metodos ajax
e mounted
.
Você provavelmente já deve ter utilizado algo como element.on('click')
ou element.click()
para capturar os cliques de botões ou algo assim, o processo aqui é o mesmo, porém, ao invés de captura o click, você esta capturando
outras coisas. Poderia ser um hover, um keyup, etc.
Vou listar alguns links aqui que vão ajudar na compreensão geral, sua duvida e boa e vai ajudar bastante gente.
- Trabalhando com eventos em JavaScript
- Organizando seu código JavaScript
- Sobre o document.ready