[英]How to create multiple instances of IIFE Javascript module?
我正在处理一个巨大的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模式一起创建它。 这是正确的方法吗?
这是正确的方法吗?
第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();
问题是您在分配videoIframe
变量时正在初始化对象:
var videoIframe = (function($) {
// ...
})(jQuery);
您可以尝试:
var videoIframe = (function($) {
// ...
});
var video1 = videoIframe(jQuery);
var video2 = videoIframe(jQuery);
我做了一些小修改。 希望它会有所帮助
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);
只需将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
};
}());
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.