Question

在我的所有项目中，我使用以下方法在整个应用程序中处理js。但是，我对我将变量传递给js中的模块的方式感到不满意：我在html上声明它们并盲目地在模块上使用它们。

我找到的所有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;
});

那么如何正确地将配置参数传递给模块呢？

Answer 1

我能找到的最佳解决方案是改变我的requirejs设置：

在标题中包含requirejs：<script src="require.js"></script>
将页面配置放在模块中，并为其提供module_id：<script type="text/javascript">define('homeConfig', function () {var homeConfig = {};return homeConfig;});</script>
加载requirejs config：<script>requirejs(['main.js'], function () { /*load or init your app here */});</script>
现在您有一个名为homeConfig的模块，您可以使用其他模块：）

所以最后我没有使用data-main Entry Point，因为它不适合我的设置。

Requirejs：使用data-main入口点时传递参数

1 个答案: