如何创建IIFE Javascript模块的多个实例? [英] How to create multiple instances of IIFE Javascript module?

问题描述

我正在处理一个巨大的javascript代码库，我正在尝试对其进行重组.我不是真正的专家，我刚刚开始学习良好的javascript编码惯例.因此，我要尝试做的一件事就是将所有代码划分为模块.在这种情况下，我试图创建一个模块来帮助我优化视频嵌入.我想向模块传递一个ID，并从中接收一些html代码或图像.

I'm dealing with a huge javascript codebase that I'm trying to reorganize. I'm not really an expert and I just started studying good javascript coding practices. So, one thing I'm trying to do is to divide all the code in modules. In this particular case I'm trying to create a module that would help me to optimize video embeds. I would like to pass the module an id and receive some html code or an image out of it.

我没有将整个代码放在这里，但是对于示例来说就足够了:

I'm not putting the whole code here, but it's enough for the example:

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);

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

In another module I assign it to two variables:

    var video1 = videoIframe;
    var video2 = videoIframe;

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

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

当然，我没有达到我的期望.在第二次 getVideoThumbnail 调用之后，它将始终打印 456 .

And, of course, I'm not getting what I expected. After the second getVideoThumbnail call, it always prints 456.

进行一些研究，我了解到我正在创建一个单例，一个实例，而我只是在该实例内更改值.我想我的模块需要一个构造函数，但是我不确定如何结合IIFE模式创建它.这是正确的方法吗?

Doing some research I understood that I'm creating a singleton, a single instance, and I'm only changing values inside that instance. I think I need a constructor for my module, but I'm not sure how to create it in combination with the IIFE pattern. And is it the right approach?

推荐答案

这是正确的方法吗?

And is it the right approach?

不.IIFE是您只想做一次的事情.

No. IIFEs are for things you want to do exactly once.

如果您想多次执行某项操作，请使用一个常规函数并多次调用它.

If you want to do something multiple times, then use a regular function and call it multiple times.

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();

这篇关于如何创建IIFE Javascript模块的多个实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！