【手撕jquery】之工程整体结构

【置顶】进入工程能够查看更详细的注释

一.选材

　　看到 jquery 你们第一反应就是：还没死呢。

　　在MVVM框架大行其道的今天，一说用的jquery，确定会被嘲笑一通，项目不用react，angular，vue那就不叫前端项目 云云。

　　事实上，使用jquery框架开发的网站和项目比比皆是，并且并不在少数，实际项目中也并非全部情景都合适MVVM。

　　此外，jquery做为一个风靡全世界的经典框架，其在DOM操做方面，浏览器兼容方面的解决思路，都是经典中的经典。

　　手撕一下jquery，对js的基础知识也是一次深层次的洗刷（我去，尼玛感受脑子里装的是洗碗水呢）。

二.工程结构

　　与时俱进，不用老东西唬弄人，我fork了最新的jquery工程，版本为3.2.2。

　　工程结构以下：

　　

　　做为第一次手撕，对于一些常见类型文件和文件夹，咱们仍是要说一下：

　　package.json：npm的描述文件，npm的精髓，千万别说你历来不看

　　src：工程核心部分，源代码

　　build：用于配置构建参数，或者完成部分构建功能

　　dist：用于存放构建后的文件，通常构建的目标文件夹就是它

　　test：用于单元测试，功能测试等

　　.git开头的文件，请参考git相关使用

　　.eslint开头的文件，请参考eslint相关使用，对于团队做战，代码风格必定要统一

　　.editorconfig 格式配置，请参考editorconfig

　　.travis.yml 持续化集成工具travis CI的配置文件，文章不涉及

　　Gruntfile：这个文件已出现，就能够知道工程使用grunt进行构建打包的

三.工程入口

　　展开src文件夹，代码撕起来，打开文件夹一看，懵逼了。

　　这么多文件，从哪看起呢？

　　不要着急，这么多文件必然有其联系，若是都是做者随性放的，那他早就疯了。

　　通常前端工程都会有一个入口文件，找到这个入口文件，手撕过程就能够正式开始了。jquery工程的入口文件一目了然，固然就是jquery.js文件了！

　　

四.入口文件与AMD

　　进入jquery.js文件一看究竟吧：

　　对于模块加载的问题，咱们往后再细聊，jquery使用的requirejs加载模块，经过引入的模块，咱们就能够天然划分出各个功能了。

//js模块加载有amd umd commonjs es6 等等规范
//define函数属于amd规范
//目前比较经常使用的amd规范引用方式 是使用requirejs
//查看http://requirejs.org
define([ //引入的模块
    "./core",
    "./selector",
    "./traversing",
    "./callbacks",
    "./deferred",
    "./deferred/exceptionHook",
    "./core/ready",
    "./data",
    "./queue",
    "./queue/delay",
    "./attributes",
    "./event",
    "./event/alias",
    "./event/focusin",
    "./manipulation",
    "./manipulation/_evalUrl",
    "./wrap",
    "./css",
    "./css/hiddenVisibleSelectors",
    "./serialize",
    "./ajax",
    "./ajax/xhr",
    "./ajax/script",
    "./ajax/jsonp",
    "./ajax/load",
    "./event/ajax",
    "./effects",
    "./effects/animatedSelector",
    "./offset",
    "./dimensions",
    "./deprecated",
    "./exports/amd",
    "./exports/global"
], function( jQuery ) {
//导出的模块
"use strict";

return jQuery;

} );

 　　后续，我将按照功能，对各部分进行分析。

　　工程地址：https://github.com/DZG-MELODY/tear-jquery