javascript - 显示模块模式无法按预期工作

所以我做了一个小小的“ jqgrid factory”，这是我第一次从头开始编写一个揭示模块的javascript diddy：

var jqGridReportFactory = (function () {

    var config = {
        datatype: 'json',
        mtype: 'GET',
        height: 'auto',
        autowidth: true,
        shrinkToFit: true,
        gridview: true,
        sortable: true,
        rowNum: 50,
        rowList: [50, 100, 200],
        viewrecords: true,
        loadonce: false,
        sortorder: 'asc',
        sortname: 'Affiliate',
        subGridSortname: 'SubAffiliate'
    },
    subGridOptions = {
        plusicon: "ui-icon-plus",
        minusicon: "ui-icon-minus",
        openicon: "ui-icon-carat-1-sw"
    },
    gridOptions = {
        id: null,
        pager: null,
        url: null,
        postData: null,
        colNames: null,
        colModel: null,
        pager: null,
        subGrid: false,
        subGridPostdata: null,
        subGridHeadersHidden: true
    };


    function createReport(gridOptions, optionalConfig) {
        $.extend(this.config, optionalConfig);
        $.extend(this.gridOptions, gridOptions);

        var jqGridObj = {
            url: this.url,
            datatype: this.config.datatype, //ERROR HERE!
            mtype: this.config.mtype,
            postData: this.gridOptions.postdata,
            colNames: this.gridOptions.colNames,
            colModel: this.gridOptions.colModel,
            height: this.config.height,
            autowidth: this.config.autowidth,
            shrinkToFit: this.config.shrinkToFit,
            gridview: this.config.gridview,
            sortable: this.config.sortable,
            rowNum: this.config.rownum,
            rowList: this.config.computeHighlightColorsrowList,
            viewrecords: this.config.viewrecords,
            loadonce: this.config.loadonce,
            sortorder: this.config.sortorder,
            sortname: this.gridOptions.sortname,
            pager: this.gridOptions.pager,
            loadError: function (xhr, st, err) {
                reportLoadError('onLoadConversionHistory', xhr, st, err);
                unblockUI();
            },
            gridComplete: function () {
                unblockUI();
                goToScrollPosition($('#reportPlaceHolder'));
            },
            subGrid: this.gridOptions.subGrid,
            subGridRowColapsed: function (subgrid_id, row_id) {
                // this function is called before removing the data
                var subgrid_table_id;
                subgrid_table_id = subgrid_id + "_t"; //
                $("#" + subgrid_table_id).remove();
            },
            onSelectRow: function (rowid) {
                $(this).jqGrid("toggleSubGridRow", rowid);
            }
        };

        if (this.subGrid) {
            var subGridObj = {
                subGridOptions: this.subGridOptions,
                subGridRowExpanded: function (subgridId, rowId) {
                    var affiliate = $("#" + this.id).jqGrid("getCell", rowId, 'Affiliate');

                    var subgridTableId = subgridId + "_t";
                    var $subGrid;
                    $("#" + subgridId).html("<table id='" + subgridTableId + "' class='scroll'></table>");
                    $subGrid = $('#' + subgridTableId); //cache subgrid, more performant

                    //change parent names from Affiliate to Subaffiliate
                    //other than that subGrid model is exactly the same as parent Affiliate model for all reports so far
                    this.gridOptions.colNames[0] = 'Subaffiliate';
                    this.gridOptions.colModel[0].name = 'SubAffiliate';
                    this.gridOptions.colModel[0].index = 'SubAffiliate';

                    //add affiliate to subGridPostData
                    var a = { Affiliate: affiliate };

                    $.extend(this.gridOptions.subGridPostdata, a)
                    $subGrid.jqGrid({
                        url: this.gridOptions.url,
                        datatype: this.gridOptions.datatype,
                        mtype: this.gridOptions.mtype,
                        postData: this.gridOptions.subGridPostdata,
                        colNames: this.gridOptions.colNames,
                        colModel: this.gridOptions.colModel,
                        height: this.config.height,
                        sortname: this.config.subGridSortname,
                        sortorder: this.config.subGridSortorder,
                        loadonce: this.config.loadonce,
                        //these subgrid setting should not be overridden in my opinion - Brian Ogden
                        autowidth: true,
                        shrinkToFit: true,
                        gridview: false,
                        sortable: false,
                        viewrecords: true
                        ///////////////////////
                    });

                    if (subGridHeadersHidden) {
                        //hide subgrid column headers
                        $subGrid.closest("div.ui-jqgrid-view")
                        .children("div.ui-jqgrid-hdiv")
                        .hide();
                    }
                },
            };

            $.extend(jqGridObj, subGridObj);
        }

        //jqGrid factory go!!
        $("#" + this.gridOptions.id).jqGrid(jqGridObj);
    }

    return {
        createReport: createReport
    };

})();

jqGridReportFactory.createReport(continuityGridOptions);

收到错误：未捕获的TypeError：无法读取未定义的属性'datatype'。我已经在上面的代码中注释了错误被抛出的那一行。我相信this出了点问题，因此我设置第一个显示模块模式的方式出了问题。

最佳答案

将行更改为：

datatype: config.datatype

您不需要this，因为config变量可在createReport()内部完全访问。

this.url不引发错误的原因很简单：它仅返回undefined. However, trying to access another subproperty of undefined`最终会引发错误。

关于javascript - 显示模块模式无法按预期工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21307429/