XMLHttpRequest - 立即调用的函数表达式

Question

这似乎是一个愚蠢的问题，但我想检查一下我是否走在正确的轨道上。

我写了两个版本的 XMLHttpRequest 包装器； 两者都可以正常工作。

const httpRequest = function () {
    let xhr = new XMLHttpRequest();
    return function ( config = { url: '', method: 'GET', onLoadStart: null, onLoad: null, onProgress: null, onError: null, onAbort: null, onLoadEnd: null, onTimeout: null, timeout : null }) {

        xhr.open(config.method, config.url);
        xhr.onloadstart = config.onLoadStart;
        xhr.onload = config.onLoad;
        xhr.onprogress = config.onProgress;
        xhr.onerror = config.onError;
        xhr.onabort = config.onAbort;
        xhr.onloadend = config.onLoadEnd;
        xhr.ontimeout = config.onTimeout;
        xhr.timeout = config.timeout;
        return xhr;
    };
}();

和这个

function httpRequest(config = { url: '', method: 'GET', onLoadStart: null, onLoad: null, onProgress: null, onError: null, onAbort: null, onLoadEnd: null, onTimeout: null, timeout : null }) {
    var xhr = new XMLHttpRequest();

    xhr.open(config.method, config.url);
    xhr.onloadstart = config.onLoadStart;
    xhr.onload = config.onLoad;
    xhr.onprogress = config.onProgress;
    xhr.onerror = config.onError;
    xhr.onabort = config.onAbort;
    xhr.onloadend = config.onLoadEnd;
    xhr.ontimeout = config.onTimeout;
    xhr.timeout = config.timeout;

    return xhr;
}

我正在努力查明为什么要在正常函数工作的地方使用立即调用的函数表达式？ 希望有人能启发我，因为我已经阅读过这种情况，立即调用函数是更好的情况。

Answer 1

这两种方法的区别在于创建XMLHttpRequest对象的时间。

使用第一种方法，您可以这样称呼它：

h = httpRequest();
xhr1 = h({ ... });
xhr1.send(...);
xhr2 = h({ ... });
xhr2.send(...);

调用httpRequest()会创建一个XMLHttpRequest对象，该对象被分配给xhr1和xhr2 。

这不会很好地工作，因为创建xhr2覆盖该XMLHttpRequest对象的属性。 但是如果你能保证在完成之前的使用之前不会再次调用h() ，它会节省一点内存。

使用第二种方法，您只需直接调用httpRequest() ，它每次都会返回一个新的XMLHttpRequest对象。

xhr1 = httpRequest({...});
xhr1.send(...);
xhr2 = httpRequest({...});
xhr2.send(...);

这是安全的，因为您不会覆盖任何内容。

如果你改变了第一个版本， let xhr = new XMLHttpRequest(); 是在内部函数的开头，那么它就相当于第二种方法，只是使用起来稍微冗长一点。