javascript - 在配置使用 JavaScript 对象文字构建的小部件时，如何避免代码重复？

Question

我知道可能有一些非常小而简单的继承或扩展解决方案，但我希望这个问题不仅仅对我有益。而且更快。

我有例如以下代码来设置Kendo UI 网格。我需要对同一视图上的两个网格完全重复此代码，除了transport.read.data对象中的一个参数差异。我意识到我可以将model和columns定义分解为共享对象，但我想最终共享整个网格配置。也许一个叫做 jQuery 的扩展myUserKendoGrid？

    $("#availableUsersGrid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "/Role/AvailableUsersJson",
                    data: { roleId: $("#Id").val() },
                    type: "GET"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { editable: false },
                        UserName: { editable: false },
                        EmployeeRefNum: { editable: false },
                        EmployeeSurname: { editable: false },
                        EmployeeFullNames: { editable: false }
                    }
                }
            }
        },
        columns: [
                { field: "UserName", title: "User Name" },
                { field: "EmployeeRefNum", title: "Emp. No." },
                { field: "EmployeeSurname", title: "Surname" },
                { field: "EmployeeFullNames", title: "Name" }
        ],
        selectable: "multiple, row",
        editable: false,
        sortable: true,
        pageable: true
    });

Answer 1

您可以通过jQuery.extend()的方法简单地克隆您的配置。例如：

var superDuperAwesomeConfiguration = {
    // moar configs go here, yo!
};

var copyCatConfigs = jQuery.extend(true, {}, superDuperAwesomeConfiguration);

// modify copyCatConfigs properties here

$("#gridA").kendoGrid(superDuperAwesomeConfiguration);
$("#gridB").kendoGrid(copyCatConfigs);