配置使用JavaScript對象文字構建的窗口小部件時，如何避免代碼重復？

Question

我知道可能有一些非常小的和簡單的繼承或擴展解決方案，但是我希望這個問題不僅對我有好處。 而且更快。

我有例如以下代碼來設置Kendo UI網格 。 我需要針對同一視圖上的兩個網格完全重復此代碼，除了transport.read.data對象中的一個參數不同。 我意識到我可以將model和columns定義分解為共享對象，但最終還是希望共享整個網格配置。 也許是一個名為myUserKendoGrid的jQuery擴展？

    $("#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);