Eu fiz o desenvolvimento de back-end, especialmente quando usei o Django ou Express, devo estar familiarizado com as funções de roteamento no lado do servidor. O WordPress, um sistema de blog popular em países estrangeiros, também é um caso de implementação de roteamento muito clássico. Então, o que exatamente é a rota? Vamos falar brevemente sobre isso através do WordPress.
Aqueles que entendem as regras de reescrita do WordPress sabem que, de fato, qualquer acesso de URL é baseado no index.php no diretório de instalação do WordPress (exceto para acesso a arquivos já existe no servidor). Será óbvio quando o link fixo do WordPress estiver na configuração do modo. Por exemplo, o URL do artigo é index.php? P = ID, e o URL da página de classificação é index.php? Cat = id.
Aqui, o index.php atua como uma função do roteador, consulte a seguinte figura:
Em outras palavras, não importa qual endereço você esteja visitando, todas as solicitações serão redirecionadas para index.php. O programa determinará qual tipo de página você precisa com base nas características do URL de acesso e, em seguida, fará uma consulta ao banco de dados e, finalmente, retornará o conteúdo HTML ao navegador.
O que mencionamos acima é o roteamento de back-end da web, então qual é o roteamento front-end? De fato, a tecnologia de roteamento front-end é amplamente usada agora, e muitas bibliotecas JS de código aberto suportam o roteamento front-end, como AngularJS, Ember.js, Director.js, 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.
Diretor.js é o registro/analisador mais puro de rota. Ele usa o símbolo "#" para organizar diferentes caminhos de URL sem atualizar a página e combinar diferentes métodos de retorno de chamada de acordo com diferentes caminhos de URL. O diretor.js não pode ser aplicado apenas ao cliente, mas também em segundo plano usando o Node.js, mas também pode implementar a função de roteamento de back -end mencionada acima. Vamos dar uma olhada nos seguintes exemplos sobre a implementação de roteamento front-end
Você precisa projetar um aplicativo de desktop da web semelhante ao Web QQ. Existem muitos ícones pequenos na área de trabalho e cada ícone pequeno é um aplicativo funcional, semelhante a uma área de trabalho de computador. Há um botão Baidu News na área de trabalho. Clique nele para aparecer uma janela na página atual. Você pode ver o Baidu News e outro ícone. Clique nele para visualizar a hora atual. Aqui está um exemplo simples:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "https://rawgit.com/flatiron/director/master/build/drector.min.js"> </script> {largura: 100%; altura: 100%; fundo: #3d72b8} #baiduNews {width: 40px; altura: 40px; background: url ("./ du.png") no-reepat; display: block; margin: 50px;}} #twibo (width 40px; sem repetição; exibição: bloco; margem: 50px;} </style> </head> <body> <a href = "#/baiduNews" id = "BaiduNews"> </a> <a href = "#/time" id = "tweibo"> </a> <leever> // rota de defina =#/" "/BaiduNews": [ShowFrame, getbaiduNews]} // Inicialize a rota var roteador = roteador (rota) roteter.init (); // Defina a função de retorno de chamada que exibe a função de hora atual nowime () {var now = new Date (); var y = agora.getlyear (); var m = agora.getMonth ()+1; var d = agora.getDate (); var h = agora.gethours (); var mi = agora.getminutes (); var s = agora.getSeconds (); alerta ("horário atual/n"+y+"ano"+m+"mês"+d+"dia"+h+"tempo"+mi+"minuto"+s+"segundos"); } // Defina a função que exibe a função da estrutura do navegador showFrame () {var f = document.createElement ("div"); f.style.width = "985px"; f.style.Height = "500px"; f.style.position = "absoluto"; f.style.top = "50px"; f.style.left = "200px"; f.style.background = "White"; f.style.border = "2px sólido #ccc"; // Botão Fechar var Close = Document.CreateElement ("Span"); close.style.Position = "Absolute"; close.style.right = "5px"; close.style.cursor = "ponteiro"; close.style.marginright = "5px"; Close.OnClick = function () {document.body.removeChild (f); } close.innerhtml = "x"; // carrega o iframe fora do site var win = document.createElement ("iframe"); win.id = "myiframe"; win.frameborder = 0; win.style.width = "100%"; win.style.Height = "100%"; F.AppendChild (Close); F.AppendChild (Win); document.body.appendChild (f); } // Defina a função para carregar a página da web do Baidu News getBaidunew () {document.getElementById ("myiframe") .src = "http://news.baidu.com/"; } </script> </body> </html>A partir do código acima, podemos ver que o diretor.js usa "#" na página para roteamento e encaminhamento. O exemplo acima é apenas um exemplo muito simples. Diretor.js pode implementar funções mais complexas e enormes. Ele pode interagir com os dados do AJAX e do servidor e pode coexistir com outras bibliotecas de classe JS. É uma poderosa ferramenta de desenvolvimento de aplicativos da web.
Diretor.js tem algum impacto no SEO?
O diretor.js do cliente tem um impacto no SEO, porque todos os dados estão apenas em uma página, e alguns dados são armazenados de uma maneira que não é propícia a aranhas de mecanismo de pesquisa. Se você precisar ser amigável para SEO, isso significa que você precisa construir uma "página da web" em vez de um "aplicativo da web". Diretor.js não é recomendado.
Referência: Diretor.JS