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