JS中的局部和全局變量

Question

我有以下javascript代碼

 var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

我想使用IIFE將所有函數封裝在一個閉包中，以避免混亂全局名稱空間，因此我寫道：

 (function(window){
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }
    });

但是，我不太了解這個概念，現在在我的HTML頁面中，我將如何調用函數onLoadPage ？

Answer 1

現在，您已經封閉了模塊，您需要確定要向外界公開的內容。 您想公開的任何內容都可以導出 。 另外，您需要確定要附加到的上下文 （在本例中為window ）。 然后立即傳遞上下文（從而完成IIFE）。

例如：

(function(window){
    var exports = {};
    var globalConfiguration = null;

    function loadFile(filePath) {   
    }

    function onLoadPage() {
    }

    function getConfiguration() {
    }

    function process() {
    }

    exports.getConfiguration = getConfiguration;
    window.myModule = exports;
})(window);

附加到傳入的window對象是一種以受控方式導出內容的方法。 因此，您確實需要將上下文（在本例中為窗口）傳遞給IIFE。 也許， window並不總是調用的上下文。

運行此代碼后， myModule將在全局范圍內可用。

Answer 2

您不能以某種方式將其放在全局名稱空間中。

我建議構造這樣的代碼：

function ExampleHelper() {
    (function(scope) {

        scope.globalConfiguration = null;

        scope.loadFile = function(filePath) {

        };

        scope.onLoadPage = function() {

        };

        scope.getConfiguration = function() {

        };

        scope.process = function() {

        };

    })(this);
}

var foo = new ExampleHelper(); // "foo" now contains all of your functions
foo.onLoadPage();

Answer 3

您可以將函數設置為window.onload回調。

 (function(window) { var globalConfiguration = null; window.onload = onLoadPage; function loadFile(filePath) {} function onLoadPage() { alert('hello world'); } function getConfiguration() {} function process() {} }(window)); 

Answer 4

這稱為函數/方法鏈接，通常這樣做是為了提高代碼的可讀性，並避免使用臨時變量來保存每個函數的返回值。

查看有關鏈接方法的這篇文章，這有助於我更好地了解鏈接。

我看到您想使用閉包來避免使全局對象混亂。 但是，請注意，我們編寫了可重用性的函數。 盡管創建了一個閉包，但是請確保外部函數內部的方法是抽象的，以便它們可以被代碼的其他部分使用。 例如：從您的代碼中，您有一個loadFile方法可以重用。

現在來看一下如何使用鏈中描述的方法。

假設：（由於我不知道您為什么編寫這些方法，因此我做出了一些假設）。

1. loadFile（filepath）-返回文件對象
2. onPageLoad（）-加載頁面后，它將返回輸入文件的對象或ID
3. getConfiguration（）-獲取文件路徑
4. process（）-處理文件

。的onPageLoad（）的loadFile（getConfiguration（））處理（）;

重要的部分是在鏈接中正確設置了對象的范圍。 為此，每個方法必須將引用返回到適當的對象。

希望這可以幫助。