前端开发系列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 官网在线例子 ...
随机推荐
- 🎀SQL注入拦截工具-动态order by
简介 业务场景经常会存在动态order by 入参情况,在处理动态 order by 参数时,需要防止SQL注入攻击.SQL注入是一种常见的安全漏洞,攻击者可以通过这种手段操纵查询来执行恶意代码. 措 ...
- 大模型微调实战:通过 LoRA 微调修改模型自我认知
本文主要分享如何使用 LLaMAFactory 实现大模型微调,基于 Qwen1.5-1.8B-Chat 模型进行 LoRA 微调,修改模型自我认知. 本文的一个目的:基于 Qwen1.5-1.8B- ...
- kettle介绍-Step之Script Values/Mod(JavaScript 代码) 一
Script Values/Mod JavaScript 代码介绍 JavaScript 代码步骤提供了一个用户界面,用户可以编写 JavaScript 代码到脚本区,脚本区域中的每一行代码都会执行一 ...
- 手把手带你从论文出发实战搭建分割FCN网络
作者:SkyXZ CSDN:SkyXZ--CSDN博客 博客园:SkyXZ - 博客园 FCN论文地址:Fully Convolutional Networks for Semantic Segmen ...
- wordpress插件开发时如何通过js调用图库/媒体选择器的问题
效果: 原文地址: wordpress插件开发通过js调用图库/媒体选择器的问题 - 搜栈网 (seekstack.cn)
- 参考示例之“复制对象|拷贝对象|BeanUtils工具类学习”
// 设置需要拷贝的字段 Set<String> targetSet = new HashSet<>(); targetSet.addAll(Arrays .asList(&q ...
- SQL 月同环比 日期 T+1 自动计算
对于离线数据的分析, 数据通常是 T+1 的, 即所有数据更新都是到 "昨天". 对于这样的同环比能自动计算是很需要的. -- 以Mysql为例: -- 今天: 2022/3/1 ...
- eclipse界面混乱还原方法
WindowPerspectiveReset Perspective
- 保姆教程系列:生成 SSH Key 并配置连接远程仓库
@ 目录 前言 第 1 步:检查是否已有 SSH Key 第 2 步:生成新的 SSH Key 第 3 步:启动 SSH Agent 并添加密钥 第 4 步:复制 SSH 公钥 第 5 步:添加 SS ...
- 自定义Marix的自定义动画,支持缓动动画属性
最近用画布的MatrixTransForm做变换,需要用Matrix做动画处理,网上冲浪找了一圈,没有找出好的解决方法 Stack Overflow 给出了一部分的解决方法,但是不支持缓动函数,貌似不 ...