github 上的 jquery-master 都是用了什麼技術，怎麼裡面這麼多文件呀？

01-07

之前和js大牛聊天，他們現在都用了什麼構建工具，打包工具，自動化測試，合併壓縮代碼什麼的。
而我只會切圖和寫jquery代碼，繼續用最傳統的方式做前端工作。
js大牛最後建議我去學習nodejs，gulp，js載入器等知識，讓我跟上他人的步伐。

今天無意間發現一個有趣的問題，就是github上jquery源碼不是一個jquery.js文件，而是一大堆文件，裡面包括Gruntfile.js文件，一個src文件夾，test文件夾等，這些是幹什麼用的，或是怎麼生成的呢？有點神奇了。
尤其是src文件夾，裡面細分好多js文件和文件夾，裡面的js文件開頭都是define定義，讓我想起了requre.js，我懷疑jquery作者當初沒有能力一口氣寫出來全部代碼，而是一個模塊一個模塊的寫，最後合併了，我如果順著這個思路走，閱讀jquery源碼不就方便好多嗎，我也一個一個的去研讀，最後就有希望更了解jquery了。
那個test文件夾，是不是jquery作者搞的js自動化測試or單元測試or單個js文件功能測試呢？這招學會了，維護大量js代碼都不成問題了。

上面就是我從github上面下載下來的jquery代碼了。很奇怪是不是？明明就一個jquery.js文件，怎麼會多了這麼多東西，他們都是幹什麼用的？比如bulid文件夾是幹什麼用的，external文件夾幹什麼用的，那個.jshintrc文件幹什麼用的,求js大牛幫忙指點下啦。
js大牛快來，要是能全部說明下每個文件和文件夾，解釋下相關技術就再好不過了。懂那個就說個也行，我是js小白啦，我們一起交流學習哈。

挨個解釋

build/ 放構建腳本
external/ 放依賴的第三方代碼
src/ 放 jquery 的源碼，拆分了模塊，畢竟維護一個巨長無比的 js 代碼挺蛋疼的
test/ 測試，各種東西都有
.babelrc Babel 的配置文件，es6 轉 es5 用的
.editorconfig 文本編輯器的配置文件（這玩意我今天才聽說）
.gitattributes Git 的配置文件
.gitignore 不解釋
.jscsrc JSCS 的配置文件，檢查代碼風格用的
.jshintignore JSHint 的忽略文件
.jshintrc JSHint 的配置，查風格 + 查錯的
.mailmap git-shortlog 的配置文件
.npmignore NPM 忽略配置
.npmrc NPM 包管理器的配置文件
.tarvis.yml Tarvis-CI 的配置文件，持續集成用的
AUTHORS.txt 貢獻者名錄
CONTRIBUTING.md 貢獻代碼指引
Gruntfile.js Grunt 構建腳本，用來打包、檢查格式等等
LICENSE.txt 授權協議
README.md readme 簡介
package.json Node（和 NPM）的包配置，包依賴之類

現代 JS 工程的目錄大概就是這樣，不過一般不會這麼完整

項目整體目錄結構 @Belleve 已經講得很好了，我只補充一點 ——

jQuery 最早開發時，Web 前端還沒有 JavaScript 模塊化的概念，所有代碼都寫在一個大閉包（匿名立即執行函數）里是很自然的做法～

jQuery API 的基本設計從一開始就簡單、清晰，其核心構造器 $ 寫完之後，所有 jQuery 標準方法（官方文檔中有的）本質上都是 jQuery 插件，因為它們的開發模式完全相同 ——

(function ($) {


    $.fn.xxx = function () {

        //  一個 API 的實現……
        return this;

    };

})(window.jQuery);

所以，整體代碼多了，jQuery 源碼自然又可以分成多個大閉包，每個都只負責一方面的功能，每個都正確引用全局 jQuery 變數（命名空間）。這離現在的 define() 形式只差一步了～

當 Web 前端 AMD、CMD 等模塊規範普及時，jQuery 只需把大閉包的「立即執行」改為「只定義不執行」，並給它們做好模塊命名，再寫好依賴關係 —— 每次發版本都只需構建工具跑一下，再大的 jQuery 工程也能從容應對～

——————————————————————

只要熟悉原生 JavaScript，也領悟了 jQuery 的核心思想，其核心構造器、最最常用的那些方法一小時內就能一口氣寫完（基於現代瀏覽器 W3C 標準 BOM、DOM API，不實現老 IE 兼容、全能 DOM 選擇器引擎）～

我 2015年4月29日晚開了竅，一口氣把之前寫原生積累的一堆庫函數封裝成 jQuery 的形式，第二天就發布為一個輕量級 jQuery 兼容 API 開源項目 —— 南漂一卒 / iQuery ，連寫5天就能替換小項目中的 jQuery 了～

在這之前，我沒閱讀過 jQuery 源碼（一些提到 jQuery 某個模塊原理的技術博文中摘錄的一點源碼不算），只是喜歡 jQuery 簡潔而強大的 API，也寫了一些 jQuery 實用插件用在自己的項目中。

自己的 iQuery 開發得比較完善之後（半年左右），在一些「被虐千百遍」的地方才開始去 Github 專門拜讀 jQuery master 分支的源碼，發現 —— 有些地方官方實現得十分精妙，大受啟發；有些只是做了簡化處理，追求完美的話只有自己跟自己死磕一陣子了～（期間伴隨著對 司徒正美《JavaScript 框架設計》一書中 jQuery 實現解析的反覆閱讀）

總結這個項目10個月來的開發歷程，感覺 jQuery 最難的部分是 ——

DOM 選擇器引擎
DOM 事件系統抽象層
AJAX 多種實現方式的封裝
IE 9- 兼容、調試

題主了解下grunt，glup，webpack就知道怎麼回事兒了。另外seajs，requirejs是瀏覽器端的模塊化管理工具，上面三個是伺服器端的模塊化構建工具。

如果你跟上了當前互聯網前端的節奏，這些文件都是一看便知。

所以，只能說你目前工作的"前端開發"是傳統的（2010年之前）的那種方式，前端入門門檻低，只要稍微了解學習一下，都會懂html/css/javascript。進階的前端開發，會涉及很多。例如：angular，nodejs，vuejs，react，bootstrap，sass等都是前端開發工程師需要了解和掌握的了（指的不是全部，至少每個方向，每個點都熟悉一種）

接受打擊，看清方向，找到目標，趕緊去學習吧……

這裡有一篇博客：前端工程——基礎篇 · Issue #10 · fouber/blog · GitHub，當你看懂了，證明你前端合格了