如何創建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模塊的多個實例？

回答

相關問題