本节书摘来自异步社区《扩展 jQuery》一书中的第6章,第6.2节,作者:【美】Keith Wood 译者: 李强更多章节内容可以访问云栖社区“异步社区”公众号查看。
6.2 jQuery Cookie插件
函数插件的另一个很好的例子是Klaus Hartl写的Cookie插件。它允许开发者以一种很简单的方式来读写页面上的 cookie,而不需要知道这些cookie使用的格式和编码。开发者可以在每个用户的电脑上保存一些网站的状态信息来增强用户体验。因此,它不操作页面上的元素集合。
6.2.1 Cookie的交互
Cookies是存储在用户机器上并与一个或几个页面相关联的少量数据。一个网页的cookie在它的页面上是可访问的,并在每次请求时都会被回传到服务器上,这样就可以把一些状态维护在客户端机器上。Cookie在一定时间后会过期,并从用户机器上被删除。
要使用Cookie插件为当前页面设置一个cookie,开发者需要指定它的名字和值。例如,为了标识是否已经在每个用户第一次访问网站时显示了介绍信息,开发者可以在 cookie 中保存这个信息:
开发者也可以提供额外的参数来定制 cookie,设置它的过期时间(默认情况下,cookie随着当前会话的结束而过期)、它要应用的域和路径、是否需要安全传输、是否需要加密cookie值:
获取cookie值时只需要提供它的名字。如果给定的名字没有cookie,则返回null。在网站介绍信息的例子中,开发者应该检查这个值,仅在它为null的情况下显示介绍信息:
通过把cookie的值设置为null来删除它:
正如读者看到的,这个插件遵守了“在所有地方使用唯一的名字”原则。根据每次调用所提供的参数个数和类型,它提供了不同的功能。
现在读者已经知道 Cookie 插件能做什么了,接下来将会看到如何实现它的功能。尽管Cookie插件没有使用笔者的框架,但基本结构和原则仍然适用。
6.2.2 读写cookie
与之前的控件一样,它的代码对于其余的JavaScript世界来说都是受保护的,唯一访问点就是jQuery对象自己。
通过一个匿名函数1把这个插件与外部 JavaScript 隔离,并遵守了“利用作用域隐藏实现细节”和“不要依赖$与jQuery的等同性”原则2。这个插件极少使用jQuery自己,它只定义了一个函数——Cookie,并把它添加到jQuery对象中3,这使用了另外两个原则:“在所有地方使用唯一的名字”和“把一切都放在jQuery对象中”。
这个插件有两个操作模式——读和写cookie,使用哪个模式则由调用时传入的参数个数和类型来决定。首先来处理写cookie的情况。
如果提供了不止一个参数,并且第二个不是一个object,则为写cookie模式1。如果值为null,则删除cookie2,把超时时间设置为-1,代表这个 cookie已经过期并作废。如果expires选项是一个数字,则被认为是从今天开始的天数3。最终,cookie值被转换为字符串,这个 cookie 和它的设置一起被写入浏览器4。正如预期的那样使用了“使用合理的默认值”原则,使得当前域和路径上的 cookie 随着当前会话的结束而过期。编码后的cookie名和值作为函数的调用结果返回,尽管大部分时候开发者不需要知道或使用这个值。
如果是取值模式,插件将继续处理,代码如程序清单6.7所示。
首先,读取作为第二个参数传入的所有选项1。如果没有提供,则使用默认值。获取当前cookie值(当前页面上的所有cookie),并分离为独立的键值对2。根据传入的名字检查每一对3,并返回相应的值。如果没有匹配到,则返回nul4。
开发者可以通过更新$.cookie.defaults来设置所有cookies的默认选项:
Cookie插件的完整代码可以从本书的网站上下载。
需要知道
开发函数插件来添加不直接操作选定元素的功能。
直接扩展$来添加额外的功能。
通过使用作用域来保护自己的代码以及防止名字冲突。
通过参数控制插件的行为,但是没有设置参数时要提供合适的默认值。
自己试试看
写一个函数插件来格式化时间,调用方式如下:
var time = $.formatTime(new Date(0, 0, 0, 12, 34, 0));
接收一个Date参数对象,从中提取时间。如果没有设置,则使用当前时间。把时间格式化为hh:mmAP。想进一步挑战的话,添加可选的第一个参数(Boolean)用来指定是否格式化为12时制,或者24时制。
提示: Date对象有getHours和getMinutes函数。使用new Date()获取当前日期/时间。