我将花点时间写几篇关于jQuery框架源码解读的系列文章,参考版本为当前最新的jQuery 3.3.1版本,本文主要介绍jQuery框架最新版本的基本信息以及如何开始等相关的内容。

准备说明

我自己在写文章和演示的时候使用的Mac OSX系统,在开始之前您需要先准备好如下的环境:

✧ node和npm,可以点击下载node安装
✧ git环境 Mac电脑已经内置,windows系统可以点击下载git for windows来进行安装
✧ 掌握或者了解grunt构建工具的基本使用,您可以参考Grunt的基本使用等相关的文章

开始操作

001 打开终端工具 新创建目录,cd进入到指定的项目路径

ex: $ cd jQuery框架

002 把jQuery托管在github上面的框架源码下载到当前目录

ex: $ git clone https://github.com/jquery/jquery.git

003 把jQuery源码下载完成后将得到下面的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── AUTHORS.txt
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Gruntfile.js //jQuery框架的构建配置文件(采用了Grunt构建工具)
├── LICENSE.txt //jQuery框架使用的开源协议文件(具体为MIT开源协议)
├── README.md //项目的说明文档(github托管地址主页能看到的介绍文档)
├── build //项目的构建目录
├── dist //项目的发布目录(当前为空)
├── external //项目的外部依赖
├── package.json //项目的配置文件(包含框架需要依赖的所有包信息)
├── src //项目的开发目录
└── test //框架的测试目录

004 使用npm包管理工具来安装框架的依赖,当命令行执行完毕后会在当前目录创建node_modules文件夹(里面包含框架需要的所有必要的依赖)

ex:$ npm install

005 安装grunt-cli工具,并执行构建命令,对src目录的文件进测试、合并等操作

ex:$ npm install -g grunt-cli
ex:$ grunt -V
ex:$ grunt

006 上面的命令执行完毕后会在dist发布目录创建jquery.js和jquery.min.js文件,除了像上面这样一步一步处理之外也可以直接在把jQuery下载到项目后直接执行$ npm run build命令(该命令内部会调用npm install && grunt命令)。

说明:执行grunt命令的前提的是在本地安装了grunt-cli

007 后续我将逐行的对jQuery框架源码进行解析,并贴出注解版本和解析内容。