jQueryが使えるようになると、その中身がどのようになっているのか気になります。今更ではありますが、jQuery本体のソースコードを見てみました。量が多いので一行一行まで細かく見られていませんが、全体像を何となく把握できたと思います。
私一人の力では読み解けないので、ある記事を参考にさせて頂きました。そちらの記事では、jQueryのバージョン1.2.2を対象にしていたので、私も同じバージョンのコードを入手しました。参考サイトについては、参考サイトの項目をご覧ください。
jQuery本体の理解に必要な知識
- JavaScriptの基本構文
- スコープ
- オブジェクト
- new
- prototype
- 正規表現
ライブラリの大まかな内容
発見したこと
jQuery本体は、ローカルスコープ((function(){...})()
)の中にあります。どのようにしてローカルスコープ内のメソッドにアクセスしているのかが疑問でした。これは、window.$にjQueryを代入することで、外部からjQuery本体にアクセスできるようになっていることが分かりました。
window.$ = jQuery;
実験
前述の考え方から以下のようなコードを試しました。
(function(){ var aaa = "AAA"; console.log(aaa); //イ })(); console.log(aaa); //ロ
ローカルスコープ内にある(イ)は実行されますが、ローカルスコープ外の(ロ)はエラーになります。ローカルスコープ外からローカルスコープ内にアクセスできるのか、以下のように記述して実験しました。
(function(){ var bbb = { b: "BBB", c: function(){ return "CCC"; } }; window.$ = bbb; })(); console.log(window.$); console.log(window.$.c()); //windowは省略可 console.log($); console.log($.c());
windowオブジェクトは、ウェブページに於いてグローバルオブジェクト*1なので、window.$からローカルスコープ内のbbb
にアクセスできるようになりました。
まとめ
jQuery本体のソースコードを読めるようになるには、JavaScriptの理解が必要です。読み解くのに時間がかかりますが、勉強になります。今は、全体像を何となくしか掴めませんでしたが、改めて読み直したときに新たに分かるところが出てくるのを期待したいです。
ライブラリの中身を読むことで、新たな発見が得られます。今後、自分が作るプログラムの参考になるので、他の方が書いたコードを積極的に読んでいきたいです。