内容


真正的 Web 2.0

用 bookmarklets 创建快捷粗略的 Web 应用程序

综合利用书签和脚本创建定制应用程序

Comments

系列内容:

此内容是该系列 # 部分中的第 # 部分: 真正的 Web 2.0

敬请期待该系列的后续内容。

此内容是该系列的一部分:真正的 Web 2.0

敬请期待该系列的后续内容。

之前的 真正的 Web 2.0专栏 中,我从用户和开发人员的视角展示了几个重要的 Web 2.0 站点,着重介绍了可用于创建定制 Web 经验的一些共享数据相关的特性,我首先推荐了 del.icio.us,之后是 Digg 和 Reddit。在随后的每一期中,我都将镜头稍作后移,以捕获这些站点背后的一些方面。这些站点大都使用了适合于用户和开发人员的常见工具和技术。这一期文章将着眼介绍 bookmarklet。

Bookmark 简介

只要用过 Web 浏览器的人都会知道书签,但可能不会意识到书签决不仅仅限于是到另一个站点的静态链接。借助 URL 模式 javascript:,还可以使用几乎受所有 Web 浏览器支持的一种特殊格式的链接。之后,可以放置一个或多个 ECMAScript(有时称为 JavaScript)语句。由于使用 ECMAScript 可以执行大多数操作,所以可以使用这种方式来借助再简单不过的书签来开发和安装功能强大的工具。大约十年前,Java™技术刚刚兴起之时,人们引入了术语 "applet" 来描述一些从浏览器加载的 Java 代码可能具有的丰富功能性。很快,术语 "servlet" 就出现了,用于描述在服务器上所能提供的功能性。术语 "bookmarklet" 也遵从了这类约定,展示了在书签范围内或链接范围内可用的高级功能性。 Bookmarklet 完全在浏览器上执行,正如 Java applet 一样。以这种方式执行 bookmarklet,使之看上去像是在页面本身的脚本语句中被加载的,所以 bookmarklet 是用于定制 Web 体验以及从服务器端夺回某些控制的强大工具。 Bookmarklet 适用于多种任务,包括:

  • 将页面提交到基于 Web 的工具,比如书签服务或验证服务
  • 从页面查询数据并将其提交给基于 Web 的工具
  • 处理页面的内容、表示或导航
  • 分析页面以显示有用事实和统计数据
  • 控制动态 Web 页面特性,比如播放和暂停视频或音频

这些任务总的来说涵盖了真实世界中的 Web 2.0 服务的需求,所以 bookmarklet 已经成为这些站点用于提供浏览器特性的一种流行方式。比方说,有一些 bookmarklet 可以将页面提交到链接站点,例如 del.icio.us、Digg 和 Reddit。如果在浏览器的书签工具栏放置了这样一个 bookmarklet 作为按钮,之后从 Web 上的任何页面都可以单击此按钮来将此页面提交到链接站点。实际上,可以使用 bookmarklet 为浏览器本身添加特性,而所需的编程很少,若他人所编写的 bookmarklet 恰好满足了您的需求,甚至根本不需要任何编程。

基本的 bookmarklet 示例

在这个简单的示例中,我将展示 "post to del.icio.us" 按钮,该按钮实际上就是 del.icio.us 站点鼓励用户添加到其书签工具栏的 bookmarklet。清单 1 是 bookmarklet 的一种格式,其中添加了空白。

清单 1. 用于发布到 del.icio.us 的 Bookmarklet
 javascript:location.href = 
 'http://del.icio.us/post?v=4;url='
 + encodeURIComponent(location.href) 
 + ';title='
 + encodeURIComponent(document.title)

实际的 bookmarklet 是清单 1 所示的代码除去所有空格后,全部放于一行之内。它是 location.href的简单再分配,指示浏览器加载新页。接下来的三行则根据 del.icio.us 服务的结构使用当前页位置和标题作为查询参数以构造新 URL。只要所需服务提供了简单的、基于 URL 的 API,许多用于调用基于 Web 的服务的 bookmarklet 都如此简单。在这种情况下,del.icio.us 会让服务对 "GET" 可用,后者是一种 Web 访问,在单击链接或在浏览器的 URL 栏内进行键入时发生。有时,服务只以 "POST" 提供,它也是一种 Web 访问,在浏览器内提交表单时发生。也可以使用 bookmarklet 调用这类服务,但却较为困难。注意,这种做法有可能不是最好的 Web 编码实践,因为 del.icio.us 本应该要求 "POST" 。简单地讲,原因在于 "GET" 是专为调用 URL 却并不实质更改 Web 资源的状态的情况而设计的。它是通过向 del.icio.us 数据库添加条目来更改状态的。 在这种情况下,Web 方面的专家更倾向于使用 "POST"。

IBM developerWorks 搜索 bookmarklet

下一个例子是我所创建的一个较为复杂的 bookmarklet,用于提供从任何其他页面到 IBM developerWorks 搜索引擎的访问。如果您正在搜索一个技术新闻站点,恰巧遇到了 "Dojo" 的提法,而您并不清楚其含义,这时,您可以选择该词并调用此 bookmarklet 以寻找 IBM developerWorks 上有关 Dojo 的丰富信息。 清单 2 是 bookmarklet 代码,格式十分工整。

清单 2. 格式友好的 "developerWorks search" bookmarklet
/* Get the query string from selected text */ 
/* Made a bit complicated by cross-browser compatibility concerns */ 
q = '' + ( 
  window.getSelection ? window.getSelection() : document.getSelection 
    ? document.getSelection() : document.selection.createRange().text 
); 
/* If there is no text selected, prompt the user */ 
if (!q) 
  q = prompt('Enter a search phrase on IBM developerWorks:', ''); 
if (q!=null){ 
  /* Construct the basic string for IBM developerWorks searches */ 
  dWsearch = 'http://www.ibm.com/developerworks/search/searchResults.jsp?'
 + 'S_CMP=cn-a-wa&S_TACT=105AGX52&'
 + 'searchType=1&'
 + 'searchSite=dW&'
 + 'searchScope=dW&'
 + 'Search.x=0&Search.y=0&'
 + 'Search=Search&'; 
  /* Escape spaces in the query string and then go to the constructed page */
  location.href = dWsearch + 'query=' + escape(q).replace(/ /g, '+'); 
} 
void 0

清单 2 是一个较长的 ECMAScript 例程,不像清单 1 一样,只有一行代码。如果将清单 2 加上 javascript:的前缀并删除所有新行和大多数其他空白,它就成为了一个 bookmarklet。 我曾经见过比清单 2 长出两倍的 bookmarklet,所以您可能对以这种方式所能执行的各种混合编程任务有了一个大致的概念。

实际应用中的 developerWorks 搜索

让大量较为常用的 bookmarklet 在浏览器单击时就可用是一个十分有用的做法。在本节,我将展示如何在 Mozilla Firefox 中实现这一点,使用的是清单 2 所示的 bookmarklet 版本,我将其合并到了如下链接:developerWorks search。在 Firefox 浏览器,右键单击此链接并选择 "Bookmark this link"。然后在出现的对话框中选择 "Bookmarks Toolbar" 作为要在其中创建书签的文件夹。现在,标有 "developerWorks search" 的按钮就会正好出现在每个浏览器窗口的顶部。如果看不到它,请确保在 "View" 菜单,"Bookmarks Toolbar" 旁边、"Toolbars" 下面有一个复选标记。

bookmarklet 安装之后,就可以转到任意的页面,选择一些文本,然后单击工具栏中的按钮。如果单击按钮却没有选中任何文本,就会收到相关提示。图 1 所示的屏幕截图中就显示了这样的一个提示。如果再进一步查看提示对话框的左侧,就会看到工具栏中的 bookmarklet,以及我用于存档其他常用 bookmarklet 的工具栏条目。

图 1. 实际应用中的 developerWorks 搜索 bookmarklet
实际应用中的 developerWorks 搜索 bookmarklet
实际应用中的 developerWorks 搜索 bookmarklet

结束语

Bookmarklet 是 Web 2.0 中很重要的一部分,它彰显了 Web 2.0 技术的两个重要特征:透明性和开放性,而这也是我在本专栏中重点关注的。在今后的文章中,我还会不时地提到它们。如果您有 ECMAScript 的使用经验,那么现在就可以将 bookmarklet 用作体验、开放和部署对 Web 页面的增强的重要手段。如果您不是一名 ECMAScript 开发人员,您仍然可以利用他人开发的 bookmarklet,并从中受益。


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=249314
ArticleTitle=真正的 Web 2.0: 用 bookmarklets 创建快捷粗略的 Web 应用程序
publish-date=08202007