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

来源:互联网 发布:淘宝抢购秒杀 编辑:程序博客网 时间:2024/05/22 01:54

源码文件结构结构

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规范的。