requirejs 如何正确设置依赖文件以便能够在它们之间传递变量？

Question

我刚开始使用 requirejs，我很难弄清楚如何 link 建立这些文件。通常我只是以正确的加载顺序包含 js 文件。

main.js

requirejs.config({
        paths: {
            "jquery": "jquery-3.3.1",
            "jquery-ui": "jquery-ui",
            "dataTables": "DataTables/datatables",
            "toastr": "toastr",
            "ajaxConfiguration": "myScripts/ajaxConfiguration",
            "dataTablesConfiguration": "myScripts/dataTablesConfiguration",
            "jqueryUiConfiguration": "myScripts/jqueryUiConfiguration",
            "updateDatabaseBtn": "myScripts/updateDatabaseBtn"
        },

    });

    require(['jqueryUiConfiguration', 'updateDatabaseBtn'],
        function() {
        });

首先，这是有道理的，因为这个文件依赖于 jquery-ui 和 jquery 来运行。所以简单地添加这些作为依赖项是很直接的。

jqueryUiConfiguration.js

define(['jquery', 'jquery-ui'],
    function() {
        $(document).ready(function() {
            $("#tabs").tabs();
            $("#updateBtn").button();
        });
    });

其次，这个只需要 jquery 所以再次添加依赖项很简单。

ajaxConfiguration.js

define(['jquery'], function () {

        var updateDatabaseBtnClicked = false;

        $(document).ready(function() {

            $(document).ajaxStart(function() {
                if (updateDatabaseBtnClicked) {
                    $("#loading").css("display", "block");
                    $("#overlay").css("display", "block");
                }

            });

            $(document).ajaxComplete(function() {
                $("#loading").css("display", "none");
                $("#overlay").css("display", "none");
                updateDatabaseBtnClicked = false;
            });

        });
    });

和这个一样。

dataTablesConfiguration.js

define(['jquery', 'dataTables'],
    function () {
        var $table;
        $(document).ready(function() {
            $table = $("#transactionTable").DataTable({
                "processing": true,
                type: "GET",
                ajax: {
                    url: "DataService.svc/GetDataAsJsonObjects",
                    dataSrc: ""
                },
                "columns": [
                    { data: "CustomerName" },
                    { data: "CompanyName" },
                    { data: "CurrentBalance" }
                ]
            });
        });
    });

然而，这是实际需要在其中使用代码的文件 dataTablesConfiguration.js 和 ajaxConfiguration.js，以及 toastr.js 中的一些方法，我不知道如何 ui 确定如何将它们 link 在一起，因为它们需要访问来自这些文件的变量

updateDatabaseBtn.js

define(['dataTablesConfiguration', 'ajaxConfiguration', 'toastr'], // this is not right
    function() {
        $(document).ready(function() {

            $("#updateBtn").click(function() {

                updateDatabaseBtnClicked = true;

                $.ajax({
                        type: "POST",
                        url: "myApi",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    })
                    .done(function() {
                        $table.ajax.reload();
                        toastr.success("Database updated");
                    })
                    .fail(function() {
                        toastr.error("Something unexpected happened");
                    });
            });
        });
    });

Answer 1

您可以作为回调参数传递并访问另一个模块中的模块

例如

    define(['dataTablesConfiguration', 'ajaxConfiguration', 'toastr'], 
            function(dataTablesConfiguration,ajaxConfiguration,toastr) {
              toastr.success("Database updated");

 }

要从配置文件中提供正确的顺序，您可以使用 sim 配置文件。例如。

"shim": {
    "bootstrap-responsive": {
        "deps": [ "bootstrap", "respond" ],
        "exports": "bootstrap-responsive"
    },
    "komapping": {
        "deps": [ "knockout" ],
        "exports": "komapping"
    },
    "bootstrap": {
        "deps": [ "jquery" ],
        "exports": "bootstrap"
    },
    "bootstrap-dialog": {
        "deps": [ "bootstrap", "jquery" ],
        "exports": "bootstrap-dialog"
    },
    "jquery-ui": {
        "deps": [ "jquery" ],
        "exports": "$"
    }
}

requirejs 如何正确设置依赖文件以便能够在它们之间传递变量？

requirejs how to setup dependencies files correctly to be able to pass variables between them?

javascript

jquery

requirejs