ในขณะที่ # 2 อาจเป็น "ง่ายขึ้น" สำหรับคุณในฐานะนักพัฒนา แต่ให้เฉพาะการรวบรวมข้อมูลของเครื่องมือค้นหา และใช่ถ้า Google พบว่าการให้บริการเนื้อหาที่แตกต่างคุณอาจถูกลงโทษ (ฉันไม่ใช่ผู้เชี่ยวชาญในเรื่องนั้น แต่ฉันได้ยินมาว่ามันเกิดขึ้น)
ทั้ง SEO และการช่วยสำหรับการเข้าถึง (ไม่เพียง แต่สำหรับผู้พิการ แต่สำหรับการเข้าถึงผ่านอุปกรณ์มือถือ, อุปกรณ์หน้าจอสัมผัสและแพลตฟอร์มที่ไม่ได้มาตรฐาน / อินเทอร์เน็ตเปิดใช้งานอื่น ๆ ) ทั้งสองมีปรัชญาพื้นฐานที่คล้ายคลึงกัน: มาร์กอัป เข้าถึงเข้าถึงอ่านประมวลผลหรือใช้เป็นอย่างอื่น) กับเบราว์เซอร์อื่น ๆ เหล่านี้ โปรแกรมอ่านหน้าจอโปรแกรมสืบค้นของเครื่องมือค้นหาหรือผู้ใช้ที่เปิดใช้งาน JavaScript ควรจะสามารถใช้ / ดัชนี / เข้าใจการทำงานหลักของเว็บไซต์ของคุณได้โดยไม่มีปัญหา
pushStateไม่ได้เพิ่มภาระนี้ในประสบการณ์ของฉัน มันนำสิ่งที่เคยเป็นภายหลังและ "ถ้าเรามีเวลา" เพื่อระดับแนวหน้าของการพัฒนาเว็บ
สิ่งที่คุณอธิบายในตัวเลือก # 1 มักจะเป็นวิธีที่ดีที่สุด - แต่เช่นปัญหาการเข้าถึงและ SEO อื่น ๆ การทำสิ่งนี้ด้วยpushStateแอป JavaScript ที่หนักหน่วงต้องมีการวางแผนล่วงหน้าหรือจะกลายเป็นภาระที่สำคัญ ควรนำเข้าสู่หน้าและสถาปัตยกรรมแอปพลิเคชันจากจุดเริ่มต้นการติดตั้งใหม่จะทำให้เกิดความเจ็บปวดและจะทำให้เกิดการทำซ้ำเกินความจำเป็น
pushStateเมื่อเร็ว ๆ นี้ฉันได้ทำงานกับSEO และมีแอพพลิเคชั่นที่ต่างกันสองสามตัว โดยทั่วไปแล้วจะเป็นไปตามรายการ # 1 ของคุณ แต่บัญชีจะไม่ทำซ้ำ html / เทมเพลต
ข้อมูลส่วนใหญ่สามารถพบได้ในโพสต์บล็อกทั้งสองนี้:
http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/
และ
http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/
สิ่งสำคัญของมันคือฉันใช้เทมเพลต ERB หรือ HAML (ใช้ Ruby บน Rails, Sinatra เป็นต้น) สำหรับการสร้างภาพฝั่งเซิร์ฟเวอร์ของฉันและเพื่อสร้างเทมเพลตฝั่งไคลเอนต์ที่ Backbone สามารถใช้ได้เช่นเดียวกับรายละเอียด Jasmine JavaScript ของฉัน สิ่งนี้จะตัดการทำซ้ำของมาร์กอัพระหว่างฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์
จากตรงนั้นคุณต้องใช้ขั้นตอนเพิ่มเติมเพื่อให้ JavaScript ของคุณทำงานกับ HTML ที่แสดงผลโดยเซิร์ฟเวอร์ - การเพิ่มประสิทธิภาพแบบก้าวหน้าจริง รับมาร์กอัปความหมายที่ได้รับการส่งมอบและปรับปรุงด้วย JavaScript
pushStateยกตัวอย่างเช่นผมสร้างแอพลิเคชันที่มีแกลเลอรี่ภาพ หากคุณร้องขอ/images/1จากเซิร์ฟเวอร์มันจะแสดงแกลเลอรี่รูปภาพทั้งหมดบนเซิร์ฟเวอร์และส่ง HTML, CSS และ JavaScript ทั้งหมดไปยังเบราว์เซอร์ของคุณ หากคุณปิดใช้งาน JavaScript มันจะทำงานได้อย่างสมบูรณ์แบบ ทุกการกระทำที่คุณทำจะขอ URL ที่แตกต่างจากเซิร์ฟเวอร์และเซิร์ฟเวอร์จะแสดงมาร์กอัพทั้งหมดสำหรับเบราว์เซอร์ของคุณ หากคุณเปิดใช้งาน JavaScript แล้ว JavaScript จะรับ HTML ที่แสดงผลไปแล้วพร้อมกับตัวแปรที่สร้างโดยเซิร์ฟเวอร์และรับช่วงต่อจากนั้น
นี่คือตัวอย่าง:
<form id="foo">
Name: <input id="name"><button id="say">Say My Name!</button>
</form>
หลังจากเซิร์ฟเวอร์แสดงผลสิ่งนี้ JavaScript จะรับมัน (ใช้มุมมอง Backbone.js ในตัวอย่างนี้)
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")
});
});
นี่เป็นตัวอย่างที่ง่ายมาก แต่ฉันคิดว่ามันได้รับประเด็น
เมื่อฉันดูมุมมองทันทีหลังจากหน้าโหลดฉันจะให้เนื้อหาที่มีอยู่ของแบบฟอร์มที่แสดงผลโดยเซิร์ฟเวอร์ไปยังอินสแตนซ์มุมมองเป็นelมุมมอง ฉันไม่ได้เรียกเรนเดอร์หรือมีมุมมองที่สร้างelสำหรับฉันเมื่อโหลดมุมมองแรก ฉันมีวิธีการเรนเดอร์หลังจากที่มุมมองเริ่มทำงานและเพจนั้นเป็นจาวาสคริปต์ทั้งหมด ทำให้ฉันสามารถแสดงมุมมองใหม่ได้ในภายหลังถ้าต้องการ
การคลิกปุ่ม "พูดชื่อฉัน" ด้วยการเปิดใช้งาน JavaScript จะทำให้กล่องการแจ้งเตือน หากไม่มี JavaScript ก็จะโพสต์กลับไปที่เซิร์ฟเวอร์และเซิร์ฟเวอร์สามารถแสดงชื่อไปยังองค์ประกอบ html ที่ไหนสักแห่ง
แก้ไข
พิจารณาตัวอย่างที่ซับซ้อนมากขึ้นซึ่งคุณมีรายการที่จะต้องแนบ (จากความคิดเห็นด้านล่างนี้)
สมมติว่าคุณมีรายชื่อผู้ใช้ใน<ul>แท็ก เซิร์ฟเวอร์แสดงรายการนี้เมื่อเบราว์เซอร์ทำการร้องขอและผลลัพธ์จะมีลักษณะดังนี้:
<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>
ตอนนี้คุณต้องวนซ้ำรายการนี้และแนบมุมมองและรูปแบบ Backbone กับแต่ละ<li>รายการ ด้วยการใช้data-idแอตทริบิวต์คุณสามารถค้นหารุ่นที่แต่ละแท็กมาจากได้อย่างง่ายดาย จากนั้นคุณจะต้องมีมุมมองคอลเลกชันและมุมมองรายการที่ฉลาดพอที่จะแนบตัวเองกับ html นี้
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();
ในตัวอย่างนี้UserListViewจะวนรอบ<li>แท็กทั้งหมดและแนบวัตถุมุมมองกับโมเดลที่ถูกต้องสำหรับแต่ละแท็ก มันตั้งค่าตัวจัดการเหตุการณ์สำหรับเหตุการณ์การเปลี่ยนชื่อรุ่นและปรับปรุงข้อความที่แสดงขององค์ประกอบเมื่อมีการเปลี่ยนแปลงเกิดขึ้น
กระบวนการแบบนี้ในการใช้ html ที่เซิร์ฟเวอร์แสดงผลและให้ JavaScript ของฉันเข้ามาแทนที่และรันมันเป็นวิธีที่ยอดเยี่ยมในการทำให้สิ่งต่าง ๆ สำหรับ SEO การเข้าถึงและpushStateการสนับสนุน
หวังว่าจะช่วย