如何创建IIFE Javascript模块的多个实例？

Question

我正在处理一个巨大的JavaScript代码库,我正在尝试重新组织.我不是真正的专家,我刚开始研究良好的JavaScript编码实践.所以,我要做的一件事就是将模块中的所有代码分开.在这个特殊情况下,我正在尝试创建一个可以帮助我优化视频嵌入的模块.我想传递一个id的模块,并从中接收一些HTML代码或图像.

我不是把整个代码都放在这里,但这对于这个例子来说已经足够了:

var videoIframe = (function($) {
    'use strict';
     var id,

    setVideoId = function(videoId) {
        id = videoId;
        console.log(id);
    },
    getVideoThumbnail = function(videoId) {
        setVideoId(videoId);

    },
    test = function() {
        console.log(id)
    },
    getVideoEmbedCode = function() {

    };

    return {
       test: test,
       getVideoThumbnail: getVideoThumbnail
    };
})(jQuery);

在另一个模块中,我将它分配给两个变量:

    var video1 = videoIframe;
    var video2 = videoIframe;

    video1.getVideoThumbnail(123);
    video2.getVideoThumbnail(456);

    video1.test();
    video2.test();

而且,当然,我没有达到我的预期.第二次getVideoThumbnail调用后,它始终打印456.

做一些研究我明白我正在创建一个单例,一个实例,而我只是在该实例中更改值.我想我的模块需要一个构造函数,但我不确定如何与IIFE模式一起创建它.这是正确的方法吗？

Answer 1

这是正确的方法吗？

第IIFE号是您想要做的事情.

如果您想多次执行某些操作,请使用常规函数并多次调用它.

var videoIframe = (function($) {

    function videoIframe() {
        'use strict';
        var id,

            setVideoId = function(videoId) {
                id = videoId;
                console.log(id);
            },
            getVideoThumbnail = function(videoId) {
                setVideoId(videoId);

            },
            test = function() {
                console.log(id)
            },
            getVideoEmbedCode = function() {

            };

        return {
            test: test,
            getVideoThumbnail: getVideoThumbnail
        };
    }

    return videoIframe;
})(jQuery);

var video1 = videoIframe();
var video2 = videoIframe();

video1.getVideoThumbnail(123);
video2.getVideoThumbnail(456);

video1.test();
video2.test();