【手撕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

　　

转载于:https://www.cnblogs.com/dzg-melody/p/8030402.html