《扩展 jQuery》——6.2 jQuery Cookie插件

简介:

本节书摘来自异步社区《扩展 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 中保存这个信息:
screenshot

开发者也可以提供额外的参数来定制 cookie,设置它的过期时间(默认情况下,cookie随着当前会话的结束而过期)、它要应用的域和路径、是否需要安全传输、是否需要加密cookie值:
screenshot

获取cookie值时只需要提供它的名字。如果给定的名字没有cookie,则返回null。在网站介绍信息的例子中,开发者应该检查这个值,仅在它为null的情况下显示介绍信息:
screenshot

通过把cookie的值设置为null来删除它:
screenshot

正如读者看到的,这个插件遵守了“在所有地方使用唯一的名字”原则。根据每次调用所提供的参数个数和类型,它提供了不同的功能。

现在读者已经知道 Cookie 插件能做什么了,接下来将会看到如何实现它的功能。尽管Cookie插件没有使用笔者的框架,但基本结构和原则仍然适用。

6.2.2 读写cookie
与之前的控件一样,它的代码对于其余的JavaScript世界来说都是受保护的,唯一访问点就是jQuery对象自己。

screenshot

通过一个匿名函数1把这个插件与外部 JavaScript 隔离,并遵守了“利用作用域隐藏实现细节”和“不要依赖$与jQuery的等同性”原则2。这个插件极少使用jQuery自己,它只定义了一个函数——Cookie,并把它添加到jQuery对象中3,这使用了另外两个原则:“在所有地方使用唯一的名字”和“把一切都放在jQuery对象中”。

这个插件有两个操作模式——读和写cookie,使用哪个模式则由调用时传入的参数个数和类型来决定。首先来处理写cookie的情况。
screenshot

如果提供了不止一个参数,并且第二个不是一个object,则为写cookie模式1。如果值为null,则删除cookie2,把超时时间设置为-1,代表这个 cookie已经过期并作废。如果expires选项是一个数字,则被认为是从今天开始的天数3。最终,cookie值被转换为字符串,这个 cookie 和它的设置一起被写入浏览器4。正如预期的那样使用了“使用合理的默认值”原则,使得当前域和路径上的 cookie 随着当前会话的结束而过期。编码后的cookie名和值作为函数的调用结果返回,尽管大部分时候开发者不需要知道或使用这个值。

如果是取值模式,插件将继续处理,代码如程序清单6.7所示。

screenshot

首先,读取作为第二个参数传入的所有选项1。如果没有提供,则使用默认值。获取当前cookie值(当前页面上的所有cookie),并分离为独立的键值对2。根据传入的名字检查每一对3,并返回相应的值。如果没有匹配到,则返回nul4。

开发者可以通过更新$.cookie.defaults来设置所有cookies的默认选项:
screenshot

Cookie插件的完整代码可以从本书的网站上下载。

需要知道

开发函数插件来添加不直接操作选定元素的功能。

直接扩展$来添加额外的功能。

通过使用作用域来保护自己的代码以及防止名字冲突。

通过参数控制插件的行为,但是没有设置参数时要提供合适的默认值。
自己试试看

写一个函数插件来格式化时间,调用方式如下:

var time = $.formatTime(new Date(0, 0, 0, 12, 34, 0));

接收一个Date参数对象,从中提取时间。如果没有设置,则使用当前时间。把时间格式化为hh:mmAP。想进一步挑战的话,添加可选的第一个参数(Boolean)用来指定是否格式化为12时制,或者24时制。

提示: Date对象有getHours和getMinutes函数。使用new Date()获取当前日期/时间。

相关文章
|
10天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
48 21
|
11天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
41 16
|
6天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
26 9
|
9天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
11天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
10天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
7天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
19 2
|
7天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
11天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
9天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
12 2