標籤：style blog http color io 使用 java ar 檔案
說到jQuery, 大家可能直覺的認為jQuery的源碼應該就是一個jquery.xx.js這樣的一個檔案. 但是看到真正的源碼的時候, 整個人都思密達了.jQuery的源碼做的事遠比你想象的多, 為了保證代碼的可維護性, 健壯性, 通用性等等, jQuery將各個功能模組獨立成單個的js檔案, 並通過依賴管理管理模組之間的依賴關係, 在構建的時候通過這種依賴關係將各個模組合并成一個js檔案, 最後經過壓縮混淆等步驟才會產生我們經常用的jquery.xx.min.js檔案( q君:上來就說這些噁心的東西, 大家看不懂要跳過啊! ).
源碼來源:github: https://github.com/jquery/jquery
源碼版本:2.1.1: https://github.com/jquery/jquery/archive/2.1.1.zip
目錄結構:/----build/ 構建jQuery代碼用的一些檔案----dist/ 構建完成產生的檔案----src/ 源碼檔案, 這是本系列文章主要分析的內容----test/ 測試相關, 主要為了保證代碼的健壯性----其他檔案 包括grunt, bower jshint相關的配置
src/是jQuery真正的代碼, 裡麵包含jQuery的各個功能模組, 接下來我們會逐步分析每一個模組.
輔助環境搭建:在根目錄下建立analysis目錄, 用來輔助分析源碼, 方便調試, 觀察代碼啟動並執行一些細節.
分析過程中, 我會在analysis目錄下建立很多html用於載入源碼的各個模組. 以core為樣本, 建立core.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>core</title> </head> <body> <script src="require.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> require([‘../src/core.js‘], function($) { console.log($); }) </script> </body></html>
require.js是針對AMD規範做的一個類庫, AMD即Asynchronous Module Definition(非同步模組載入機制), 提供非同步載入和依賴管理支援.( q君: 這個不是做CPU的AMD啦! ) jQuery的源碼採用AMD, 或者說是遵循requirejs方式定義每一個模組, 所以我們通過requirejs來正確載入jQuery模組代碼.
更多細節可參閱requirejs官網: http://www.requirejs.org/
附件:源碼+analysis目錄 : http://yunpan.cn/Q75WBaPr4RkT8 提取碼 8469
jQuery 源碼分析和使用心得 - 關於源碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
