2 numara bir geliştirici olarak sizin için "daha kolay" olsa da, yalnızca arama motoru taraması sağlar. Ve evet, Google farklı içerik sunduğunuzu anlarsa, cezalandırılabilirsiniz (bu konuda uzman değilim, ancak bunun olduğunu duydum).
Hem SEO hem de erişilebilirlik (yalnızca engelli kişiler için değil, aynı zamanda mobil cihazlar, dokunmatik ekranlı cihazlar ve diğer standart dışı bilgi işlem / internet etkin platformlar aracılığıyla erişilebilirlik) benzer bir temel felsefeye sahiptir: "erişilebilir" olan (yani, tüm bu farklı tarayıcılara erişilmesi, görüntülenmesi, okunması, işlenmesi veya başka şekilde kullanılması. Bir ekran okuyucu, bir arama motoru tarayıcısı veya JavaScript'in etkin olduğu bir kullanıcı, sitenizin temel işlevlerini sorunsuz bir şekilde kullanabilir / dizine ekleyebilir / anlayabilmelidir.
pushStatebenim deneyimime göre bu yüke bir şey eklemiyor. Sadece sonradan düşünülen şeyleri ve "zamanımız varsa" web geliştirmenin ön saflarına taşır.
1. seçenekte açıkladığınız şey genellikle gitmenin en iyi yoludur - ancak diğer erişilebilirlik ve SEO sorunları gibi, pushState JavaScript ağırlıklı bir uygulamada yapmak önceden planlama gerektirir, aksi takdirde önemli bir yük haline gelir. Başlangıçtan itibaren sayfaya ve uygulama mimarisine dahil edilmelidir - güçlendirme zahmetlidir ve gerekenden daha fazla tekrarlamaya neden olur.
İle çalışıyorum pushStateSon zamanlarda birkaç farklı uygulama için ve SEO ve iyi bir yaklaşım olduğunu düşündüğüm şeyi buldum. Temelde 1 numaralı öğenizi takip eder, ancak html / şablonların kopyalanmamasını sağlar.
Bilgilerin çoğu şu iki blog gönderisinde bulunabilir:
http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/
ve
http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/
İşin özü, ERB veya HAML şablonlarını (Ruby on Rails, Sinatra, vb. Çalıştıran) sunucu tarafı renderım için ve Backbone'un kullanabileceği istemci tarafı şablonları ile Jasmine JavaScript spesifikasyonlarım oluşturmak için kullanıyorum. Bu, sunucu tarafı ile istemci tarafı arasındaki işaretlemenin kopyalanmasını engeller.
Buradan, JavaScript'inizin sunucu tarafından oluşturulan HTML ile çalışmasını sağlamak için birkaç ek adım atmanız gerekir - gerçek aşamalı geliştirme; teslim edilen anlamsal biçimlendirmeyi almak ve onu JavaScript ile geliştirmek.
Örneğin, ile bir resim galerisi uygulaması oluşturuyorum pushState. /images/1Sunucudan talep ederseniz , tüm resim galerisini sunucuda işler ve tüm HTML, CSS ve JavaScript'i tarayıcınıza gönderir. JavaScript'i devre dışı bıraktıysanız, mükemmel bir şekilde çalışacaktır. Yaptığınız her işlem, sunucudan farklı bir URL talep edecek ve sunucu, tarayıcınız için tüm işaretlemeyi işleyecektir. JavaScript'i etkinleştirdiyseniz, JavaScript zaten oluşturulmuş HTML'yi sunucu tarafından oluşturulan birkaç değişkenle birlikte alır ve buradan devralır.
İşte bir örnek:
<form id="foo">
Name: <input id="name"><button id="say">Say My Name!</button>
</form>
Sunucu bunu oluşturduktan sonra, JavaScript onu alır (bu örnekte bir Backbone.js görünümü kullanarak)
FooView = Backbone.View.extend({
events: {
"change #name": "setName",
"click #say": "sayName"
},
setName: function(e){
var name = $(e.currentTarget).val();
this.model.set({name: name});
},
sayName: function(e){
e.preventDefault();
var name = this.model.get("name");
alert("Hello " + name);
},
render: function(){
// do some rendering here, for when this is just running JavaScript
}
});
$(function(){
var model = new MyModel();
var view = new FooView({
model: model,
el: $("#foo")
});
});
Bu çok basit bir örnek ama bence asıl noktayı anlıyor.
Sayfa yüklendikten sonra görünümü başlattığımda, sunucu tarafından oluşturulan formun mevcut içeriğini görünüm eliçin olduğu gibi görünüm örneğine sağlıyorum. Ben am değil işlemek arayarak veya görünümü bir oluşturmak zorunda elbirinci görünümü yüklendiğinde, benim için. Görünüm açılıp çalıştıktan ve sayfanın tamamı JavaScript olduktan sonra kullanabileceğim bir oluşturma yöntemim var. Bu, gerekirse görünümü daha sonra yeniden oluşturmama izin veriyor.
JavaScript etkinken "Adımı Söyle" düğmesine tıklamak bir uyarı kutusuna neden olacaktır. JavaScript olmasaydı, sunucuya geri gönderirdi ve sunucu, adı bir yerde bir html öğesine dönüştürebilirdi.
Düzenle
Eklenmesi gereken bir listenin olduğu daha karmaşık bir örnek düşünün (bunun altındaki yorumlardan)
Bir <ul>etikette bir kullanıcı listeniz olduğunu varsayalım. Bu liste, tarayıcı bir istekte bulunduğunda sunucu tarafından oluşturuldu ve sonuç şuna benzer:
<ul id="user-list">
<li data-id="1">Bob
<li data-id="2">Mary
<li data-id="3">Frank
<li data-id="4">Jane
</ul>
Şimdi bu listeden geçmeniz ve her <li>öğeye bir Omurga görünümü ve model eklemeniz gerekiyor . data-idÖzniteliğin kullanımıyla, her bir etiketin geldiği modeli kolayca bulabilirsiniz. Ardından, kendisini bu html'ye eklemek için yeterince akıllı bir koleksiyon görünümüne ve öğe görünümüne ihtiyacınız olacak.
UserListView = Backbone.View.extend({
attach: function(){
this.el = $("#user-list");
this.$("li").each(function(index){
var userEl = $(this);
var id = userEl.attr("data-id");
var user = this.collection.get(id);
new UserView({
model: user,
el: userEl
});
});
}
});
UserView = Backbone.View.extend({
initialize: function(){
this.model.bind("change:name", this.updateName, this);
},
updateName: function(model, val){
this.el.text(val);
}
});
var userData = {...};
var userList = new UserCollection(userData);
var userListView = new UserListView({collection: userList});
userListView.attach();
Bu örnekte, UserListViewtüm <li>etiketlerde döngü oluşturacak ve her biri için doğru modele sahip bir görünüm nesnesi ekleyecektir. modelin isim değişikliği olayı için bir olay işleyicisi kurar ve bir değişiklik meydana geldiğinde öğenin görüntülenen metnini günceller.
Sunucunun oluşturduğu html'yi alıp JavaScript'imin onu devralması ve çalıştırması için bu tür bir süreç, SEO, Erişilebilirlik ve pushStatedestek için işleri ilerletmenin harika bir yoludur .
Umarım yardımcı olur.