如何实现多按钮与SharePoint提交功能的可扩展性优化

核心思路是用HTML数据属性存储每个按钮要提交的字段值，统一绑定事件处理逻辑，彻底消除重复代码，新增提交需求时只需要添加按钮，不用修改JS。

具体改动步骤： #

1. 修改按钮HTML结构
   给所有需要触发提交的按钮添加统一的类（比如submit-view-btn），同时用data-view-value属性存对应的提交值，示例：

<!-- 原按钮只需添加统一类和数据属性，原类名可保留不影响 -->
<button class="submit-view-btn picture1" data-view-value="Selected">提交Selected</button>
<button class="submit-view-btn picture2" data-view-value="Field-3">提交Field-3</button>
<button class="submit-view-btn picture3" data-view-value="Field-2">提交Field-2</button>
<button class="submit-view-btn picture4" data-view-value="Field-1">提交Field-1</button>

2. 精简JS代码
   删掉所有重复的点击事件监听和InsertItem系列函数，只保留一个通用事件处理逻辑：

$(document).ready(function(){
    // 统一监听所有带submit-view-btn类的按钮点击
    jQuery(document).on("click", '.submit-view-btn', function(){
        // 从按钮的data属性中获取要提交的viewhit值
        const viewValue = $(this).data('view-value');
        // 直接调用updateData提交
        updateData(viewValue);
    });
});

function updateData(viewhit) {
    var restendpoint = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Views')/items";
    $.ajax({
        url: restendpoint,
        type: "POST",
        data: JSON.stringify({
            __metadata: {
                type: "SP.Data.ViewsListItem"
            },
            Title: "Podcast",
            Views: viewhit
        }),
        headers: {
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "X-HTTP-Method": "POST"
        },
        success: function() {
            console.log("Item added to the SharePoint list");
        },
        error: function() {
            console.log("Error Occurred!");
        }
    });
}

优化后的优势： #

• 扩展性拉满：新增提交需求时，只需要在HTML里加一个带submit-view-btn类和对应data-view-value的按钮，完全不用改JS代码。
• 代码量骤减：去掉了大量重复的事件绑定和中间函数，逻辑更清晰，维护成本低。
• 灵活性高：如果后续需要修改提交逻辑，只需要改动updateData或者事件处理函数这一处，不用逐个修改按钮绑定。

内容的提问来源于stack exchange，提问作者TonyT