जबकि # 2 एक डेवलपर के रूप में आपके लिए "आसान" हो सकता है, यह केवल खोज इंजन क्रॉलिंग प्रदान करता है। और हां, यदि Google को आपकी सेवा अलग-अलग सामग्री के बारे में पता चलती है, तो आपको दंडित किया जा सकता है (मैं उस पर विशेषज्ञ नहीं हूं, लेकिन मैंने ऐसा होने के बारे में सुना है)।
दोनों एसईओ और पहुंच क्षमता (केवल विकलांग व्यक्ति के लिए नहीं, बल्कि मोबाइल उपकरणों, टच स्क्रीन उपकरणों और अन्य गैर-मानक कंप्यूटिंग / इंटरनेट सक्षम प्लेटफार्मों के माध्यम से पहुंच) दोनों में एक समान अंतर्निहित दर्शन है: शब्दार्थ रूप से समृद्ध मार्कअप जो "सुलभ" है (यानी कर सकते हैं) इन सभी विभिन्न ब्राउज़रों तक पहुँचा, देखा, पढ़ा, संसाधित या अन्यथा उपयोग किया जा सकता है। एक स्क्रीन रीडर, एक खोज इंजन क्रॉलर या जावास्क्रिप्ट सक्षम वाला उपयोगकर्ता, सभी को इस मुद्दे के साथ अपनी साइट की मुख्य कार्यक्षमता का उपयोग / इंडेक्स / समझने में सक्षम होना चाहिए।
pushStateमेरे अनुभव में, इस बोझ को नहीं जोड़ता। यह केवल वही लाता है जो वेब विकास के मामले में सबसे आगे और "यदि हमारे पास समय है" हुआ करता था।
विकल्प # 1 में आपका वर्णन आमतौर पर जाने का सबसे अच्छा तरीका है - लेकिन, अन्य पहुंच और एसईओ मुद्दों की तरह, pushStateजावास्क्रिप्ट-भारी ऐप में ऐसा करने के लिए अप-फ्रंट प्लानिंग की आवश्यकता होती है या यह एक महत्वपूर्ण बोझ बन जाएगा। इसे शुरू से ही पृष्ठ और एप्लिकेशन आर्किटेक्चर पर बेक किया जाना चाहिए - रेट्रोफिटिंग दर्दनाक है और आवश्यकता से अधिक दोहराव का कारण होगा।
मैं pushStateहाल ही में कुछ अनुप्रयोगों के लिए एसईओ के साथ काम कर रहा हूं, और मैंने पाया कि मुझे लगता है कि एक अच्छा तरीका है। यह मूल रूप से आपके आइटम # 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/
इसका सार यह है कि मैं अपने सर्वर साइड रेंडर के लिए ईआरबी या एचएएमएल टेम्प्लेट (रूबी ऑन रेल्स, रूनट रनिंग आदि) का उपयोग करता हूं और क्लाइंट साइड टेम्प्लेट बनाने के लिए जो बैकबोन का उपयोग कर सकते हैं, साथ ही अपने जैस्मीन जावास्क्रिप्ट स्पेक्स के लिए भी। यह सर्वर साइड और क्लाइंट साइड के बीच मार्कअप के डुप्लिकेट को काट देता है।
वहां से, आपको अपने जावास्क्रिप्ट काम को HTML के साथ करने के लिए कुछ अतिरिक्त कदम उठाने की आवश्यकता है जो सर्वर द्वारा प्रदान की जाती है - सच्ची प्रगतिशील वृद्धि; जो शब्दार्थ मार्कअप दिया गया है, उसे डिलीवर करना और उसे जावास्क्रिप्ट के साथ बढ़ाना।
उदाहरण के लिए, मैं एक छवि गैलरी एप्लिकेशन का निर्माण कर रहा हूं pushState। यदि आप /images/1सर्वर से अनुरोध करते हैं, तो यह सर्वर पर संपूर्ण छवि गैलरी को प्रस्तुत करेगा और सभी HTML, सीएसएस और जावास्क्रिप्ट को आपके ब्राउज़र में भेज देगा। यदि आपके पास जावास्क्रिप्ट अक्षम है, तो यह पूरी तरह से ठीक काम करेगा। आपके द्वारा की जाने वाली प्रत्येक क्रिया सर्वर से एक भिन्न URL का अनुरोध करेगी और सर्वर आपके ब्राउज़र के लिए सभी मार्कअप को प्रस्तुत करेगा। यदि आपके पास जावास्क्रिप्ट सक्षम है, हालांकि, जावास्क्रिप्ट सर्वर द्वारा उत्पन्न कुछ चर के साथ पहले से ही प्रदान किए गए HTML को उठाएगा और वहां से ले जाएगा।
यहाँ एक उदाहरण है:
<form id="foo">
Name: <input id="name"><button id="say">Say My Name!</button>
</form>
सर्वर इसे प्रस्तुत करने के बाद, जावास्क्रिप्ट इसे उठाएगा (इस उदाहरण में एक बैकबोन.जेएस दृश्य का उपयोग करके)
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मेरे लिए व्यू जेनरेट नहीं कर रहा है, जब पहला व्यू लोड होता है। मेरे पास देखने और चलाने के बाद एक रेंडर तरीका उपलब्ध है और पेज सभी जावास्क्रिप्ट है। इससे मुझे बाद में दृश्य को फिर से प्रस्तुत करने की अनुमति मिलती है अगर मुझे आवश्यकता है।
जावास्क्रिप्ट सक्षम के साथ "Say My Name" बटन पर क्लिक करने से अलर्ट बॉक्स बन जाएगा। जावास्क्रिप्ट के बिना, यह सर्वर पर वापस पोस्ट कर देगा और सर्वर एक 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>
अब आपको इस सूची के माध्यम से लूप करने की आवश्यकता है और प्रत्येक <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 लेने के लिए कि सर्वर ने प्रतिपादन किया और मेरे जावास्क्रिप्ट को संभाला और इसे चलाया, एसईओ, एक्सेसिबिलिटी और pushStateसमर्थन के लिए चीजों को रोल करने का एक शानदार तरीका है ।
उम्मीद है की वो मदद करदे।