যদিও বিকাশকারী হিসাবে আপনার পক্ষে # 2 "সহজ" হতে পারে তবে এটি কেবল অনুসন্ধান ইঞ্জিন ক্রলিং সরবরাহ করে। এবং হ্যাঁ, গুগল যদি আপনার বিভিন্ন সামগ্রী সরবরাহ করে তা খুঁজে বের করে, তবে আপনাকে শাস্তি দেওয়া হতে পারে (আমি এতে কোনও বিশেষজ্ঞ নই, তবে এটি ঘটতে শুনেছি)।
এসইও এবং অ্যাক্সেসযোগ্যতা উভয়ই (কেবলমাত্র অক্ষম ব্যক্তির জন্য নয়, তবে মোবাইল ডিভাইস, টাচ স্ক্রিন ডিভাইস এবং অন্যান্য অ-মানক কম্পিউটিং / ইন্টারনেট সক্ষম প্ল্যাটফর্মের মাধ্যমে অ্যাক্সেসযোগ্যতা) উভয়েরই একই অন্তর্নিহিত দর্শন রয়েছে: শব্দার্থগতভাবে সমৃদ্ধ মার্কআপ যা "অ্যাক্সেসযোগ্য" (যেমন পারে এই সমস্ত বিভিন্ন ব্রাউজারে অ্যাক্সেস করা, দেখা, পড়া, প্রক্রিয়াজাতকরণ বা অন্যথায় ব্যবহৃত হতে পারে)। একটি স্ক্রিন রিডার, একটি সার্চ ইঞ্জিন ক্রলার বা জাভাস্ক্রিপ্ট সক্ষম ব্যবহারকারী, সমস্তই ইস্যু ছাড়াই আপনার সাইটের মূল কার্যকারিতা / সূচী / বুঝতে সক্ষম হতে হবে।
pushStateআমার অভিজ্ঞতায় এই বোঝাটি যুক্ত করে না। এটি কেবলমাত্র পরে ব্যবহৃত চিন্তাভাবনা এবং "আমাদের যদি সময় থাকে" ওয়েব বিকাশের অগ্রভাগে নিয়ে আসে।
আপনার বিকল্প # 1 এ যা বর্ণনা করা হয়েছে তা যাবার জন্য সর্বোত্তম উপায় - তবে অন্যান্য অ্যাক্সেসযোগ্যতা এবং এসইও ইস্যুগুলির মতো, pushStateজাভাস্ক্রিপ্ট-ভারী অ্যাপ্লিকেশন দিয়ে এটি করার জন্য আপ-ফ্রন্ট পরিকল্পনা প্রয়োজন বা এটি একটি গুরুত্বপূর্ণ বোঝা হয়ে উঠবে। এটি পৃষ্ঠায় এবং অ্যাপ্লিকেশন আর্কিটেকচারটি শুরু থেকেই বেক করা উচিত - retrofitting বেদনাদায়ক এবং প্রয়োজনের তুলনায় আরও বেশি সদৃশ সৃষ্টি করবে।
আমি pushStateসম্প্রতি বেশ কয়েকটি ভিন্ন অ্যাপ্লিকেশনের জন্য এবং এসইওয়ের সাথে কাজ করছি এবং আমি যা পেয়েছি তা একটি ভাল পদ্ধতির বলে মনে করি। এটি মূলত আপনার আইটেম # 1 অনুসরণ করে তবে এইচটিএমএল / টেমপ্লেটগুলি নকল না করার জন্য অ্যাকাউন্টগুলি।
এই দুটি ব্লগ পোস্টে বেশিরভাগ তথ্য পাওয়া যাবে:
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/
এর সংক্ষিপ্তসারটি হ'ল আমি আমার সার্ভার সাইড রেন্ডার এবং ব্যাকবোন যে ক্লায়েন্ট সাইড টেম্পলেটগুলি ব্যবহার করতে পারি তার পাশাপাশি আমার জেসমিন জাভাস্ক্রিপ্ট স্পেস্কগুলির জন্য ইআরবি বা এইচএএমএল টেমপ্লেটগুলি (রেলগুলি রুবেল, সিনট্রা ইত্যাদি) ব্যবহার করি। এটি সার্ভার সাইড এবং ক্লায়েন্ট পক্ষের মধ্যে মার্কআপের সদৃশটিকে কেটে দেয়।
সেখান থেকে, আপনার জাভাস্ক্রিপ্টটি এইচটিএমএল দিয়ে সার্ভারের দ্বারা রেন্ডার করা কাজের জন্য কিছু অতিরিক্ত পদক্ষেপ গ্রহণ করা দরকার - সত্য প্রগতিশীল বৃদ্ধি; অর্থেডিক মার্কআপটি গ্রহণ করা যা জাভাস্ক্রিপ্টের সাহায্যে বিতরণ করা হয়েছে।
উদাহরণস্বরূপ, আমি এর সাথে একটি চিত্র গ্যালারী অ্যাপ্লিকেশন তৈরি করছি pushState। আপনি যদি /images/1সার্ভার থেকে অনুরোধ করেন তবে এটি সার্ভারের পুরো চিত্র গ্যালারী রেন্ডার করবে এবং সমস্ত ব্রাউজারে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট প্রেরণ করবে। আপনার যদি জাভাস্ক্রিপ্ট অক্ষম থাকে তবে এটি পুরোপুরি ঠিকঠাক কাজ করবে। আপনার করা প্রতিটি পদক্ষেপ সার্ভার থেকে একটি পৃথক URL অনুরোধ করবে এবং সার্ভারটি আপনার ব্রাউজারের জন্য সমস্ত মার্কআপ রেন্ডার করবে। আপনি যদি জাভাস্ক্রিপ্ট সক্ষম করে থাকেন তবে জাভা স্ক্রিপ্টটি সার্ভারের দ্বারা উত্পাদিত কয়েকটি ভেরিয়েবলের সাথে ইতিমধ্যে রেন্ডার করা এইচটিএমএলকে বেছে নেবে এবং সেখান থেকে গ্রহণ করবে।
এখানে একটি উদাহরণ:
<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আমার জন্য একটি উত্পন্ন করছে। ভিউটি শেষ হয়ে যাওয়ার পরে আমার কাছে রেন্ডার পদ্ধতি উপলব্ধ রয়েছে এবং পৃষ্ঠাটি সমস্ত জাভাস্ক্রিপ্ট। এটি আমার প্রয়োজন হলে পরে আমাকে পুনরায় রেন্ডার করতে দেয়।
জাভাস্ক্রিপ্ট সক্ষম হওয়া "আমার নাম বলুন" বোতামটি ক্লিক করা একটি সতর্কতা বাক্সের কারণ ঘটবে। জাভাস্ক্রিপ্ট ব্যতীত এটি সার্ভারে ফিরে পোস্ট করবে এবং সার্ভারটি কোথাও কোথাও এইচটিএমএল উপাদানটির নাম রেন্ডার করতে পারে।
সম্পাদন করা
আরও জটিল উদাহরণ বিবেচনা করুন, যেখানে আপনার একটি তালিকা রয়েছে যা সংযুক্ত করা দরকার (এটি নীচের মন্তব্যগুলি থেকে)
বলুন একটি <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বৈশিষ্ট্যটির ব্যবহারের সাথে আপনি প্রতিটি মডেলটি সহজেই যে মডেলটি আসেন তা আবিষ্কার করতে পারেন। তারপরে আপনার এই সংগ্রহের ভিউ এবং আইটেম ভিউ দরকার যা এইচটিএমএল এ নিজেকে সংযুক্ত করার জন্য যথেষ্ট স্মার্ট।
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>ট্যাগের মধ্য দিয়ে লুপ করবে এবং প্রতিটিটির জন্য সঠিক মডেলের সাথে একটি ভিউ অবজেক্ট সংযুক্ত করবে। এটি মডেলের নাম পরিবর্তন ইভেন্টের জন্য একটি ইভেন্ট হ্যান্ডলার সেট আপ করে এবং কোনও পরিবর্তন ঘটে যখন উপাদানটির প্রদর্শিত পাঠ্য আপডেট করে।
এই জাতীয় প্রক্রিয়া, এইচটিএমএলকে নিতে যে সার্ভারটি রেন্ডার করেছে এবং আমার জাভাস্ক্রিপ্টটি ধরে নিয়েছে এবং চালাতে পারে, তা এসইও, অ্যাক্সেসিবিলিটি এবং সমর্থনগুলির জন্য জিনিসগুলিকে ঘূর্ণায়মান করার দুর্দান্ত উপায় pushState।
আশা করি এইটি কাজ করবে.