4.6 KiB
Melhorar o Roteamento
Instruções
Agora que construiu um sistema de roteamento básico, é hora de aprimorá-lo com funcionalidades profissionais que melhoram a experiência do utilizador e fornecem melhores ferramentas para o programador. As aplicações do mundo real precisam de mais do que apenas mudar templates – requerem títulos de página dinâmicos, hooks de ciclo de vida e arquiteturas extensíveis.
Nesta tarefa, irá estender a sua implementação de roteamento com duas funcionalidades essenciais que são comuns em aplicações web de produção. Estas melhorias tornarão a sua app bancária mais refinada e fornecerão uma base para funcionalidades futuras.
A declaração das rotas contém atualmente apenas o ID do template a usar. Mas ao exibir uma nova página, às vezes é necessário um pouco mais. Vamos melhorar a nossa implementação de roteamento com duas funcionalidades adicionais:
Funcionalidade 1: Títulos de Página Dinâmicos
Objetivo: Atribuir títulos a cada template e atualizar o título da janela com este novo título quando o template mudar.
Por que isto é importante:
- Melhora a experiência do utilizador ao mostrar títulos descritivos na aba do navegador
- Aumenta a acessibilidade para leitores de ecrã e tecnologias assistivas
- Proporciona melhor contexto para bookmarks e histórico do navegador
- Segue as melhores práticas profissionais de desenvolvimento web
Abordagem de implementação:
- Estender o objeto routes para incluir informação de título para cada rota
- Modificar a função
updateRoute()para atualizardocument.titledinamicamente - Testar se os títulos mudam corretamente ao navegar entre ecrãs
Funcionalidade 2: Hooks de Ciclo de Vida da Rota
Objetivo: Adicionar uma opção para executar algum código depois da mudança do template. Queremos imprimir 'Dashboard is shown' no console do programador sempre que a página do dashboard for exibida.
Por que isto é importante:
- Permite a execução de lógica personalizada quando rotas específicas carregam
- Fornece hooks para analytics, logging ou código de inicialização
- Cria uma base para comportamentos de rota mais complexos
- Demonstra o padrão observer em desenvolvimento web
Abordagem de implementação:
- Adicionar uma propriedade opcional de função callback às configurações das rotas
- Executar a função callback (se existir) depois que a renderização do template terminar
- Garantir que a funcionalidade funciona para qualquer rota com callback definido
- Testar se a mensagem no console aparece quando visitar o dashboard
Rubrica
| Critério | Exemplar | Adequado | Precisa de Melhoria |
|---|---|---|---|
As duas funcionalidades estão implementadas e funcionam. A adição de título e código também funciona para uma nova rota adicionada na declaração routes. |
As duas funcionalidades funcionam, mas o comportamento está codificado estaticamente e não configurável através da declaração routes. Adicionar uma terceira rota com título e código não funciona ou funciona parcialmente. |
Uma das funcionalidades está em falta ou não funciona corretamente. |
Aviso Legal: Este documento foi traduzido recorrendo ao serviço de tradução automática Co-op Translator. Embora nos esforcemos pela precisão, por favor tenha em conta que as traduções automáticas podem conter erros ou imprecisões. O documento original, na sua língua nativa, deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.