前端开发系列074-JQuery篇之框架源码解读[开始]
我将花点时间写几篇关于jQuery框架源码解读的系列文章,参考版本为当前最新的jQuery 3.3.1版本,本文主要介绍jQuery框架最新版本的基本信息以及如何开始等相关的内容。
准备说明
我自己在写文章和演示的时候使用的Mac OSX系统,在开始之前您需要先准备好如下的环境
> ✧ node和npm,可以[点击下载node安装](https://nodejs.org/zh-cn/)
> ✧ git环境 Mac电脑已经内置,windows系统可以[点击下载git for windows](https://gitforwindows.org/)来进行安装
> ✧ 掌握或者了解grunt构建工具的基本使用,您可以参考[Grunt的基本使用](http://wendingding.com/2018/05/18/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E7%B3%BB%E5%88%97[02]%20Grunt%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E7%9A%84%E4%BD%BF%E7%94%A8/)等相关的文章
开始操作
001 打开终端工具 新创建目录,cd进入到指定的项目路径
ex: $ cd jQuery框架
002 把jQuery托管在github上面的框架源码下载到当前目录
ex: $ git clone https://github.com/jquery/jquery.git
003 把jQuery源码下载完成后将得到下面的目录结构
.
├── 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命令)。
007 后续我将逐行的对jQuery框架源码进行解析,并贴出注解版本和解析内容。