Recentemente, estou aprendendo backbone. Ao aprender a entender a espinha dorsal, você deve primeiro entender o spa. Ao entender o SPA, você deve primeiro entender como os aplicativos de uma página pode alterar o URL sem atualizar a página.
Comparado aos saltos para páginas diferentes, pode -se dizer que o Ajax melhorou bastante a experiência de navegação do usuário. É muito agradável não ver a tela branca entre a comutação de página. No entanto, muitos aplicativos anteriores do AJAX não suportaram o movimento avançado e para trás do navegador, o que fez com que os usuários retornassem imediatamente à sua posição original, não importa onde eles navegassem no site, e os usuários não puderam mudar o histórico de navegação através do botão de movimento para frente e para trás do navegador.
Para o primeiro problema, é muito fácil resolver. Basta usar cookies ou localStorage para registrar o status do aplicativo. Leia esse status ao atualizar a página e envie a solicitação AJAX correspondente para alterar a página. Mas o segundo problema é muito problemático, vamos falar sobre a solução dos navegadores modernos primeiro.
Solução HTML5
Para entender como o HTML5 pode avançar e atrasar, você deve primeiro entender os objetos de história e os objetos de localização.
objeto de história
Propriedades do objeto de história
1. comprimento: retorna o número de URLs na lista de histórico do navegador. Para cada página que o usuário visita na tag atual, esse número é adicionado por 1. Por razões de privacidade, o conteúdo específico da URL não é visível.
2.State: Objetos relacionados ao URL atual só podem ser adicionados ou modificados através do PushState e Replacestate. Podemos usá -lo para armazenar informações relacionadas aos URLs.
Método do objeto de história
1.history.back ()
Este método não possui parâmetros. Após o acionamento, ele retornará à página anterior navegada, o que equivale a clicar no botão traseiro do navegador.
2.History.forward ()
Este método não possui parâmetros. Após o acionamento, ele retornará à página que você navega antes de navegar, o que é equivalente a clicar no botão avançado do navegador.
3.history.go (número)
Este método aceita um parâmetro variável de modelagem, history.go (-1) é equivalente a apoiar uma página, o histórico.GO (1) é equivalente a avançar em uma página, o histórico.GO (0) atualizará a página atual.
4.history.pushstate (estado, título, URL)
A chave para alterar o URL e não atualizar a página é. Este método alterará o local.Href da página atual e modificará o objeto History.State. Após a execução, o histórico. O comprimento será aumentado em 1. Este método aceita três parâmetros.
1.State: o objeto relacionado ao URL atual.
2.Título: Título da página, mas todos os navegadores o ignoram. Para alterar o título, você ainda precisa usar o Document.Title.
3.URL: Um URL com o mesmo domínio que a página atual, Location.href se tornará esse valor.
5.History.Replacestate (estado, título, URL)
Este método é o mesmo que acima, mas não mudará a história.
Observe que o terceiro parâmetro PushState e Replacestate não podem dominar cruzamentos e não acionará o evento PopState do navegador e o evento ONHASHCHANGE (testado no Chrome33).
objeto de localização
Além de clicar no botão avançado/traseiro e no evento histórico, você também pode alterar o URL através do método de localização e modificar as propriedades do local:
Propriedades do objeto de localização (leia e escreva):
1.Host: Nome do domínio + número da porta
2.HostName: nome de domínio
3.Port: número da porta
4. Protocolo: Protocolo
5.HREF: Caminho completo
6. Origin: protocolo + nome de domínio + porta
7.Hash: URL (hash) começando com o sinal de libra (#)
8.PathName: Caminho do documento + Nome do documento
9.search :(?) O seguinte conteúdo
Você pode alcançar o objetivo de livre de atualização, alterando a localização.Href ou Location.hash.
Métodos do objeto de localização:
1.Assign: altere o valor do URL e adicione o URL atual ao histórico. O comprimento aumentará em 1. Local.ASSIG ('#' + X) alterará o URL, mas não atualizará a página.
2.Reload: Atualize a página.
3.plicar: altere o valor do URL, mas a história. O comprimento permanece inalterado. O mesmo método de uso atribuir.
Evento PopState
Quando o URL altera, por exemplo, se o usuário clicar no botão avançado/traseiro, history.go (n) (n não é igual a 0), local.hash = x (x não é igual ao local atual.hash) acionará este evento. Você pode usá -lo para monitorar o URL para implementar várias funções.
A cópia do código é a seguinte:
window.onpopstate = function () {
// do sth
}
Evento OnHashChange
A alteração do valor do hash acionará o evento PopState e acionar o evento PopState não necessariamente acionará o evento ONHASHCHANGE. Após o teste:
1. As mudanças de hash, mas a localização.PathName permanece inalterada, desencadeará o evento ONHASHCHANGE, como History.pushstate (",, '#ABC');
2. Se hash e localização.PathName mudar juntos, ele não será acionado, como o histórico.pushstate (",", 'a#abc');
Como escrever navegadores antigos
Os navegadores antigos não suportam PushState e Replacestate; portanto, a maneira de monitorar as alterações na URL através do PopState (na verdade, ele não suporta esse método). Em seguida, você só pode alterar o conteúdo por trás do URL# para não obter atualização, mas eles não suportam o ONHASHCHANGE, por isso é indiferente às alterações na URL (exceto que a página rolará para a posição de identificação correspondente da página). Em seguida, você só pode usar o movimento final: enquete e setInterval para ouvir o valor do URL. Assim:
A cópia do código é a seguinte:
var prevhash = window.location.hash;
var den -retorno = function () {...}
window.setInterval (function () {
if (window.location.hash! = prehash) {
prevhash = window.location.hash;
retorno de chamada (prevhash);
}
}, 100);
Claro, este escrito é muito frustrante. Se você não considerar clicar na tag A com ID na página para alterar o hash, poderá usar o padrão de design para implementar elegantemente o URL de monitoramento. Por exemplo, o padrão de observador clássico usa uma classe para implementar a função de alterar o hash e, em seguida, todas as classes (observadores) que desejam ouvir as alterações na URL para se inscrever nesta classe (observador).
A cópia do código é a seguinte:
// Alterar a classe URL
função urlchanger () {
var _This = this;
this.observers = [];
// Adicione um observador
this.addobserver = function (obj) {...}
// exclua o observador
this.deleteObServer = function (obj) {...}
// notifica observadores
this._notifyObServers = function () {
var comprimento = _This.observers.length;
console.log (comprimento)
for (var i = 0; i <comprimento; i ++) {
_This.observers [i] .Update ();
}
}
// Altere o URL
this.changeurl = função (hash) {
window.Location.hash = hash;
_This._NotifyObServers ();
}
}
// Classe de escuta
função OneOfobServers () {
var _This = this;
this.update = function () {...}
}
//concluir
var o1 = new urlchanger ();
var o2 = novo OneOfobServers ();
O1.Addobserver (O2);
O1.Changeurl ('Fun/Arg1/Arg2/');
// o2 tem sth ...