《扩展 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()获取当前日期/时间。

相关文章
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
59 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
61 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
44 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
40 4
jQuery Cookie 插件
|
12天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
26 0
|
3月前
|
JavaScript 前端开发
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
177 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
34 0
|
5月前
|
存储 安全 关系型数据库
安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用&后台模块&Session&Cookie&Token&身份验证&唯一性
安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用&后台模块&Session&Cookie&Token&身份验证&唯一性