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

我正在处理一个巨大的JavaScript代码库，我试图重新组织。我不是一个真正的专家，我刚刚开始学习良好的JavaScript编码实践。所以，我试图做的一件事是将模块中的所有代码分开。在这种特殊情况下，我试图创建一个模块来帮助我优化视频嵌入。我想通过该模块的ID并接收一些HTML代码或图像。如何创建IIFE Javascript模块的多个实例？

我不会把整个代码在这里，但它是足够的例子：

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模式结合使用。这是正确的做法吗？

来源

2015-10-15 Carlo

而且是正确的做法？

编号IIFEs是你想要做的事情一次。

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

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

来源

2015-10-15 11:27:59 Quentin

那么为什么你仍然保持你的例子IIFE？ – Carlo

@Carlo - 因为还有一件事情需要做一次（这是使'$'变量可用）。需要重复调用的代码将移入它自己的函数中，并从IIFE返回。 – Quentin

好的，这是有道理的。谢谢 – Carlo

的问题是，您要指派给videoIframe变量时初始化对象：

var videoIframe = (function($) { 
    // ... 
})(jQuery);

你可以尝试使用：

var videoIframe = (function($) { 
    // ... 
}); 

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

来源

2015-10-15 11:26:06 hsz

我做了一些小修改。希望这将是有益的

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

    function _setVideoId(videoId) { 
     id = videoId; 
     alert(id); 
    }; 
    function _getVideoThumbnail(videoId) { 
     _setVideoId(videoId); 

    }; 
    function _test(){ 
     console.log(id) 
    } 
    function _getVideoEmbedCode() { 

    }; 

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

现在你可以这样调用

videoIframe.getVideoThumbnail(123); 
videoIframe.getVideoThumbnail(561);

jsfiddle

来源

2015-10-15 11:30:46 brk

只要保持videoIframe为您返回一个IIFE功能，而不是重用单身。我保留了IIFE，因此id和内部函数不断被封装，因此，如果它们不在返回的接口对象中，则无法访问。如果您打算创建其中的大部分内容，那么仅仅使用构造函数和原型可能会更有效率，所以内部函数不会为每个实例重新创建。

var videoIframe = function() { 
    'use strict'; 
    return (function() { 
     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 
     }; 
    }()); 
};

来源

2015-10-15 11:30:50 Shilly

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

回答

相关问题