我将花点时间写几篇关于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框架源码进行解析,并贴出注解版本和解析内容。

前端开发系列074-JQuery篇之框架源码解读[开始]的更多相关文章

  1. openlayers5-webpack 入门开发系列一初探篇(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  2. leaflet-webpack 入门开发系列一初探篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. chromium浏览器开发系列第三篇:chromium源码目录结构

    上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠 ...

  4. openlayers4 入门开发系列之热力图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. cesium-webpack 入门开发系列一初探篇(附源码下载)

    前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...

  6. openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  7. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  8. 《Vue.js 3.x高效前端开发(视频教学版)》源码课件同步教学视频免费下载

    <Vue.js 3.x高效前端开发(视频教学版)>源码课件同步教学视频免费下载.获得出版社和作者授权,可用于个人学习使用,禁止任何形式的商用.

  9. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  10. openlayers4 入门开发系列之图层控制(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. 一句话秒建公网站!AI边缘计算颠覆传统开发

    一句话就能让 AI 搭建一个公网可访问的完整网站: 短短几秒钟内,AI 便能完成所有构建操作: 这或许是目前全球最简便的建站方案: 本文使用的 AI 工具为腾讯云的 EdgeOne Pages MCP ...

  2. DPDI(Dispatch PDI)kettle调度管理平台发布新版本了

    Dispatch PDI最新版本发布! 我们很高兴地宣布,Dispatch PDI的全新轻量级版本现已在官网上线!这款专为高效ETL任务调度和监控设计的平台,将为您的数据处理带来前所未有的便捷. 立即 ...

  3. thinkphp mysql 使用IN 条件

    今天使用thinkphp  whrere  in条件查询 数据库是 ,我需要搜索入参  110000  一个字段 ,但是thinkphp 为了效率直接把  in条件转成  = 解决方法 FIND_IN ...

  4. AUTOFAC学习DEMO2-——ContainerBuilder注册三种方式、反射注册

    注册组件 通过容器构造器ContainerBuilder注册组件的三种方式: 通过类型反射注册 通过现存实例注册(实现对象的实例) lambda表达式注册(通过可实例化对象的匿名函数注册) 每个组件可 ...

  5. 『Plotly实战指南』--在金融数据可视化中的应用(上)

    在当今复杂多变的金融市场中,金融数据分析的重要性不言而喻. 无论是投资者.金融机构还是研究人员,都需要通过对海量金融数据的分析来洞察市场趋势.评估风险并做出明智的决策. 据彭博社统计,专业投资者平均需 ...

  6. DDD分层设计与异步职责划分:让你的代码不再“异步”混乱

    title: DDD分层设计与异步职责划分:让你的代码不再"异步"混乱 date: 2025/05/04 00:18:53 updated: 2025/05/04 00:18:53 ...

  7. K8s新手系列之Secret资源

    概述 官方文档:https://kubernetes.io/zh-cn/docs/concepts/configuration/secret/ 在Kubernetes(k8s)中,Secret是一种用 ...

  8. IDEA问题之“MyBatis插件安装【MyBatisX】”

    一.场景 在SSM框架中带有XML文件的查找很是麻烦,特别是在ID命名有大量重复时 而这个插件就可以,让你直接从Service实现类中直接跳到XML中 还有些其他功能,可以探索探索 一.配置步骤 1. ...

  9. 国际化利器 Intl Messageformat

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:霜序 Formats ICU Message string ...

  10. Python3 + selenium 获取疫情中高风险区数据

    背景: 需要动态将疫情风险区数据和区域业务动作想结合, 赋能销售业务, 内部使用非商用哈 环境: Python3 + selenium 自动化测试软件中 Chrome 驱动 exe 文件 输出: 以 ...