Require.js如何處理全局變量？

Question

我正在嘗試使用Require.js模塊化JavaScript應用程序。 我試圖弄清楚如何處理應用程序中使用的全局變量。 我讀到的所有內容都說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
}

綜上所述，該應用程序是交互式的，並且多個控件和用戶在頁面上執行的操作必須有權訪問全局可訪問的變量和值，並且它必須能夠與它們進行交互並進行處理。

沒有全局變量，我該怎么做？

Answer 1

首先查看此答案

您需要在settings.js文件中創建一個單例，如下所示：

(function(){

    define([], function(){

        var settings = {

        };

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

})();

然后像這樣將其包含在您的模塊中

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

    var mySettings = settings.GetSettings();

});

然而！ 我建議使用諸如Angular，Ember或Durandle之類的框架-它們提供了處理此類情況的更好方法

Answer 2

創建一個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
    }
});

這是基本的方法。