jQuery Cookie 插件使用教程
1. 项目的目录结构及介绍
jQuery Cookie 插件的目录结构相对简单,主要包含以下几个文件和目录:
jquery-cookie/
├── src/
│ ├── jquery.cookie.js
├── test/
│ ├── unit/
│ │ ├── jquery.cookie.tests.js
├── .gitignore
├── .jshintrc
├── .travis.yml
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE.txt
├── package.json
├── README.md
目录介绍:
- src/: 包含插件的主要源代码文件
jquery.cookie.js
。 - test/: 包含插件的测试文件,其中
unit/
目录下是单元测试文件jquery.cookie.tests.js
。 - .gitignore: Git 忽略文件配置。
- .jshintrc: JSHint 配置文件。
- .travis.yml: Travis CI 配置文件。
- CONTRIBUTING.md: 贡献指南。
- Gruntfile.js: Grunt 任务配置文件。
- LICENSE.txt: 许可证文件。
- package.json: Node.js 包配置文件。
- README.md: 项目说明文档。
2. 项目的启动文件介绍
jQuery Cookie 插件的启动文件是 src/jquery.cookie.js
。这个文件包含了插件的所有核心功能,包括创建、读取和删除 Cookie 的方法。
主要功能:
- 创建 Cookie: 使用
$cookie(key, value)
方法创建 Cookie。 - 读取 Cookie: 使用
$cookie(key)
方法读取 Cookie。 - 删除 Cookie: 使用
$cookie(key, null)
方法删除 Cookie。
3. 项目的配置文件介绍
jQuery Cookie 插件的配置文件主要是 package.json
和 Gruntfile.js
。
package.json
配置文件:
package.json
文件包含了项目的元数据和依赖信息,例如项目名称、版本、作者、依赖库等。
{
"name": "jquery-cookie",
"version": "1.4.1",
"description": "A simple, lightweight jQuery plugin for reading, writing and deleting cookies.",
"main": "src/jquery.cookie.js",
"repository": {
"type": "git",
"url": "git://github.com/carhartl/jquery-cookie.git"
},
"author": "Klaus Hartl",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-qunit": "~0.3.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-watch": "~0.5.3"
}
}
Gruntfile.js
配置文件:
Gruntfile.js
文件用于配置 Grunt 任务,包括代码检查、单元测试、代码压缩等。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
qunit: {
files: ['test/**/*.html']
},
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {