jquery 实现原理一:文件目录结构概览

源码文件结构结构

jquery 源码是符合AMD规范的,使用requirejs进行合并压缩,还用了bower来管理第三方依赖。

src/:源码全部在src目录下,全部是AMD规范的,入口文件是src/jquery.js,这个文件声明了全部的依赖,打包压缩就是从这个文件开始的。看一下jquery.js文件的依赖声明就能明白jquery的大致模块划分。
test/: 单元测试,非常非常详细的单元测试,值得参考
build/: 自己写了几个grunt插件,包括 build, diet, pre-uglify, post-uglify等, 还有一个r.js是requirejs用来合并压缩代码的脚本
speed/: 貌似是用来进行性能测试的
dist/:最后生成的jquery.js和jquery.min.js都放在这里
bower_components:/ 用bower管理的三个依赖:sizzle.js,require.js,quint.js,执行 bower install 后会被安装到 这里
Gruntfile.js:grunt 的配置文件
package.json:npm配置文件
bower.json:bower配置文件



grunt

grunt 主要包含如下几个任务:

build: 自己用nodejs写的插件,调用requirejs来压缩代码,但是把define声明去掉了,所以最后生成的jquery文件里面是看不到任何AMD相关的代码的。
dist:也是自己写的一个插件,在build之后调用dist生成dist/目录下的文件
uglify: 用来压缩代码
hint: 语法检查
watch:实时任务


jquery.js

下面重点说一下src/jquery.js,这个文件声明了一堆依赖,最后只做了一件事就是导出了一个jquery全局变量

     "./core",
     "./selector",
     "./traversing",
     "./callbacks",
     "./deferred",
     "./core/ready",
     "./support",
     "./data",
     "./queue",
     "./queue/delay",
     "./attributes",
     "./event",
     "./event/alias",
     "./manipulation",
     "./manipulation/_evalUrl",
     "./wrap",
     "./css",
     "./css/hidden-visible-selectors",
     "./serialize",
     "./ajax",
     "./ajax/xhr",
     "./ajax/script",
     "./ajax/jsonp",
     "./ajax/load",
     "./effects",
     "./effects/animated-selector",
     "./offset",
     "./dimensions",
     "./deprecated",
     "./exports/amd"

上面是其声明的全部依赖
首先依赖的就是core,core顾名思义是核心文件,定义了prototype,init,extend和常用的一些工具方法,剩下的一堆内容都是通过extend以插件形式添加的,跟自己写一个第三方插件没什么区别。然后是通过extend添加了一大堆插件,selector、ajax、event、data、css什么的都是这里加进去的。最后amd是根据AMD规范定义了一个jquery模块,所以jquery是天生符合AMD规范的。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值