Question

我刚开始使用requirejs，但现在很难弄清楚如何链接这些文件。通常，我只是按照正确的加载顺序包含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的一些方法，我不太确定如何将它们链接在一起，因为它们需要访问这些文件中的变量

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如何正确设置依赖项文件以便能够在它们之间传递变量？

1 个答案: