HTML5 Geçmiş API'sını (Pushstate?) Kullanmak için iyi bir öğretici [kapalı]

AJAX yüklü içerik ile derin bağlantı sorunlarını çözmek için HTML5 Geçmiş API kullanarak arıyorum, ama yerden kurtulmak için mücadele ediyorum. İyi kaynakları bilen var mı?

Bu linkler JS açık olmayabilir gönderilen gönderilmesi olasılığı izin vermek için harika bir yol gibi görünüyor bu kullanmak istiyorum. JS'li bir kişi, olmayan bir kişiye bir bağlantı gönderdiğinde birçok çözüm başarısız olur.

İlk araştırmam JS içindeki bir Geçmiş API'sına ve pushState yöntemine işaret ediyor gibi görünüyor.

http://html5demos.com/history

Harika bir eğitim için bu işleve ilişkin Mozilla Geliştirici Ağı sayfası tek ihtiyacınız olan şey: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Ne yazık ki, HTML5 Geçmişi API'sı tüm HTML5 tarayıcılarında farklı şekilde uygulanır (tutarsız ve buggy yapar) ve HTML4 tarayıcıları için herhangi bir geri dönüşü yoktur. Neyse ki, History.js HTML5 tarayıcıları için çapraz uyumluluk sağlar (tüm HTML5 tarayıcılarının beklendiği gibi çalışmasını sağlar) ve isteğe bağlı olarak HTML4 tarayıcıları için karma veriler sağlar (veriler, başlıklar, pushState ve replaceState işlevleri için sürekli destek dahil).

History.js hakkında daha fazla bilgiyi buradan edinebilirsiniz: https://github.com/browserstate/history.js

Hashbangs VS Hashes VS HTML5 Geçmişi API'si hakkında bir makale için buraya bakın: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

'HTML 5'e Dalış' dan çok faydalandım. Açıklama ve demo daha kolaydır. Tarih bölümü - http://diveintohtml5.info/history.html ve tarih demosu - http://diveintohtml5.info/examples/history/fer.html

Bir kullanıcı derin bir bağlantıyı kopyalar veya yer işareti eklerse ve tekrar ziyaret ederse HTML5 pushstate'i kullanırken aklınızda bulundurun, o zaman 404 olacak doğrudan bir sunucu vuruşu olacaktır, bu yüzden buna hazır olmanız gerekir ve bir pushstate js kütüphanesi bile yardımcı olmaz sen. En kolay çözüm, Nginx veya Apache sunucunuza şu şekilde bir yeniden yazma kuralı eklemektir:

Apache (eğer kullanıyorsanız hayaletinizde):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

nginx

rewrite ^(.+)$ /index.html last;

HTML5 geçmişi Spec ilginç.

history.pushState()popstatekendi başına bir etkinlik göndermez veya yeni bir sayfa yüklemez. Sadece devleti tarihe itmek içindi. Bu, tek sayfa uygulamaları için bir "geri al" özelliğidir. Bir popstateolayı manuel olarak göndermeniz veya history.go()yeni duruma gitmek için kullanmanız gerekir. Fikir şu ki, bir yönlendirici popstateolayları dinleyebilir ve sizin için navigasyonu yapabilir.

Dikkat edilmesi gereken bazı noktalar:

• history.pushState()ve olayları history.replaceState()göndermeyin popstate.
• history.back(),, history.forward()ve tarayıcının geri ve ileri düğmeleri gönderme popstateolayları yapar.
• history.go()ve history.go(0)tam sayfa yeniden yükleme yapın ve popstateetkinlik göndermeyin .
• history.go(-1)(1 sayfa geri) ve history.go(1)(1 sayfa ileri) dağıtım popstateolayları yapar.

Yeni bir durumu zorlamak ve bir popstate olayı göndermek için geçmiş API'sını böyle kullanabilirsiniz.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Ardından popstateyönlendirici ile olayları dinleyin .

Davis.js'yi deneyebilirsiniz , mevcut olduğunda pushState'i kullanarak JavaScript'inize yönlendirmenizi sağlar ve JavaScript olmadan sunucu tarafı kodunuzun istekleri işlemesine izin verir.

İşte Ray Bates'ten Ryan Bates tarafından konuyla ilgili harika bir ekran görüntüsü. Sonunda history.pushState yöntemi yoksa ajax işlevselliğini devre dışı bırakır:

http://railscasts.com/episodes/246-ajax-history-state

Bu jQuery eklentisine bir göz atmak isteyebilirsiniz. Sitelerinde çok sayıda örnek var. http://www.asual.com/jquery/address/

History.js'nin üzerine StateRouter.js adında çok basit bir yönlendirici soyutlaması yazdım . Gelişimin çok erken aşamalarında, ancak yazdığım tek sayfalık bir uygulamada yönlendirme çözümü olarak kullanıyorum. Sizin gibi, History.js'yi kavramak çok zor buldum, özellikle de JavaScript için oldukça yeni olduğum için, üst düzey bir yönlendirme soyutlamasına ihtiyacınız olduğunu (veya olması gerektiğini) anlayana kadar, düşük seviyeyi çözdüğü için sorun.

Bu basit örnek kod nasıl kullanıldığını göstermelidir:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

İşte kullanımını göstermek için uydurduğum küçük bir keman .

jQuery mevcutsa, jQuery BBQ kullanabilirsiniz