読者です 読者をやめる 読者になる 読者になる

jQueryを読み解く1(〜38行目)

いろいろ整理中に、あとで読もうと思っていた以下の記事を久しぶりに目にしました。(7年ぶりくらい)
jquery.jsを読み解く:特集|gihyo.jp … 技術評論社

jQueryオワコンだとかよく聞きますが、単純なWebではまだまだ使われるでしょうし
(脱jQueryするにはもう少し時間が掛かるかと思います)
jQueryのソースはほどんど読んだことがなかったので、ちょろっと読んでみることにしてみます。

Introduction

第1回 jQueryライブラリ(1~171行目):jquery.jsを読み解く|gihyo.jp … 技術評論社
こちらの記事は、v1.2.2 で当時は、93KB 程度のようでしたが 今の最新はv2.1.4で248KB に膨れており行数的にも約3倍ほどになっています。

読んでみます(〜35行目)

(function( global, factory ) {

    if ( typeof module === "object" && typeof module.exports === "object" ) {
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }
}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

なんと、CommonJS対応していたんですね。全然知りませんでした。

yak shaving

node触りたくなったので、コードリーディング開始2分で終了してyak shavingです。

nodeでjQueryを使う

いろいろうまくいかなくて、最終的には以下のようにすると実行できました。
(node周りは更新が早く、すぐ情報が陳腐化してしまいますね。)

npm init
npm install jquery --save-dev
npm install node-jsdom --save-dev
var jsdom = require("node-jsdom")
var html = '<html><body><h1>h1_text</h1></body></html>';
var window = jsdom.jsdom(html).parentWindow;
var $ = require('jquery')(window)

var h1 = $('h1').text();
console.log(h1);

package.json抜粋。

  "devDependencies": {
    "jquery": "^2.1.4",
    "node-jsdom": "^3.1.5"
  },

ちょっと解説

冒頭のjQueryのソースにあるように、windowオブジェクトがないとjQueryは利用できないため
node-jsdom でwindowを作成します。
jsdom というものがあったようですが、現在は io.js のみの対応となり
node-jsdomという別npmを利用するようにしています。
また、node-jsdomにはjQueryify という機能もありこれを利用することでjQueryの機能も使えるようです。
jQueryを直接requireするのとはまた別のやり方)

jQueryプラグインの今後(は、どうなるんでしょうか)

jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | mae's blog
こちらが詳しいのですが、
なんと The JQuery Plugin Registry に npm に登録する注意書きが記載されています。
これは、browserify 皆使おうぜってことなんでしょうか?
周りでbrowserify 使ってる人みたことないんですが。。。どうしよう。

参考

jquery.jsを読み解く:特集|gihyo.jp … 技術評論社
node-jsdom
jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | mae's blog