前端开发系列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框架源码进行解析,并贴出注解版本和解析内容。
前端开发系列074-JQuery篇之框架源码解读[开始]的更多相关文章
- openlayers5-webpack 入门开发系列一初探篇(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- leaflet-webpack 入门开发系列一初探篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- chromium浏览器开发系列第三篇:chromium源码目录结构
上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠 ...
- openlayers4 入门开发系列之热力图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- cesium-webpack 入门开发系列一初探篇(附源码下载)
前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...
- openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- 14款让前端开发者心动的jQuery/CSS3插件及源码
14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示 / 源码下载 2.jQuery QQ表情插件qqFace ...
- 《Vue.js 3.x高效前端开发(视频教学版)》源码课件同步教学视频免费下载
<Vue.js 3.x高效前端开发(视频教学版)>源码课件同步教学视频免费下载.获得出版社和作者授权,可用于个人学习使用,禁止任何形式的商用.
- 第二十五课:jQuery.event.trigger的源码解读
本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...
- openlayers4 入门开发系列之图层控制(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- 利用 APEX 打造 Oracle 23ai 智能开发平台
Oracle 23ai 有很多新功能,但用户痛点是不会用. 因此计划开发一个适合小白的图形化界面Oracle 23ai智能开发平台,过程中也能学习APEX的玩法. 本篇先拿Oracle数据库向量操作相 ...
- C#+Appium+Nunit实现app自动化demo
1.新建Nunit工程 打开Rider新建一个Nunit工程并使用NuGet安装对应库,步骤如下: 2.编写代码 代码如下: using System; using NUnit.Framework; ...
- VScode设置用户代码片段快捷方式
一.创建步骤 a. b. 二.创建模板 { "生成vue模板": { "prefix": "vue", "body": ...
- C++数据的共享和保护
1.函数原型作用域:C++中最小的作用域 ①在函数原型声明时,形参的作用范围就是函数原型作用域. 2.局部作用域/块作用域 3.类作用域 类可以被看做是一组有名成员的集合,类X的成员m具有类作用域,对 ...
- tar命令打包指定目录及其文件,而不包括其上级目录
想指定将/var目录下的log目录及其文件打包到当前目录,在压缩包解压时不包括/var目录,可使用如下方式: tar -zcvf log_bak.tar.gz -C /var/ log # 注意log ...
- 我的C/C++开发环境
我的C/C++开发环境 OS: WSL Ubuntu Compiler: gcc Editor: VS Code Extensions: C/C++ Extenion Pack Settings: 时 ...
- 【笔记】Excel 2021|VBA删除数组中的一个元素、循环时删除一行、选择一列删除指定一行
主要问题是循环的时候删除一行比较麻烦,因为删除了一行后,循环仍然直接访问后一行,会导致一定的异常. 文章目录 选择一列,删除指定一行 删除数组中的一个元素 方法1:利用动态数组,在循环中条件判断删除 ...
- 【UEFI】PEI阶段从概念到代码
总述 UEFI开发过程中,BIOS工程师主要关注点和工作都在于PEI和DXE阶段. DXE阶段是我们的主战场,可以进行丰富且大量的功能驱动开发. 实际上,在UEFI Spec中,就指出 ---- Th ...
- TensorFlow 基础 (01)
以前都自嘲什么码农, 搬砖啥的, 倒不如 "工具人" 这个词更加贴切. 我现在就是一个完完全全的工具人. 上班真的是没有太大乐趣, 如果不下班后培养自己的兴趣爱好, 或者技术精进的 ...
- ESP32 MQTT对接巴法云平台
ESP32 MQTT对接巴法云平台 MQTT(Message Queuing Telemetry Transport)是一种轻量级的 发布/订阅(Publish/Subscribe) 消息传输协议,专 ...