前端开发系列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命令)。

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

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

posted on 2022-12-15 08:56  文顶顶  阅读(38)  评论(0编辑  收藏  举报

导航