ポジローぽけっと

昨日より今日、今日より明日を信じて、トライトライ

JQuery.DeferredとES2015のPromiseオブジェクトの違いってなんなのさってなったら

javascript

よくわっからーん。
下記二つ読んでも、同じように実装できるからDeferredの必要性がわからない。

下記なんかを読むとPromiseで十分なのかなと思う。

方針

  • ブラウザの対応状況に左右されるならJQuery.Defferedを使う
  • node.jsで使うなら、require(“jquery”)はしたくないからPromiseを使う

テスト

sleepで比較

Deferred

function sleepDeferred(ms) {
    "use strict";
    var kind = "Deferred";
    var d = new $.Deferred();
    if (ms > 2000) {
        setTimeout(function () {
            // statements
            console.log("%s:resolve", kind);
            d.resolve(kind);
        }, ms);
    } else {
        setTimeout(function () {
            console.log("%s:reject", kind);
            d.reject(kind);
        }, ms);
    }
    return d.promise();
}

Promise

function sleepPromise(ms) {
    "use strict";
    var kind = "Promise";
    var p = new Promise(function (resolve, reject) {
        if (ms > 2000) {
            setTimeout(function () {
                // statements
                console.log("%s:resolve", kind);
                resolve(kind);
            }, ms);
        } else {
            setTimeout(function () {
                console.log("%s:reject", kind);
                reject(kind);
            }, ms);
        }
    });
    return p;
}

chainで比較

Deferred

sleepDeferred(6000).done(
    function (kind) {
        "use strict";
        console.log("%s:done", kind);
    }
).fail(
    function (kind) {
        "use strict";
        console.log("%s:fail", kind);
    }
);

Promise

sleepPromise(2000).then(
    function (kind) {
        "use strict";
        console.log("%s:then", kind);
    }
).catch(
    function (kind) {
        "use strict";
        console.log("%s:catch", kind);
    }
);

並列実行で比較

Deferred

$.when(
    sleepDeferred(1000),
    sleepDeferred(3000)
).done(
    function (kind) {
        "use strict";
        console.log("%s:then", kind);
    }
).fail(
    function (kind) {
        "use strict";
        console.log("%s:catch", kind);
    }
);

Promise

Promise.all([// Promise.raceもあるよ！
    sleepPromise(1000),
    sleepPromise(3000)
]).then(
    function (kind) {
        "use strict";
        console.log("%s:then", kind);
    }
).catch(
    function (kind) {
        "use strict";
        console.log("%s:catch", kind);
    }
);

追記

Node.jsでJQuery.Deferredを動かしたかったら

javascript

これははまった。以下の記述で気づけた。

This is because reqyure(‘jquery’) requires a window object

引用元：Testing javascript code that uses require('jquery') in node - Stack Overflow

jquery.js内にも記述がある

// For CommonJS and CommonJS-like environments where a proper window
// is present, execute the factory and get jQuery.
// For environments that do not have a window with a document
// (such as Node.js), expose a factory as module.exports.
// This accentuates the need for the creation of a real window.
// e.g. var jQuery = require(“jquery”)(window);
// See ticket #14549 for more info.

ticket:#14549 (npm jQuery does not expose the jQuery function, but instead a wierd factory) – jQuery - Bug Tracker

jQuery is mainly a DOM library. What would you use it for without a DOM?

そうは言うけど、ママ持ってきてさっと試したい時とかあるかもよ〜

確認1

const $ = require("jquery");
console.log($.toString());

function ( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            }

確認2

const $ = require("jquery");
const window = "";
try {
    $(window);
} catch (e) {
    console.log(e);
}

Error: jQuery requires a window with a document

対応

GitHub - tmpvar/jsdom: A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.jsを使って、windowを用意する。

ES6ならDestructuring assignment - JavaScript | MDNを使って

const {JSDOM} = require("jsdom");
const {window} = new JSDOM("");
const $ = require("jquery")(window);

それ以前なら

const JSDOM = require("jsdom").JSDOM;
const window = new JSDOM("").window;
const $ = require("jquery")(window);

追記

しっかり書いてあった。。https://www.npmjs.com/package/jQuery
でも動かなかった。