虽然#2 对于开发人员来说可能“更容易”,但它只提供搜索引擎抓取功能。是的,如果谷歌发现你提供不同的内容,你可能会受到惩罚(我不是这方面的专家,但我听说过这种情况发生)。
SEO 和可访问性(不仅针对残疾人,还包括通过移动设备、触摸屏设备和其他非标准计算/互联网支持平台的可访问性)都有相似的基本理念:“可访问”的语义丰富的标记(即可以被访问、查看、读取、处理或以其他方式使用)到所有这些不同的浏览器。屏幕阅读器、搜索引擎爬虫或启用 JavaScript 的用户都应该能够毫无问题地使用/索引/理解您网站的核心功能。
pushState
根据我的经验,这并不会增加这种负担。它只是将过去的事后想法和“如果我们有时间”带到了 Web 开发的最前沿。
你在选项#1中描述的通常是最好的方法 - 但是,像其他可访问性和 SEO 问题一样,用pushState
在 JavaScript 密集型应用程序中需要预先规划,否则它将成为一个重大负担。它应该从一开始就融入到页面和应用程序架构中——改造是痛苦的,并且会导致不必要的重复。
我一直在与pushState
和 SEO 最近针对几个不同的应用程序,我发现了我认为是一个很好的方法。它基本上遵循您的第 1 项,但不会重复 html/模板。
大部分信息可以在这两篇博客文章中找到:
http://lostechies.com/derickbailey/2011/09/06/test-driven-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/ http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/
and
http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/ http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/
其要点是,我使用 ERB 或 HAML 模板(运行 Ruby on 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
为了景观。我是not调用 render 或让视图生成el
对我来说,当第一个视图加载时。在视图启动并运行并且页面全部是 JavaScript 后,我有一个可用的渲染方法。这让我可以在需要时重新渲染视图。
在启用 JavaScript 的情况下单击“说出我的名字”按钮将出现一个警告框。如果没有 JavaScript,它会回发到服务器,服务器可以将名称呈现到某处的 html 元素。
Edit
考虑一个更复杂的示例,其中您有一个需要附加的列表(来自下面的评论)
假设您有一个用户列表<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
支持。
希望有帮助。