2014-02-09 134 views
0

我試圖使用Require.js模塊化JavaScript應用程序。我想弄清楚如何處理應用程序中使用的全局變量。我讀過的所有內容都表明,Require.js的要點之一就是擺脫全局變量。反正我有一個互動這樣的:Require.js如何處理全局變量?

function myFunction() 
{ 
    // Access some dynamic variables here 
} 

$('#myButton').on('click', myFunction()); 

mySettings = {}; 

$('#myForm').on('submit', function() 
{ 
    mySettings.someSetting = "someValue"; 

    $.ajax(....) // Send the mySettings to some PHP script 
} 

所以總結起來,應用程序是交互式的,幾個控件和事物的用戶在頁面上確實有訪問全局可訪問的變量和價值觀,它必須是能夠與他們互動和做些事情。

沒有全局變量,我該怎麼做?

回答

0

Check out this answer first

您需要在您的settings.js創建一個單獨的文件是這樣的:

(function(){ 

    define([], function(){ 

     var settings = { 

     }; 

     return { 
      GetSettings: function() { return settings; } 
     }; 
    }); 

})(); 

然後將其包含在你的模塊,像這樣

define(['./settings'], function(settings){ 

    var mySettings = settings.GetSettings(); 

}); 

但是!我會建議使用像角,灰燼或Durandle框架 - 它們提供了處理這種類型的情況要好得多方式

0

創建settings模塊:

define(function() { 
    return { 
     settingA: "some value", 
     settingB: true, 
     settingC: {a: 1, b: 2, c: 3} 
    }; 
}); 

如果settings模塊是爲了在全球範圍內使用,我會在名稱settings下提供它,而不是使用相對路徑。所以我把這個在RequireJS配置:

paths: { 
    "settings": "path/to/the/actual/settings" 
} 

然後需要這樣的:

define(["settings"], function (mySettings) { 
    function myFunction() 
    { 
     // Access some dynamic variables here 
    } 

    $('#myButton').on('click', myFunction()); 

    $('#myForm').on('submit', function() 
    { 
     mySettings.someSetting = "someValue"; 

     $.ajax(....) // Send the mySettings to some PHP script 
    } 
}); 

這是做它的基本途徑。

+0

如果頁面上的不同事件需要以不同方式處理設置會怎麼樣?也許點擊按鈕觸發ajax發送設置的地方。也許頁面上的其他元素與相同的設置值完全不同。我需要爲需要發生的每個不同行爲設置不同的模塊嗎? –

+0

另外,以上定義需要關於onclick事件(或使用它的任何交互式事件)在哪裏?爲什麼它定義()而不是require()? –

+0

按順序回答你的問題...... 1.我在你描述的內容中沒有讀到任何內容,它會強制使用不同的設置模塊來執行不同的操作。我會編輯答案。我假設你的問題中的代碼將在一個模塊中。它可以和'require([「settings」],function(settings){'。 – Louis

相關問題