Prefácio
O roteamento front-end é suportado em muitas estruturas de biblioteca JS de código aberto, como AngularJS, Backbone, ReactJs, etc. O princípio do roteamento front-end é o mesmo que o roteamento de back-end. Ele permite todas as interações e as exibe em uma página para executar para reduzir as solicitações do servidor e melhorar a experiência do cliente. Mais e mais sites, especialmente aplicativos da Web, usam o roteamento front-end.
Html
Há um menu de navegação na página e um resultado div#é usado para exibir os resultados. Ao clicar no menu de navegação, diferentes conteúdos de resultado serão exibidos no #Result.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/product"> produto </a> </li> <li> <a href = "#/server"> serviço </a> </li> </ul> <div id = "Result"> </div>
JavaScript
Vamos falar sobre o breve princípio da implementação de roteamento front-end. Tomando o formulário de hash (também pode ser tratado usando a API do History) como exemplo, quando o hash das alterações da URL, o retorno de chamada registrado da hashchange é acionado e diferentes operações são executadas no retorno de chamada e os conteúdos diferentes são exibidos.
function roteter () {this.Routes = {}; this.cururl = ''; this.Route = function (caminho, retorno de chamada) {this.routes [path] = retorno de chamada || função(){}; }; this.Refresh = function () {this.cururl = local.hash.slice (1) || '/'; this.Routes [this.cururl] (); }; this.init = function () {window.addeventListener ('load', this.refresh.bind (this), false); window.addeventListener ('hashchange', this.Refresh.bind (this), false); }}No código acima, a implementação do objeto do roteador do sistema de roteamento fornece principalmente três métodos:
Init ouve o evento de atualização de hash de URL do navegador.
A rota armazena os retornos de chamada durante as atualizações de rota para as rotas de matriz de retorno de chamada, e a função de retorno de chamada será responsável por atualizar a página.
A atualização executa a função de retorno de chamada correspondente ao URL atual e atualiza a página.
O método de chamada do roteador é o seguinte:
Clique para acionar a alteração de hash do URL e atualize o conteúdo de acordo. Após a execução, você descobrirá que toda vez que clicar no menu, a cor e o conteúdo do plano de fundo serão alterados no #Result.
var r = new Router (); r.init (); var res = document.getElementById ('resultado'); R.route ('/', function () {res.style.background = 'blue'; res.innerhtml = 'Esta é a página inicial';}); R.route ('/produto', function () {res.style.background = 'Orange'; res.innerhtml = 'Esta é a página do produto';}); R.route ('/server', function () {res.style.background = 'Black'; res.innerhtml = 'Esta é a página de serviço';});Resumir
O acima é uma implementação simples do roteamento front-end. Nos aplicativos reais, o hash deve ser processado regularmente para atender à aplicação de um grande número de URLs e, ao mesmo tempo, são adicionadas as funções do conteúdo de página solicitando assíncrono assíncrono de Ajax. Embora este exemplo seja muito simples, de fato, a base de muitos sistemas de roteamento é baseada nisso, e outros sistemas de roteamento fornecem principalmente suporte e otimização dos mecanismos da estrutura que eles usam. Ok, o conteúdo deste artigo está aqui. Espero que isso ajude você a estudar ou trabalhar. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.