0

在我所有的項目中,我使用以下方法來處理整個應用程序中的js。然而,我不喜歡我將變量傳遞給js中的模塊的方式:我在html上聲明它們,並在模塊中盲目地使用它們。Requirejs:傳遞參數時使用數據主入口點

所有的stackoverflow問題/答案我發現談論不同的設置和不使用這種數據主入口點的方法。

的index.html

<html> 
<body> 
    <article class="row m-b-xxl settings" data-js="modules/home"></article> 

    <script> 
     var bar = 'foo'; 
    </script> 

    <script src="require.js" data-main="main"></script> 
</body> 
</html> 

main.js

require.config({ 
    paths: { 
     'jquery': 'jquery.min', 
     'foundation': 'foundation.min' 
    }, 
    shim: { 
     "foundation": { 
      deps: ['jquery'], 
      exports: 'Foundation' 
     } 
    } 
}); 

// Load our app module 'main.js' and pass it to our definition function 
requirejs(['app'], function (App) { 
    App.initialize(); 
}); 

app.js

// The base app 
var widgetList = {}; 

define(['jquery', 'foundation' ], function ($, Foundation) 
     {  
     var initialize = function() { 
      // Set user agent 
      var doc = document.documentElement; 
      doc.setAttribute('data-useragent', navigator.userAgent); 

      // Do the widget loading 
      $('[data-js]').each(function() { 
       var scope = this; 

       requirejs([$(scope).data('js')], function (widget) { 
        var widgetDeclaration = new widget(); 
        widgetDeclaration.init(scope); 
        widgetList[widgetDeclaration.name] = widgetDeclaration; 
       }); 
      }); 
     } 

     return { 
      initialize: initialize 
     }; 
    } 
); 

模塊/ home.js

define(['jquery'], function ($) { 
    var Widget = function() { 
    }; 
    Widget.prototype = { 
     name: 'Dashboard Home', 
     init: function (scope) { 
      "use strict";     
      console.log(bar); 
    }; 

    return Widget; 
}); 

那麼如何正確地傳遞配置參數模塊?

回答

0

我能找到我的問題的最佳解決方案是通過改變我的requirejs的設置:

  • 包括在頭requirejs:<script src="require.js"></script>
  • 將一個模塊中的頁面配置,並給它一個是模塊:<script type="text/javascript">define('homeConfig', function() {var homeConfig = {};return homeConfig;});</script>
  • 負載requirejs配置:<script>requirejs(['main.js'], function() { /*load or init your app here */});</script>
  • 現在你有一個模塊名爲homeConfig,你可以用你的iside其他模塊:)

所以最後我沒有使用data-main Entry Point,因爲它不適合我的設置。